/* Uygulama Renk ve Ölçü Sistemi */
:root {
    --app-bg: #f4f7fb;
    --app-card: #ffffff;
    --app-border: #e4e9f0;
    --app-text: #172033;
    --app-muted: #718096;
    --app-primary: #155eef;
    --app-primary-soft: #edf3ff;
    --app-success: #159669;
    --app-warning: #d78400;
    --app-danger: #dc3f55;
    --app-shadow: 0 8px 24px rgba(24, 38, 61, 0.055);
    --app-radius: 14px;
}

/* Temel Sayfa Düzeni */
* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
}

a {
    text-decoration: none;
}

.app-container {
    max-width: 1660px;
    padding-inline: clamp(14px, 2vw, 30px);
}

.page-wrap {
    padding-block: 22px 40px;
}

/* Uygulama Toolbarı */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #fff;
    box-shadow: 0 3px 16px rgba(21, 32, 51, 0.05);
}

.app-toolbar {
    height: 64px;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
}

/* Geniş Ekranda Toolbarı Kenarlara Yay */
.app-toolbar .app-container {
    max-width: none;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-text);
    white-space: nowrap;
}

.app-brand:hover {
    color: var(--app-text);
}

.app-brand-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: var(--app-primary);
    color: #fff;
    box-shadow: 0 5px 14px rgba(21, 94, 239, 0.18);
}

.app-brand-text,
.login-brand div {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.app-brand-text strong,
.login-brand strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.app-brand-text small,
.login-brand small {
    margin-top: 4px;
    color: #8b97a8;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--app-border);
}

/* Şube Seçimi */
.branch-form,
.single-branch {
    align-items: center;
    gap: 7px;
    height: 38px;
    padding-inline: 9px;
    border-radius: 9px;
    background: #f7f9fc;
    color: #536177;
}

.branch-form .form-select {
    width: 128px;
    min-height: 0;
    padding: 0 28px 0 0;
    border: 0;
    background-color: transparent;
    font-size: 10px;
    font-weight: 700;
}

.single-branch {
    font-size: 10px;
    font-weight: 700;
}

/* Global Arama */
.app-search {
    position: relative;
    max-width: 560px;
    min-width: 150px;
}

.app-search > i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    transform: translateY(-50%);
    color: #8c99aa;
}

.app-search .form-control {
    height: 38px;
    padding: 0 58px 0 36px;
    border: 1px solid #e1e6ed;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 11px;
    box-shadow: none;
}

.app-search .form-control:focus {
    border-color: #aec1f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.06);
}

.app-search kbd {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    padding: 3px 5px;
    border: 1px solid #dfe4eb;
    border-radius: 5px;
    background: #fff;
    color: #8b97a8;
    font-family: inherit;
    font-size: 8px;
}

.search-results {
    position: fixed;
    top: 58px;
    left: 50%;
    z-index: 1060;
    width: min(560px, calc(100vw - 28px));
    max-height: 420px;
    overflow-y: auto;
    transform: translateX(-50%);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(17, 30, 52, 0.16);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-bottom: 1px solid #edf1f5;
    color: #40506a;
}

.search-result-item:last-child {
    border-bottom: 0;
}

.search-result-item:hover {
    background: #f7f9fc;
}

.search-result-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.search-result-copy strong,
.search-result-copy small {
    display: block;
}

.search-result-copy strong {
    font-size: 11px;
}

.search-result-copy small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.search-empty {
    padding: 18px;
    color: var(--app-muted);
    font-size: 11px;
    text-align: center;
}

/* Toolbar İşlemleri */
.toolbar-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    gap: 6px;
    padding-inline: 10px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    color: #40506a;
    font-size: 10px;
    font-weight: 700;
}

.toolbar-btn.primary {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #fff;
    box-shadow: 0 5px 12px rgba(21, 94, 239, 0.16);
}

.toolbar-icon,
.mobile-modules {
    position: relative;
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    color: #46566e;
}

.toolbar-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-danger);
    box-shadow: 0 0 0 2px #fff;
}

.user-button {
    display: flex;
    align-items: center;
    height: 38px;
    gap: 7px;
    padding: 2px 5px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #41516a;
}

.user-button:hover {
    background: #f6f8fb;
}

.user-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: #eaf1ff;
    color: var(--app-primary);
}

.user-copy {
    line-height: 1.05;
    text-align: left;
}

.user-copy strong,
.user-copy small {
    display: block;
}

.user-copy strong {
    font-size: 9px;
}

.user-copy small {
    margin-top: 3px;
    color: #8b97a8;
    font-size: 8px;
}

/* Modül Navigasyonu */
.module-bar {
    position: sticky;
    top: 64px;
    z-index: 1030;
    height: 44px;
    border-bottom: 1px solid #e5eaf0;
    background: #fbfcfe;
}

.module-nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2px;
}

.module-link {
    display: inline-flex;
    align-items: center;
    height: 34px;
    gap: 6px;
    padding-inline: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #58677e;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.module-link:hover,
.module-link:focus,
.module-link.active {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.module-spacer {
    flex: 1;
}

.app-dropdown {
    min-width: 220px;
    margin-top: 0 !important;
    padding: 6px;
    border: 1px solid #e2e7ed;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(20, 34, 57, 0.11);
}

/* Menü Düğmesiyle Panel Arasındaki Fare Geçiş Köprüsü */
.app-dropdown::before {
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 10px;
    content: "";
}

.app-dropdown .dropdown-item {
    padding: 7px 9px;
    border-radius: 7px;
    color: #40506a;
    font-size: 10px;
}

.app-dropdown .dropdown-item:hover {
    background: #f5f8fc;
    color: var(--app-primary);
}

.dropdown-header {
    padding: 6px 9px 4px;
    color: #9aa5b5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Mobil Modül Kartları */
.mobile-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mobile-module-grid a {
    display: flex;
    min-height: 74px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #fff;
    color: #40506a;
    font-size: 10px;
    font-weight: 700;
}

.mobile-module-grid a i {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 8px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

/* Sayfa Başlıkları ve Paneller */
.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.page-heading h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.page-heading p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 11px;
}

.panel-card,
.metric-card,
.filter-card,
.form-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-card);
    box-shadow: var(--app-shadow);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 17px 12px;
}

.panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.panel-sub {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 10px;
}

.panel-body {
    padding: 0 17px 17px;
}

.form-card {
    padding: 18px;
}

.form-section + .form-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}

.form-section-title {
    margin-bottom: 13px;
    font-size: 12px;
    font-weight: 800;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f5;
}

/* İş Emri Araç Kabul Özet Kartı */
.vehicle-owner-card,
.vehicle-owner-empty {
    height: 100%;
    min-height: 228px;
    border: 1px solid #dbe5f4;
    border-radius: 14px;
    background: linear-gradient(145deg, #f8fbff, #ffffff);
}

.vehicle-owner-card {
    padding: 16px;
}

.vehicle-owner-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.vehicle-owner-heading > div,
.vehicle-owner-person {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vehicle-owner-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--app-primary);
    background: #e8f0ff;
    font-size: 17px;
}

.vehicle-owner-card small,
.vehicle-owner-empty span {
    color: var(--app-muted);
    font-size: 9px;
}

.vehicle-owner-heading strong,
.vehicle-owner-person strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-owner-person {
    margin-top: 13px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #eef4ff;
}

.vehicle-owner-person span {
    margin-top: 2px;
    color: #53657d;
    font-size: 9px;
}

.vehicle-owner-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.vehicle-owner-facts > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vehicle-owner-facts strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-history-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 13px;
    color: var(--app-primary);
    font-size: 9px;
    font-weight: 750;
    text-decoration: none;
}

.vehicle-owner-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    color: #61738d;
    text-align: center;
}

.vehicle-owner-empty > i {
    color: #a4b3c7;
    font-size: 28px;
}

.vehicle-owner-empty strong {
    font-size: 11px;
}

.filter-card {
    margin-bottom: 14px;
    padding: 12px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-row .form-control {
    min-width: 160px;
    flex: 1;
}

/* Form Alanları */
.form-label {
    margin-bottom: 5px;
    color: #55637a;
    font-size: 10px;
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 40px;
    border-color: #dfe5ec;
    border-radius: 9px;
    font-size: 11px;
}

textarea.form-control {
    min-height: 86px;
}

.btn {
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

.btn-sm {
    padding: 7px 10px;
    font-size: 10px;
}

.app-alert {
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 11px;
}

/* Liste Tabloları */
.table {
    margin-bottom: 0;
}

.table th {
    padding: 10px 12px;
    border-color: #edf1f5;
    color: #8b98aa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    padding: 11px 12px;
    border-color: #edf1f5;
    color: #40506a;
    font-size: 10px;
    vertical-align: middle;
}

.table a:not(.btn) {
    color: var(--app-primary);
    font-weight: 700;
}

.plate {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 6px;
    background: #eef2f7;
    color: #24334b;
    font-weight: 800;
    white-space: nowrap;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.status::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.st-blue {
    background: #ebf2ff;
    color: #2c5fe2;
}

.st-orange {
    background: #fff3dc;
    color: #a56600;
}

.st-green {
    background: #eaf8f2;
    color: #14865c;
}

.st-red {
    background: #fff0f2;
    color: #c83d4b;
}

.st-gray {
    background: #f0f2f5;
    color: #68758a;
}

.pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 13px 15px;
    border-top: 1px solid #edf1f5;
}

.page-link {
    color: var(--app-primary);
    font-size: 10px;
}

/* Dashboard KPI Kartları */
.metric-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 16px;
}

.metric-card::after {
    position: absolute;
    right: -18px;
    bottom: -24px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f2f6ff;
    content: "";
}

.metric-label {
    color: var(--app-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.metric-value {
    margin-top: 5px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.metric-foot {
    margin-top: 7px;
    color: var(--app-muted);
    font-size: 9px;
}

.metric-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 16px;
}

.metric-icon.green {
    background: #eaf9f3;
    color: var(--app-success);
}

.metric-icon.orange {
    background: #fff5df;
    color: var(--app-warning);
}

.metric-icon.red {
    background: #fff0f2;
    color: var(--app-danger);
}

/* Atölye Akış Tahtası */
.service-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.board-col {
    min-height: 180px;
    padding: 10px;
    border: 1px solid #edf1f5;
    border-radius: 12px;
    background: #f8fafc;
}

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: 800;
}

.board-count {
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 7px;
    background: #eaf0fa;
    color: #637089;
    font-size: 8px;
}

.job-card {
    display: block;
    margin-bottom: 7px;
    padding: 10px;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    background: #fff;
    color: #40506a;
    box-shadow: 0 4px 14px rgba(20, 35, 58, 0.035);
}

.job-card:hover {
    border-color: #cbd9f4;
    color: #40506a;
}

.job-card:last-child {
    margin-bottom: 0;
}

.job-title {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 800;
}

.job-meta {
    margin-top: 2px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.job-owner {
    color: #66758b;
    font-size: 8px;
}

/* Zaman Akışı ve Özet Listeleri */
.timeline {
    position: relative;
    padding-left: 18px;
}

.timeline::before {
    position: absolute;
    top: 4px;
    bottom: 5px;
    left: 5px;
    width: 2px;
    background: #edf1f5;
    content: "";
}

.timeline-item {
    position: relative;
    display: block;
    padding: 0 0 14px 11px;
    color: #40506a;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    top: 4px;
    left: -17px;
    width: 10px;
    height: 10px;
    border: 3px solid var(--app-primary);
    border-radius: 50%;
    background: #fff;
}

.timeline-time {
    color: #8794a7;
    font-size: 8px;
    font-weight: 800;
}

.timeline-title {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
}

.timeline-meta {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}

.summary-item:last-child {
    border-bottom: 0;
}

.summary-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.summary-copy {
    min-width: 0;
}

.summary-copy strong,
.summary-copy small {
    display: block;
}

.summary-copy strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-copy small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

.summary-amount {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.finance-box {
    padding: 15px;
    border-radius: 13px;
    background: #142037;
    color: #fff;
}

.finance-label {
    color: #a9b7cd;
    font-size: 8px;
}

.finance-value {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.finance-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.finance-row strong {
    display: block;
    margin-top: 2px;
    font-size: 10px;
}

/* Detay Ekranı Bilgi Grupları */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.detail-item {
    padding: 11px;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    background: #fbfcfe;
}

.detail-item small,
.detail-item strong {
    display: block;
}

.detail-item small {
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.detail-item strong {
    margin-top: 4px;
    font-size: 11px;
}

.totals-box {
    min-width: min(100%, 320px);
    margin-left: auto;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 0;
    color: var(--app-muted);
    font-size: 10px;
}

.totals-row.total {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid #e6ebf1;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 800;
}

/* Boş Durumlar */
.empty-state {
    padding: 42px 20px;
    text-align: center;
}

.empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 14px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 21px;
}

.empty-state h1,
.empty-state h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.empty-state p {
    max-width: 470px;
    margin: 7px auto 14px;
    color: var(--app-muted);
    font-size: 10px;
}

/* Ortak Uygulama Kartı ve Filtreleri */
.app-card {
    padding: 17px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-card);
    box-shadow: var(--app-shadow);
}

.filter-bar {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
}

.narrow-form {
    max-width: 760px;
}

.card-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card-section-heading h2,
.form-section h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.card-section-heading p {
    margin: 3px 0 0;
    color: var(--app-muted);
    font-size: 9px;
}

.card-section-heading > a {
    color: var(--app-primary);
    font-size: 10px;
    font-weight: 700;
}

/* Ortak Tablo İçerik Hiyerarşisi */
.app-table td strong,
.app-table td small {
    display: block;
}

.app-table td small {
    max-width: 300px;
    margin-top: 2px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table tfoot td {
    border-top: 2px solid #e7ebf1;
}

/* İşlem Durumu Rozetleri */
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.st-blue {
    background: #eaf1ff;
    color: #1957bd;
}

.st-green {
    background: #e8f8f1;
    color: #117653;
}

.st-orange {
    background: #fff4dc;
    color: #a66200;
}

.st-red {
    background: #ffebee;
    color: #b52d40;
}

.st-gray {
    background: #eef1f5;
    color: #657286;
}

/* KPI Kartları */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card {
    position: relative;
    min-height: 112px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.kpi-card span,
.kpi-card strong {
    display: block;
}

.kpi-card span {
    color: var(--app-muted);
    font-size: 9px;
    font-weight: 700;
}

.kpi-card strong {
    margin-top: 8px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.kpi-card > i {
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: #d7e3fa;
    font-size: 30px;
}

/* Detay Sayfaları ve İşlem Şeritleri */
.action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.action-strip form {
    margin: 0;
}

.detail-grid > div {
    padding: 11px;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    background: #fbfcfe;
}

.detail-grid > div span,
.detail-grid > div strong,
.detail-grid > div small {
    display: block;
}

.detail-grid > div span {
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.detail-grid > div strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    font-size: 11px;
}

.detail-grid > div small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 9px;
}

.note-block {
    margin-top: 12px;
    padding: 12px;
    border-left: 3px solid var(--app-primary);
    border-radius: 0 9px 9px 0;
    background: #f7f9fc;
}

.note-block span {
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.note-block p {
    margin: 4px 0 0;
    font-size: 10px;
}

.inline-form-panel {
    padding: 12px;
    border: 1px dashed #ccd6e4;
    border-radius: 11px;
    background: #fafcff;
}

/* Durum Geçmişi ve Fotoğraf Alanları */
.timeline-list .timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f5;
}

.timeline-list .timeline-item:last-child {
    border-bottom: 0;
}

.timeline-list .timeline-item > span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-top: 4px;
    border: 2px solid var(--app-primary);
    border-radius: 50%;
}

.timeline-list strong,
.timeline-list small {
    display: block;
}

.timeline-list small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

.timeline-list p {
    margin: 4px 0 0;
    font-size: 9px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 9px;
    object-fit: cover;
}

.empty-state > i {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 14px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 21px;
}

.empty-state.compact {
    padding: 22px 12px;
}

.empty-state.compact > i {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

/* Ayar ve Yetki Form Bileşenleri */
.check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.check-card,
.permission-row,
.setting-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    background: #fbfcfe;
}

.check-card strong,
.check-card small,
.permission-row strong,
.permission-row small {
    display: block;
}

.check-card small,
.permission-row small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

.permission-group {
    height: 100%;
    padding: 12px;
    border: 1px solid #e7ebf1;
    border-radius: 11px;
}

.permission-group h2 {
    margin: 0 0 9px;
    font-size: 11px;
    font-weight: 800;
}

.permission-row {
    margin-bottom: 7px;
}

.setting-toggle {
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-list {
    display: grid;
    gap: 7px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    color: var(--app-text);
}

.notification-item.unread {
    border-color: #c9d9f7;
    background: #f4f8ff;
}

.notification-item strong,
.notification-item small {
    display: block;
}

.notification-item small,
.notification-item time {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

/* Program Rehberi ve Profil */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.guide-card {
    position: relative;
    min-height: 190px;
    padding: 17px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: #fff;
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

.guide-card > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 17px;
}

.guide-card h2 {
    margin: 14px 0 5px;
    font-size: 13px;
    font-weight: 800;
}

.guide-card p {
    min-height: 42px;
    margin: 0 0 12px;
    color: var(--app-muted);
    font-size: 9px;
}

.guide-card strong {
    color: var(--app-primary);
    font-size: 9px;
}

.guide-number {
    position: absolute;
    top: 14px;
    right: 15px;
    color: #d6deea;
    font-size: 22px;
    font-weight: 800;
}

.profile-summary {
    padding: 6px 0 18px;
    text-align: center;
}

.profile-avatar {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 10px;
    place-items: center;
    border-radius: 18px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 27px;
}

.profile-summary h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.profile-summary p {
    margin: 3px 0 0;
    color: var(--app-muted);
    font-size: 9px;
}

.decision-summary h3 {
    margin: 16px 0 4px;
    font-size: 14px;
    font-weight: 800;
}

.decision-summary p {
    color: var(--app-muted);
    font-size: 9px;
}

/* Giriş Ekranı */
.guest-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 20px;
    background: #eef3fa;
}

.guest-shell {
    width: min(100%, 430px);
}

.login-card {
    padding: 28px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(26, 41, 66, 0.09);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-copy {
    margin-block: 26px 20px;
}

.login-copy h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.login-copy p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 10px;
}

/* Hazır Yönetici Bilgilerini Giriş Formundan Ayrı ve Okunaklı Göster */
.demo-login-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid rgba(21, 94, 239, 0.2);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(21, 94, 239, 0.08), rgba(255, 255, 255, 0.96));
}

/* Demo Yönetici Kartının Başlık ve İkon Hiyerarşisini Düzenle */
.demo-login-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-login-heading > div {
    display: flex;
    flex-direction: column;
}

.demo-login-heading strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 800;
}

.demo-login-heading small {
    color: var(--app-muted);
    font-size: 11px;
}

.demo-login-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: var(--app-primary);
    color: #fff;
}

/* E-posta ve Parolayı Dar Ekranda Taşmadan İki Satırda Göster */
.demo-login-credentials {
    display: grid;
    gap: 8px;
}

.demo-login-credentials > div {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.demo-login-credentials span {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
}

.demo-login-credentials code {
    overflow-wrap: anywhere;
    color: #173b78;
    font-size: 12px;
    font-weight: 700;
}

/* Randevu Özet Kartları */
.appointment-summary-grid,
.work-order-metrics,
.work-order-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.appointment-summary-card,
.work-order-metrics article,
.work-order-detail-metrics article {
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: center;
    padding: 17px 19px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #fff;
}

.appointment-summary-card span,
.work-order-metrics article span,
.work-order-detail-metrics article span {
    color: var(--app-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.appointment-summary-card strong,
.work-order-metrics article strong,
.work-order-detail-metrics article strong {
    margin-block: 4px;
    color: var(--app-heading);
    font-size: 23px;
    line-height: 1.15;
}

.appointment-summary-card small,
.work-order-metrics article small,
.work-order-detail-metrics article small {
    color: var(--app-muted);
    font-size: 9px;
}

.metric-danger {
    border-color: #fecaca !important;
    background: #fff7f7 !important;
}

.metric-danger strong,
.metric-danger small {
    color: #b42318 !important;
}

/* Aylık Randevu Takvimi */
.appointment-calendar-card {
    padding: 0;
    overflow: hidden;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px;
    border-bottom: 1px solid var(--app-border);
}

.calendar-toolbar h2 {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 800;
}

.section-kicker {
    color: var(--app-primary);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.calendar-navigation {
    display: flex;
    gap: 5px;
}

.appointment-calendar-scroll {
    overflow-x: auto;
}

.appointment-calendar {
    display: grid;
    min-width: 920px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--app-border);
    gap: 1px;
}

.calendar-weekday {
    padding: 9px 8px;
    background: #f7f9fc;
    color: #728096;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-day {
    min-height: 126px;
    padding: 7px;
    background: #fff;
}

.calendar-day.outside-month {
    background: #fafbfc;
    color: #a7b0bd;
}

.calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--app-primary);
}

.calendar-day-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
}

.calendar-day-heading a {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 6px;
    color: var(--app-muted);
}

.calendar-day-heading a:hover {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.calendar-events {
    display: grid;
    gap: 4px;
}

.calendar-event {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 5px;
    padding: 5px 6px;
    overflow: hidden;
    border-left: 3px solid #6b7a90;
    border-radius: 6px;
    background: #f3f6fa;
    color: #37445a;
    font-size: 8px;
}

.calendar-event span {
    color: inherit;
    font-weight: 800;
}

.calendar-event strong,
.calendar-event small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event small {
    grid-column: 1 / -1;
    opacity: 0.78;
}

.calendar-event.success,
.calendar-event.st-green,
.calendar-legend i.success,
.calendar-legend i.st-green {
    border-color: #16a34a;
    background: #ecfdf3;
    color: #166534;
}

.calendar-event.warning,
.calendar-event.st-orange,
.calendar-legend i.warning,
.calendar-legend i.st-orange {
    border-color: #d97706;
    background: #fffbeb;
    color: #92400e;
}

.calendar-event.danger,
.calendar-event.st-red,
.calendar-legend i.danger,
.calendar-legend i.st-red {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.calendar-event.primary,
.calendar-event.st-blue,
.calendar-legend i.primary,
.calendar-legend i.st-blue {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--app-border);
    background: #fbfcfe;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 700;
}

.calendar-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6dde7;
}

/* İş Emri Risk ve Yük Panelleri */
.risk-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.risk-filter {
    display: grid;
    min-height: 83px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
}

.risk-filter:hover,
.risk-filter.active {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.risk-filter i {
    font-size: 16px;
}

.risk-filter span {
    font-size: 9px;
    font-weight: 700;
}

.risk-filter strong {
    font-size: 19px;
}

.technician-load-list {
    display: grid;
    gap: 5px;
}

.technician-load-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f7f9fc;
    color: var(--app-text);
    font-size: 9px;
}

.technician-load-list a:hover {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.technician-load-list small {
    grid-column: 1 / -1;
    color: #b42318;
}

.status-filter-strip {
    display: flex;
    gap: 5px;
    padding-bottom: 3px;
    overflow-x: auto;
}

.status-filter-strip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: #fff;
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.status-filter-strip a.active,
.status-filter-strip a:hover {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #fff;
}

.status-filter-strip span {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgba(117, 130, 151, 0.12);
}

.work-order-table td > span:not(.status-pill):not(.plate) {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.priority-badge,
.line-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0f3f8;
    color: #4f5f77;
    font-size: 8px;
    font-weight: 800;
}

/* İş Emri Detay Süreci */
.work-order-stage-card {
    padding-bottom: 14px;
}

.work-order-stages {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
}

.work-order-stage {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #98a3b3;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

.work-order-stage::before {
    position: absolute;
    z-index: 0;
    top: 10px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: #e3e8ef;
    content: "";
}

.work-order-stage:first-child::before {
    display: none;
}

.work-order-stage i {
    z-index: 1;
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #eef1f5;
}

.work-order-stage.completed,
.work-order-stage.active {
    color: var(--app-primary);
}

.work-order-stage.completed::before,
.work-order-stage.active::before,
.work-order-stage.completed i,
.work-order-stage.active i {
    background: var(--app-primary);
    color: #fff;
}

.work-order-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-order-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.work-order-totals span {
    display: flex;
    min-width: 120px;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f7f9fc;
    color: var(--app-muted);
    font-size: 8px;
}

.work-order-totals strong {
    margin-top: 2px;
    color: var(--app-heading);
    font-size: 11px;
}

.acceptance-check-list,
.linked-document-list {
    display: grid;
    gap: 7px;
}

.acceptance-check-list > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #f7f9fc;
    color: var(--app-muted);
    font-size: 9px;
}

.acceptance-check-list > div.completed {
    background: #ecfdf3;
    color: #166534;
}

.linked-document-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
}

.linked-document-list a:hover {
    border-color: var(--app-primary);
}

.linked-document-list span,
.linked-document-list small {
    display: block;
}

.linked-document-list small,
.linked-document-list em {
    color: var(--app-muted);
    font-size: 8px;
    font-style: normal;
}

.sale-summary > span,
.sale-summary dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.sale-summary > a {
    display: block;
    margin: 3px 0 12px;
    font-size: 16px;
    font-weight: 800;
}

.sale-summary dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.sale-summary dt,
.sale-summary dd,
.sale-summary > span {
    margin: 0;
    font-size: 9px;
}

/* Satış ve Alış Faturası Çalışma Alanı */
.invoice-workspace {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.invoice-workspace > * {
    min-width: 0;
}

.invoice-header-card {
    border-top: 3px solid var(--app-primary);
}

.invoice-state {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quick-supplier-panel {
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.quick-supplier-panel.is-disabled {
    display: none;
}

.quick-supplier-panel h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
}

.invoice-product-search {
    width: 230px;
}

.invoice-lines-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    overflow-x: auto;
}

.invoice-lines {
    min-width: 1120px;
}

.invoice-lines th:nth-child(1),
.invoice-lines td:nth-child(1) {
    min-width: 220px;
}

.invoice-lines th:nth-child(2),
.invoice-lines td:nth-child(2) {
    min-width: 190px;
}

.invoice-lines th:nth-child(n+4):nth-child(-n+7),
.invoice-lines td:nth-child(n+4):nth-child(-n+7) {
    width: 105px;
}

/* Ortak Fatura Kalem Tablosunu Bütün Belgelerde Aynı Ölçüde Tut */
.invoice-lines-table {
    min-width: 1040px;
}

.invoice-lines-table th:nth-child(1),
.invoice-lines-table td:nth-child(1) {
    min-width: 260px;
}

.invoice-lines-table th:nth-child(2),
.invoice-lines-table td:nth-child(2) {
    min-width: 220px;
}

.invoice-lines-table th:nth-child(n+3):nth-child(-n+6),
.invoice-lines-table td:nth-child(n+3):nth-child(-n+6) {
    width: 115px;
}

.invoice-lines-table th:nth-child(7),
.invoice-lines-table td:nth-child(7) {
    width: 130px;
    white-space: nowrap;
}

.invoice-lines-table th:last-child,
.invoice-lines-table td:last-child {
    width: 52px;
    text-align: right;
}

/* Son Kalem Satırındaki Kilitli Silme İşlemini Görsel Olarak Açıkla */
.invoice-lines-editor [data-remove-invoice-line]:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.invoice-line-unit {
    display: inline-flex;
    min-width: 52px;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f2f5f9;
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 800;
}

.invoice-line-total {
    display: inline-block;
    min-width: 82px;
    color: var(--app-heading);
}

.invoice-totals-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-border);
}

.invoice-totals-panel > div {
    display: flex;
    min-width: 135px;
    flex-direction: column;
    padding: 10px 12px;
    background: #fff;
}

.invoice-totals-panel span {
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 700;
}

.invoice-totals-panel strong {
    margin-top: 2px;
    color: var(--app-heading);
    font-size: 12px;
}

.invoice-totals-panel .grand-total {
    min-width: 175px;
    background: var(--app-primary);
}

.invoice-totals-panel .grand-total span,
.invoice-totals-panel .grand-total strong {
    color: #fff;
}

.invoice-totals-panel.static {
    border: 0;
}

/* Tablet Düzeni */
@media (max-width: 1199.98px) {
    .service-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-search {
        max-width: none;
    }

    .kpi-grid,
    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointment-summary-grid,
    .work-order-metrics,
    .work-order-detail-metrics,
    .risk-filter-grid,
    .work-order-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-order-stages {
        min-width: 780px;
    }

    .work-order-stage-card {
        overflow-x: auto;
    }
}

/* Mobil Düzeni */
@media (max-width: 767.98px) {
    .app-toolbar {
        height: 58px;
    }

    .app-brand-text {
        display: none;
    }

    .app-search {
        min-width: 0;
    }

    .app-search .form-control {
        padding-right: 10px;
        font-size: 10px;
    }

    .toolbar-actions {
        gap: 5px;
    }

    .page-wrap {
        padding-top: 15px;
    }

    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading .btn {
        align-self: flex-start;
    }

    .page-heading h1 {
        font-size: 20px;
    }

    .service-board,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid,
    .guide-grid,
    .check-grid {
        grid-template-columns: 1fr;
    }

    .appointment-summary-grid,
    .work-order-metrics,
    .work-order-detail-metrics,
    .risk-filter-grid,
    .work-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .calendar-toolbar,
    .card-section-heading:has(.invoice-product-search) {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .invoice-product-search {
        width: 100%;
    }

    .invoice-totals-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-totals-panel > div,
    .invoice-totals-panel .grand-total {
        min-width: 0;
    }

    .invoice-totals-panel .grand-total {
        grid-column: 1 / -1;
    }

    /* Ortak Editördeki Üçüncü Ara Toplamı Boş Hücre Bırakmadan Göster */
    .invoice-lines-editor .invoice-totals-panel > div:nth-last-child(2) {
        grid-column: 1 / -1;
    }

    .kpi-card {
        min-height: 96px;
    }

    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-row .btn,
    .filter-row .form-control,
    .filter-row .form-select {
        width: 100%;
    }

    .finance-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        justify-content: stretch;
    }

    .form-actions .btn {
        flex: 1;
    }
}

/* Geniş Ekran Dropdown Hover Desteği */
@media (min-width: 1200px) {
    .module-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Select2 Alanlarını Bootstrap Form Görünümüyle Eşleştir */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #d9e0e8;
    border-radius: 8px;
    background: #fff;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 5px 34px 5px 12px;
    color: #344258;
    font-size: 12px;
    line-height: 26px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    top: 6px;
    right: 7px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(20, 102, 204, 0.12);
}

.select2-dropdown {
    z-index: 2055;
    overflow: hidden;
    border-color: #d9e0e8;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(20, 34, 57, 0.13);
}

/* Taşma Alanlarından Bağımsız Global Select2 Portalı */
.select2-dropdown-portal {
    position: fixed;
    z-index: 4090;
    max-width: calc(100vw - 16px);
    background: #fff;
}

/* Portal İçindeki Arama Sonuçlarını Görünür Yüksekliğe Sınırla */
.select2-dropdown-portal .select2-results__options {
    max-height: min(300px, calc(100vh - 150px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.select2-results__option {
    padding: 8px 10px;
    font-size: 11px;
}

/* Randevu Takvimi Etkileşimlerini Belirginleştir */
.calendar-add-link {
    width: auto !important;
    padding-inline: 6px;
    gap: 3px;
    text-decoration: none;
}

.calendar-event {
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left;
    cursor: pointer;
}

.calendar-event[draggable="true"] {
    cursor: grab;
}

.calendar-event.is-dragging {
    opacity: 0.45;
}

.calendar-day.is-drop-target {
    background: #eaf4ff;
    box-shadow: inset 0 0 0 2px var(--app-primary);
}

.appointment-list-card {
    padding: 18px;
}

.appointment-list-card .table-responsive {
    margin-inline: -18px;
}

.appointment-list-card .card-section-heading {
    margin-bottom: 12px;
}

/* İş Emri Notlarını Düzenli Aktivite Kartları Olarak Göster */
.work-order-note-list {
    display: grid;
    gap: 10px;
}

.work-order-note {
    padding: 13px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fbfcfe;
}

.work-order-note > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.work-order-note small {
    color: var(--app-muted);
    font-size: 9px;
}

.work-order-note p {
    margin: 9px 0 0;
    color: #45536a;
}

.work-order-note summary {
    margin-top: 9px;
    color: var(--app-primary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* Çok Satırlı Fatura Düzenleyicisini Yatay Kullanıma Hazırla */
.invoice-editor {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

/* Ürün Arama ve Barkod Okuyucu Alanlarını Düzenle */
.product-search-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.product-search-tools .input-group {
    width: min(360px, 100%);
}

.product-search-field {
    position: relative;
    width: min(460px, 100%);
}

.product-search-field .input-group {
    width: 100%;
}

.product-search-status {
    min-height: 16px;
    color: var(--app-muted);
    font-size: 9px;
}

/* Ürün Arama Sonuçlarını Alan Dışına Taşmadan Seçilebilir Göster */
.product-search-results {
    position: absolute;
    z-index: 2080;
    top: calc(100% - 14px);
    left: 0;
    display: none;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.product-search-results.is-open {
    display: block;
}

.product-search-result {
    display: grid;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    color: var(--app-text);
    text-align: left;
}

.product-search-result:hover,
.product-search-result:focus {
    outline: 0;
    background: #eef8f7;
}

.product-search-result strong,
.product-search-result small {
    display: block;
}

.product-search-result small,
.product-search-empty {
    color: var(--app-muted);
    font-size: 10px;
}

.product-search-empty {
    padding: 14px;
}

.invoice-editor .invoice-lines {
    min-width: 1080px;
}

.invoice-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--app-border);
    background: #f8fafc;
}

.invoice-live-total {
    display: grid;
    margin-left: auto;
    text-align: right;
}

.invoice-live-total span {
    color: var(--app-muted);
    font-size: 9px;
}

/* Gelişmiş Menü Yönetimi Satırlarını Sürüklenebilir Yap */
.menu-manager-list {
    display: grid;
}

.menu-manager-row {
    display: grid;
    grid-template-columns: 34px 42px minmax(150px, 0.7fr) minmax(190px, 1fr) minmax(180px, 0.8fr) 90px;
    align-items: end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
}

.menu-manager-row.is-dragging {
    opacity: 0.4;
}

.menu-manager-row.is-drag-over {
    box-shadow: inset 0 2px 0 var(--app-primary);
}

.menu-drag-handle {
    align-self: center;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #9aa6b6;
    cursor: grab;
}

.menu-icon-preview {
    display: grid;
    width: 38px;
    height: 38px;
    align-self: center;
    place-items: center;
    border-radius: 9px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 17px;
}

.menu-code {
    display: grid;
    align-self: center;
}

.menu-code small {
    color: var(--app-muted);
}

.menu-active-switch {
    align-self: center;
}

/* Finans Özetini Altı Net Göstergeyle Düzenle */
.finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.finance-kpi-grid article {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: #fff;
}

.finance-kpi-grid span,
.finance-kpi-grid small {
    color: var(--app-muted);
    font-size: 9px;
}

.finance-kpi-grid strong {
    font-size: 19px;
}

/* Ayarlar Alt Menüsünü Sağ Kenar İçinde Tut */
body {
    overflow-x: clip;
}

.module-nav > .dropdown:last-child .app-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: min(280px, calc(100vw - 24px));
}

/* Araç Kataloğunu Marka Model ve Alt Model Sütunlarıyla Düzenle */
.catalog-browser {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(270px, 0.9fr) minmax(360px, 1.3fr);
    gap: 14px;
    align-items: start;
}

.catalog-browser-column {
    min-width: 0;
    padding: 16px;
}

.catalog-inline-form {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface-soft);
}

.catalog-choice-list,
.catalog-variant-list {
    display: grid;
    gap: 7px;
    max-height: 590px;
    overflow-y: auto;
    padding-right: 3px;
}

.catalog-choice {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
}

.catalog-choice > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    color: inherit;
    text-decoration: none;
}

.catalog-choice > a span,
.catalog-variant > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.catalog-choice small,
.catalog-variant small {
    color: var(--app-muted);
    font-size: 10px;
}

.catalog-choice.is-selected {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 1px var(--app-primary);
}

.catalog-choice.is-selected > a {
    background: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--app-primary);
}

.catalog-choice-actions {
    display: flex;
    gap: 10px;
    padding: 0 12px 8px;
    font-size: 10px;
}

.catalog-choice-actions form,
.catalog-variant form {
    margin: 0;
}

.catalog-choice-actions button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bs-danger);
    font: inherit;
}

.catalog-variant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
}

/* V1 Finans İşlem Seçimini Üç Belirgin Kartla Göster */
.finance-operation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.finance-operation-card {
    cursor: pointer;
}

.finance-operation-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.finance-operation-card > span {
    display: grid;
    min-height: 128px;
    place-content: center;
    gap: 5px;
    padding: 18px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.finance-operation-card i {
    margin-bottom: 4px;
    font-size: 28px;
}

.finance-operation-card small {
    color: var(--app-muted);
}

.finance-operation-card input:checked + span {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.12);
    transform: translateY(-1px);
}

.finance-quick-form {
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface-soft);
}

/* Yeni Yönetim Panellerini Dar Ekranda Tek Kolona İndir */
@media (max-width: 991.98px) {
    .catalog-browser {
        grid-template-columns: 1fr;
    }

    .catalog-choice-list,
    .catalog-variant-list {
        max-height: 420px;
    }

    .finance-operation-grid {
        grid-template-columns: 1fr;
    }

    .finance-operation-card > span {
        min-height: 100px;
    }

    .menu-manager-row {
        grid-template-columns: 34px 42px 1fr;
    }

    .menu-manager-row > div:nth-of-type(n + 3),
    .menu-active-switch {
        grid-column: 3;
    }

    .finance-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-live-total {
        margin-left: 0;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .finance-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Uygulama Genelinde Metinleri Daha Okunaklı Bir Ölçeğe Yükselt */
body {
    font-size: 15px;
    line-height: 1.55;
}

.app-brand-text strong,
.login-brand strong {
    font-size: 15px;
}

.branch-form .form-select,
.single-branch,
.toolbar-btn,
.module-link,
.app-dropdown .dropdown-item,
.mobile-module-grid a {
    font-size: 13px;
}

.app-search .form-control {
    font-size: 14px;
}

.user-copy strong {
    font-size: 13px;
}

.user-copy small,
.app-brand-text small,
.login-brand small,
.dropdown-header {
    font-size: 11px;
}

/* Sayfa ve Kart Başlıklarının Görsel Hiyerarşisini Belirginleştir */
.page-heading h1 {
    font-size: 26px;
}

.page-heading p {
    font-size: 14px;
    line-height: 1.55;
}

.panel-title,
.card-section-heading h2,
.form-section h2 {
    font-size: 16px;
}

.panel-sub,
.form-section-title {
    font-size: 13px;
}

.section-kicker {
    font-size: 11px;
}

.card-section-heading p,
.card-section-heading > a {
    font-size: 13px;
}

/* Form Alanı Etiketlerini Girdi Metinleriyle Birlikte Büyüt */
.form-label {
    font-size: 13px;
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container .select2-results__option,
.select2-container .select2-search__field {
    font-size: 14px;
}

.btn {
    font-size: 13px;
}

.btn-sm {
    font-size: 12px;
}

.form-text,
.app-alert,
.alert {
    font-size: 13px;
}

/* Tablo ve Durum Bilgilerini Uzun Listelerde Rahat Okunur Tut */
.table th {
    font-size: 12px;
}

.table td {
    font-size: 13px;
}

.app-table td small,
main small {
    font-size: 12px !important;
    line-height: 1.45;
}

.status,
.status-pill {
    font-size: 11px;
}

.page-link,
.pagination {
    font-size: 12px;
}

/* Gösterge Kartlarındaki Etiket ve Değerleri Birbirinden Ayır */
.metric-card > span,
.metric-card > strong,
.metric-card > small {
    position: relative;
    z-index: 1;
    display: block;
}

.metric-card > strong {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.2;
}

.metric-card > small {
    margin-top: 5px;
}

/* Dashboard ve Akış Kartlarındaki İkincil Metinleri de Aynı Okunabilirlikte Tut */
.metric-label,
.metric-foot,
.board-head,
.job-meta,
.timeline-time,
.timeline-meta {
    font-size: 12px;
}

.job-title,
.timeline-title {
    font-size: 13px;
}

.job-owner,
.board-count {
    font-size: 11px;
}

/* Liste Ekranlarının İşleme Özel Özet Kartlarını Düzenle */
.operation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Özet Kartının İç Yerleşimini ve Yüzeyini Oluştur */
.operation-summary-card {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: var(--app-card);
    box-shadow: var(--app-shadow);
}

/* Özet Kartının Sol Renk Vurgusunu Göster */
.operation-summary-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--summary-color, var(--app-primary));
    content: "";
}

/* Özet İkonunu Kare Bir Uygulama Göstergesi Olarak Sun */
.operation-summary-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--summary-color, var(--app-primary)) 11%, white);
    color: var(--summary-color, var(--app-primary));
    font-size: 19px;
}

/* Özet Metinlerini Taşmadan Dikey Hizada Tut */
.operation-summary-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

/* Özet Etiketini İkincil Bilgi Olarak Göster */
.operation-summary-copy > span,
.operation-summary-copy > small {
    overflow: hidden;
    color: var(--app-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Özet Değerini Farklı Ekranlarda Okunur Tut */
.operation-summary-copy > strong {
    overflow-wrap: anywhere;
    color: var(--app-text);
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.2;
}

/* Özet Kartlarına Anlamsal Renk Tonlarını Ata */
.operation-summary-card.tone-success {
    --summary-color: var(--app-success);
}

.operation-summary-card.tone-warning {
    --summary-color: var(--app-warning);
}

.operation-summary-card.tone-danger {
    --summary-color: var(--app-danger);
}

.operation-summary-card.tone-info {
    --summary-color: #2879b9;
}

/* Sayfalama Alanında Sonuç Sayısını ve Bağlantıları Ayır */
.pagination-wrap {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-card);
}

/* Sayfalama Sonuç Aralığını Okunur Bir Bilgi Satırı Yap */
.pagination-summary {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Tablet Ekranda Özet Kartlarını İki Sütuna İndir */
@media (max-width: 991.98px) {
    .operation-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Dar Mobil Ekranda Özet ve Sayfalamayı Dokunmatik Kullanıma Uyarla */
@media (max-width: 575.98px) {
    .operation-summary-grid {
        gap: 9px;
    }

    .operation-summary-card {
        align-items: flex-start;
        gap: 9px;
        padding: 12px 10px 12px 13px;
    }

    .operation-summary-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
        font-size: 16px;
    }

    .operation-summary-copy > strong {
        font-size: 16px;
    }

    .operation-summary-copy > small {
        display: none;
    }

    .pagination-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-wrap .pagination {
        justify-content: space-between;
    }
}

/* V1 Uyumlu Menü Yönetimini Form ve Hiyerarşi Sütunlarına Ayır */
.menu-management-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.62fr) minmax(540px, 1.38fr);
    gap: 16px;
    align-items: start;
}

/* Yeni Menü Formunu Kaydırmada Görünür Tut */
.menu-create-card {
    position: sticky;
    top: 142px;
    padding: 18px;
}

/* Yeni Menü Formu Alanlarını Dikey Aralıkla Düzenle */
.menu-create-card .form-stack {
    display: grid;
    gap: 12px;
}

/* Hiyerarşi Kartının İç Taşmalarını Sınırla */
.menu-hierarchy-card {
    min-width: 0;
    padding: 18px;
}

/* Kök Menü Bırakma Alanını Sürüklemede Belirginleştir */
.menu-root-drop,
.menu-child-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border: 1px dashed #bfd0e6;
    border-radius: 9px;
    background: #f7faff;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Ana Menü Hedefini Listenin Üstünde Ayır */
.menu-root-drop {
    margin-bottom: 9px;
}

/* Alt Menü Bırakma Alanını Normal Durumda Kompakt Tut */
.menu-child-drop {
    min-height: 24px;
    border-color: transparent;
    background: transparent;
    font-size: 10px;
}

/* Etkin Bırakma Hedefini Mavi Yüzeyle Göster */
.menu-root-drop.is-drag-over,
.menu-child-drop.is-drag-over {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

/* Menü Ağacındaki Kardeş Kayıtları Dikey Sırala */
.menu-tree-list,
.menu-tree-children {
    display: grid;
    gap: 7px;
}

/* Tek Menü Dalını Kart Görünümünde Sun */
.menu-tree-item {
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Sürüklenen Menü Dalını Geçici Olarak Soluklaştır */
.menu-tree-item.is-dragging {
    opacity: 0.45;
}

/* Sıralama Hedefindeki Satırı Belirginleştir */
.menu-tree-row.is-drag-over {
    box-shadow: inset 0 2px 0 var(--app-primary);
}

/* Menü Satırının Başlık ve İşlemlerini Hizala */
.menu-tree-row {
    display: grid;
    grid-template-columns: 30px 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
}

/* Menü Başlık ve Teknik Bilgilerini Taşmadan Göster */
.menu-tree-main {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.menu-tree-main strong,
.menu-tree-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menü Başlığını Satır İçinde Güçlendir */
.menu-tree-main strong {
    font-size: 12px;
}

/* Menü Teknik Bilgisini İkincil Renkte Göster */
.menu-tree-main small {
    color: var(--app-muted);
    font-size: 10px !important;
}

/* Açılan Menü Düzenleyicisini Alan Bazlı Izgaraya Yerleştir */
.menu-tree-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--app-border);
    background: #f8fafc;
}

/* Hidden Düzenleyicinin CSS Grid Tarafından Açılmasını Engelle */
.menu-tree-editor[hidden] {
    display: none !important;
}

/* Menü Aktiflik ve Sistem Bilgisini Alt Satırda Hizala */
.menu-tree-editor .menu-active-switch,
.menu-system-note {
    align-self: center;
    margin: 0;
    color: var(--app-muted);
    font-size: 10px;
}

/* Alt Menüleri Ana Kayda Bağlı Görsel Girintiyle Göster */
.menu-tree-children {
    margin: 0 8px 8px 34px;
    padding-left: 10px;
    border-left: 2px solid #e7edf5;
}

/* Menü Yönetimini Tablet Ekranda Tek Sütuna İndir */
@media (max-width: 991.98px) {
    .menu-management-layout {
        grid-template-columns: 1fr;
    }

    .menu-create-card {
        position: static;
    }
}

/* Menü Ağacını Mobil Dokunmatik Ekrana Uyarla */
@media (max-width: 575.98px) {
    .menu-tree-row {
        grid-template-columns: 30px 36px minmax(0, 1fr);
    }

    .menu-tree-row > .status-pill,
    .menu-tree-row > .btn {
        grid-column: 3;
        justify-self: start;
    }

    .menu-tree-editor {
        grid-template-columns: 1fr;
    }

    .menu-tree-children {
        margin-left: 16px;
        padding-left: 7px;
    }
}

/* Bildirim Sayfasındaki PWA Kontrol Kartını Uygulama Kimliğiyle Düzenle */
.pwa-control-card {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px;
    border-color: #cddcff;
    background: linear-gradient(135deg, #ffffff 0%, #f1f6ff 100%);
}

/* PWA İkonu ve Açıklamasını Yan Yana Göster */
.pwa-control-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}

/* Ana Ekran İkonunu Uygulama Kartında Vurgula */
.pwa-app-icon {
    display: grid;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    place-items: center;
    overflow: hidden;
    border-radius: 17px;
    box-shadow: 0 10px 24px rgba(21, 94, 239, 0.2);
}

.pwa-app-icon img {
    width: 100%;
    height: 100%;
}

/* PWA Kartı Başlık ve Açıklama Aralıklarını Düzenle */
.pwa-control-copy h2 {
    margin: 2px 0 4px;
    font-size: 19px;
}

.pwa-control-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--app-muted);
}

/* PWA İşlem Düğmelerini Satır İçinde Esnek Tut */
.pwa-control-actions {
    display: flex;
    max-width: 520px;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Canlı PWA Durumunu Kartın Tam Genişliğinde Göster */
.pwa-live-status {
    grid-column: 1 / -1;
    padding: 9px 11px;
    border: 1px solid #dce6f5;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
}

/* Android ve iOS Kurulum Kartlarının İç Boşluğunu Tanımla */
.install-guide-card,
.notification-preference-card {
    padding: 18px;
}

/* Kurulum Adımlarını Numaralı ve Rahat Okunur Göster */
.install-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 24px;
    color: #40506a;
    line-height: 1.55;
}

/* Mobil Offcanvas Menü Gruplarını Uygulama Listesi Gibi Göster */
.mobile-menu-groups {
    display: grid;
    gap: 10px;
}

.mobile-menu-group {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: #fff;
}

/* Mobil Ana Menü Satırını Büyük Dokunma Hedefi Yap */
.mobile-menu-parent {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--app-text);
}

.mobile-menu-parent > i:first-child {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 9px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

/* Mobil Alt Menüleri Ana Başlığın Altında Dikey Listele */
.mobile-menu-children {
    display: grid;
    padding: 0 10px 9px 52px;
}

.mobile-menu-children a {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 7px 5px;
    border-top: 1px solid #edf1f5;
    color: #53627a;
    font-size: 12px;
}

.mobile-menu-children a.is-nested {
    padding-left: 18px;
}

/* Mobil Alt Gezinmeyi Yerel Uygulama Sekme Çubuğu Gibi Sabitle */
.mobile-app-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 5px max(5px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(5px, env(safe-area-inset-left));
    border-top: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(24, 38, 61, 0.08);
    backdrop-filter: blur(14px);
}

/* Mobil Alt Gezinme Bağlantılarını İkon ve Etiketle Dikey Hizala */
.mobile-app-bottom a,
.mobile-app-bottom button {
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #758298;
    font-size: 9px;
    font-weight: 700;
}

.mobile-app-bottom i {
    font-size: 19px;
}

.mobile-app-bottom a.active,
.mobile-app-bottom button[aria-expanded="true"] {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

/* Alt Menülerdeki Girintili Bağlantıları Görsel Olarak Ayır */
.app-dropdown .dropdown-item-nested {
    padding-left: 28px;
    color: var(--app-muted);
}

/* Tablet ve Mobilde Sabit Alt Gezinmeye İçerik Payı Bırak */
@media (max-width: 1199.98px) {
    .page-wrap {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }

    .offcanvas-body {
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    /* Dokunmatik Kontrolleri En Az 44 Piksel Yüksek Tut */
    main .btn:not(.btn-sm),
    main .form-control:not(textarea),
    main .form-select,
    .select2-container .select2-selection--single {
        min-height: 44px;
    }
}

/* PWA Kontrol Kartını Dar Ekranda Dikey Akışa Dönüştür */
@media (max-width: 991.98px) {
    .pwa-control-card {
        grid-template-columns: 1fr;
    }

    .pwa-control-actions {
        max-width: none;
        justify-content: flex-start;
    }

    .pwa-live-status {
        grid-column: 1;
    }
}

/* Telefon Ekranında PWA Düğmelerini Tam Genişlikte Göster */
@media (max-width: 575.98px) {
    .pwa-control-card {
        padding: 15px;
    }

    .pwa-control-copy {
        align-items: flex-start;
    }

    .pwa-app-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 14px;
    }

    .pwa-control-copy h2 {
        font-size: 17px;
    }

    .pwa-control-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Geniş Tabloları Sayfa Yerine Kendi Alanında Kaydır */
    .table-responsive {
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* Ana Ekrandan Açılan PWA'da iOS Güvenli Üst Alanını Koru */
@media (display-mode: standalone) {
    .app-toolbar {
        height: calc(64px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .module-bar {
        top: calc(64px + env(safe-area-inset-top));
    }
}

/* Yoğun Bilgi Bileşenlerindeki İkincil Metinleri Okunabilir Tut */
.search-result-copy small,
.search-empty,
.vehicle-owner-card small,
.vehicle-owner-empty span,
.vehicle-owner-person span,
.vehicle-history-link,
.detail-grid > div span,
.detail-grid > div small,
.detail-item small,
.summary-copy small,
.kpi-card span,
.appointment-summary-card span,
.appointment-summary-card small,
.work-order-metrics article span,
.work-order-metrics article small,
.work-order-detail-metrics article span,
.work-order-detail-metrics article small,
.calendar-weekday,
.calendar-day-heading,
.calendar-event,
.calendar-legend span,
.risk-filter span,
.technician-load-list a,
.status-filter-strip a,
.work-order-table td > span:not(.status-pill):not(.plate),
.priority-badge,
.line-type-badge,
.work-order-stage,
.work-order-totals span,
.acceptance-check-list > div,
.linked-document-list small,
.linked-document-list em,
.sale-summary dt,
.sale-summary dd,
.sale-summary > span,
.finance-label,
.finance-kpi-grid span,
.finance-kpi-grid small,
.invoice-live-total span,
.invoice-line-unit,
.invoice-state,
.invoice-totals-panel span,
.product-search-status,
.catalog-choice small,
.catalog-variant small,
.catalog-choice-actions,
.product-search-result small,
.product-search-empty,
.note-block span,
.timeline-list small,
.timeline-list p,
.check-card small,
.permission-row small,
.notification-item small,
.notification-item time,
.guide-card p,
.guide-card strong,
.profile-summary p,
.decision-summary p,
.menu-root-drop,
.menu-child-drop,
.menu-tree-main small,
.menu-tree-editor .menu-active-switch,
.menu-system-note,
.operation-summary-copy > span,
.operation-summary-copy > small,
.pagination-summary,
.pwa-live-status {
    font-size: 12px !important;
    line-height: 1.45;
}

/* Kart İçerikleri ve Kısa Açıklamaları Normal Metin Ölçeğine Getir */
.vehicle-owner-facts strong,
.vehicle-owner-empty strong,
.summary-copy strong,
.detail-grid > div strong,
.detail-item strong,
.empty-state p,
.note-block p,
.permission-group h2,
.finance-row strong,
.summary-amount,
.totals-row,
.work-order-totals strong,
.work-order-note summary,
.quick-supplier-panel h3 {
    font-size: 13px;
    line-height: 1.5;
}

/* Giriş Ekranı Açıklamasını Form Metinleriyle Eşleştir */
.login-copy p {
    font-size: 14px;
    line-height: 1.55;
}

/* Mobil Alt Menü Etiketlerini Dar Alanda Dengeli Tut */
.mobile-menu-children a {
    font-size: 13px;
    line-height: 1.4;
}

.mobile-app-bottom a,
.mobile-app-bottom button {
    font-size: 11px;
    line-height: 1.25;
}