* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin: 0; background: #f5f6f8; color: #1f2937; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: linear-gradient(90deg, #013b7a 0%, #015FC9 100%); color: #fff; flex-wrap: wrap; gap: 8px; box-shadow: 0 2px 12px rgba(1, 95, 201, 0.25); }
.topbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.topbar-nav strong { margin-right: 8px; }
.topbar .link { color: #9bbfe6; padding: 6px 10px; text-decoration: none; border-radius: 6px; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; }
.topbar .link:hover { background: rgba(255,255,255,0.08); color: #dbe8f7; }
.topbar .link.active { background: #FF9D3D; color: #fff; }
.user-box { display: flex; align-items: center; gap: 8px; }
.user-box > span { background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 999px; font-size: 13px; }

.topbar-brand strong { font-size: 15px; white-space: nowrap; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    height: 3px;
    width: 22px;
    background: #fff;
    border-radius: 2px;
}
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}
.nav-drawer-backdrop[hidden] { display: none !important; }
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 88vw);
    background: linear-gradient(180deg, #013b7a 0%, #015FC9 100%);
    color: #fff;
    z-index: 2001;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.nav-drawer[hidden] { display: none !important; }
.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #374151;
}
.nav-drawer-title { font-weight: 700; font-size: 16px; }
.nav-drawer-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 4px;
}
.nav-drawer-links .link {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #e5e7eb !important;
}
.nav-drawer-links .link.active {
    background: #FF9D3D;
    color: #fff !important;
}
.nav-drawer-logout {
    margin-top: 16px;
    padding-top: 16px !important;
    border-top: 1px solid #374151;
    color: #fca5a5 !important;
}
body.nav-drawer-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; flex-shrink: 0; }
    .topbar-nav-desktop { display: none !important; }
    .topbar {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 6px;
    }
    .topbar-brand {
        flex: 1 1 auto;
        min-width: 0;
    }
    .topbar-brand strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 56vw;
    }
    .user-box {
        flex-shrink: 0;
    }
    .header-rates {
        order: 10;
        flex: 1 1 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }
}

/* Compact currency rate ticker inside the topbar (next to the user box) */
.header-rates {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 11px;
    max-width: min(60vw, 720px);
    overflow: hidden;
}
.header-rates-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.header-rates-track::-webkit-scrollbar {
    height: 3px;
}
.header-rates-track::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 2px;
}
.rate-ticker-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFB36A;
    box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.18);
}
.rate-ticker-fresh .rate-ticker-dot {
    background: #86efac;
    box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.18);
}
.rate-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 1.2;
}
.rate-pill:hover {
    background: rgba(148, 163, 184, 0.18);
}
.rate-pill-code {
    font-weight: 800;
    color: #9bbfe6;
}
.rate-pill-val {
    color: #f1f5f9;
    font-weight: 600;
}
/* Hide the verbose "1 USD = " prefix in the pill — keep only "X ₺" for compactness */
.rate-pill-val { font-size: 11px; }
@media (max-width: 980px) {
    .header-rates {
        max-width: 100%;
        order: 99;
        flex: 1 1 100%;
        margin: 4px 0 0 0;
        padding: 4px 8px;
    }
}
@media (max-width: 540px) {
    .rate-pill { padding: 2px 5px; }
}
.container { padding: 16px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }
.card h3 { margin: 0 0 8px 0; font-size: 14px; color: #4b5563; }
.card p { margin: 0; font-size: 22px; font-weight: 700; }
.table-panel, .panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }
.sticky-booking-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.sticky-booking-toolbar .tabs {
    margin-bottom: 8px;
}
.sticky-booking-toolbar .tabs:last-child {
    margin-bottom: 0;
}
.month-tabs { margin-bottom: 0; }
#reservationTable thead th {
    position: sticky;
    top: var(--booking-toolbar-height, 120px);
    z-index: 40;
    background: #f3f4f6;
    font-weight: 700;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { width: auto; min-width: 58px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; color: #000; font-weight: 600; }
.tab.active { background: #015FC9; color: #fff; border-color: #015FC9; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { border: 1px solid #e5e7eb; padding: 4px; text-align: left; }
input, select { width: 100%; padding: 6px; border: 1px solid #d1d5db; border-radius: 4px; }
button { padding: 6px; border-radius: 4px; }
button { background: #015FC9; color: #fff; border: none; cursor: pointer; }
.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; padding: 8px; border-radius: 6px; margin-bottom: 10px; }

/* ============================================================
   LOGIN — Cappadocia Trip Travel
   ============================================================ */
.login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #0f172a;
    color: #1f2937;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
    overflow-x: hidden;
}
.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.login-bg-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.login-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(15, 23, 42, 0.0) 0%, rgba(15, 23, 42, 0.35) 60%, rgba(15, 23, 42, 0.55) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.55) 100%);
}
.login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
    padding: 36px 16px;
}
.login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #f8fafc;
    padding: 36px 32px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.88) 0%, rgba(120, 53, 15, 0.55) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 540px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.brand-mark {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-balloon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #015FC9, #FF9D3D);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(255, 157, 61, 0.45);
}
.brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.brand-sub {
    font-size: 12px;
    color: rgba(248, 250, 252, 0.7);
    margin-top: 2px;
}
.brand-tagline {
    margin-top: 36px;
}
.brand-tagline h2 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.4px;
    background: linear-gradient(90deg, #015FC9, #FF9D3D);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-tagline p {
    margin: 0;
    color: rgba(248, 250, 252, 0.78);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 420px;
}
.brand-points {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 10px;
}
.brand-points li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: rgba(248, 250, 252, 0.85);
}
.brand-points li span {
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9D3D, #FF9D3D);
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.5);
}
.brand-points li::after {
    content: '\2713';
    position: absolute;
    left: 3px;
    top: 4px;
    color: #1e293b;
    font-size: 11px;
    font-weight: 800;
}
.brand-footer {
    margin-top: 28px;
    font-size: 12px;
    color: rgba(248, 250, 252, 0.55);
    letter-spacing: 0.4px;
}
.login-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    align-self: center;
}
.login-card-head { margin-bottom: 22px; }
.brand-mini {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.brand-mini strong { color: #111827; font-weight: 700; font-size: 14px; }
.brand-mini .brand-balloon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.login-card h1 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    letter-spacing: -0.4px;
}
.login-sub {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 14px;
}
.login-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 500;
}
.login-error svg { flex-shrink: 0; color: #dc2626; }
.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.login-field { display: block; }
.login-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.login-input-wrap:focus-within {
    border-color: #015FC9;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(1, 95, 201, 0.15);
}
.login-input-wrap .login-ico {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    pointer-events: none;
}
.login-input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 14px 14px 42px;
    font-size: 15px;
    color: #111827;
    outline: none;
    border-radius: 12px;
}
.login-input-wrap input::placeholder { color: #9ca3af; }
.login-eye {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-eye:hover { color: #111827; background: rgba(0, 0, 0, 0.04); }
.login-eye[aria-pressed="true"] { color: #e07a14; }
.login-submit {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: #015FC9;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.login-submit:disabled { opacity: 0.7; cursor: progress; }
.login-submit.is-loading .login-submit-arrow { display: none; }
.login-submit.is-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loginSpin 0.7s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-foot {
    margin: 18px 0 0;
    text-align: center;
    color: #9ca3af;
    font-size: 12.5px;
}

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
        padding: 18px 12px;
        gap: 16px;
    }
    .login-brand-panel { display: none; }
    .login-card { padding: 28px 22px; max-width: 480px; }
    .brand-mini { display: inline-flex; }
    .login-card h1 { font-size: 22px; }
}

@media (max-width: 460px) {
    .login-card { padding: 22px 18px; border-radius: 18px; }
    .login-input-wrap input { padding: 12px 12px 12px 40px; font-size: 14.5px; }
    .login-submit { padding: 12px 16px; font-size: 14.5px; }
}
.settings-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.inline-form { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 6px; margin-bottom: 10px; }
.inline-form button { width: 100%; }
.inline-edit { display: grid; grid-template-columns: 1fr; gap: 4px; }
.actions-cell { display: flex; gap: 6px; align-items: center; }
.actions-cell form { margin: 0; }
.actions-cell button { width: auto; white-space: nowrap; }
.collection-inputs { display: grid; gap: 8px; min-width: 360px; }
.collection-group { border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; background: #fafafa; }
.collection-group-title { font-size: 11px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.collection-group-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.collection-input-row { display: grid; grid-template-columns: 34px 70px; gap: 4px; align-items: center; }
.collection-input-row span { font-size: 11px; color: #374151; font-weight: 600; }
.collection-input-row input { padding: 4px; font-size: 12px; }

.cell-action-stack {
    vertical-align: middle;
    padding: 8px;
    min-width: 170px;
}
.cell-action-stack-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.cell-action-stack .btn-toggle {
    width: 100%;
    padding: 6px 8px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    border: 1px solid #d1d5db;
}
.cell-action-stack .btn-toggle.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}
.cell-action-stack .status-select {
    width: 100%;
}

#reservationTable tbody tr.row-state-green > td {
    background: #86efac !important;
}
#reservationTable tbody tr.row-state-yellow > td {
    background: #fde047 !important;
}
#reservationTable tbody tr.row-state-both > td {
    background: linear-gradient(180deg, #86efac 0%, #86efac 50%, #fde047 50%, #fde047 100%) !important;
}
#reservationTable tbody tr.row-state-cancelled > td {
    background: #fca5a5 !important;
}
#reservationTable tbody tr.row-state-completed > td {
    background: #9bbfe6 !important;
}
#reservationTable tbody tr.row-state-pending > td {
    background: #FFD4A8 !important;
}
#reservationTable tbody tr.row-state-noshow > td {
    background: #c4b5fd !important;
}
.status-select { width: 100%; min-width: 130px; font-size: 11px; padding: 4px; }

.extra-payment-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}
.extra-payment-cell input { width: 100%; }
.extra-payment-cell select { width: 100%; font-size: 11px; padding: 3px; }
#reservationTable td.calc-extra { font-weight: 600; color: #6d28d9; }

.tab-sep { display: inline-block; width: 2px; align-self: stretch; background: #d1d5db; margin: 2px 6px; }
.tab-special { font-weight: 700; padding: 5px 14px; }
.tab-special.tab-summary { background: #1e293b; color: #fff; border-color: #1e293b; }
.tab-special.tab-summary.active { background: #0f172a; }

#summaryView { padding: 10px 4px; }
.summary-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.summary-header h3 { margin: 0; color: #111827; }
.summary-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.summary-subtab { padding: 6px 14px; border: 1px solid #d1d5db; background: #fff; color: #111827; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
.summary-subtab.active { background: #015FC9; color: #fff; border-color: #015FC9; }
.summary-subtab.sub-completed { border-color: #6ee7b7; color: #065f46; background: #ecfdf5; }
.summary-subtab.sub-completed.active { background: #10b981; color: #fff; border-color: #10b981; }
.summary-subtab.sub-cancelled { border-color: #fca5a5; color: #991b1b; background: #fef2f2; }
.summary-subtab.sub-cancelled.active { background: #ef4444; color: #fff; border-color: #ef4444; }
.summary-subtab.sub-pending { border-color: #FFB36A; color: #a35400; background: #fff5e6; }
.summary-subtab.sub-pending.active { background: #FF9D3D; color: #fff; border-color: #FF9D3D; }

.summary-cards button.summary-card {
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.summary-cards button.summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.summary-card-clickable.active {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
.summary-card-clickable.sc-completed.active { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.45); }
.summary-card-clickable.sc-cancelled.active { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45); }
.summary-card-clickable.sc-pending.active { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); }

.summary-cards { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.summary-cards.finance-cards { grid-template-columns: repeat(6, minmax(150px, 1fr)); }
.summary-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.summary-card span { font-size: 12px; color: #6b7280; font-weight: 600; }
.summary-card strong { font-size: 22px; color: #111827; }
.summary-card.sc-completed { border-color: #6ee7b7; background: #ecfdf5; }
.summary-card.sc-cancelled { border-color: #fca5a5; background: #fef2f2; }
.summary-card.sc-pending { border-color: #FFB36A; background: #fff5e6; }
.summary-card.sc-net { border-color: #34d399; background: #ecfdf5; }
.summary-card.sc-net strong { color: #047857; }
.summary-card.sc-revenue { border-color: #93c5fd; background: #eff6ff; }
.summary-card.sc-revenue strong { color: #1d4ed8; }
.summary-card.sc-cost { border-color: #fca5a5; background: #fef2f2; }
.summary-card.sc-cost strong { color: #b91c1c; }
.summary-card.sc-commission { border-color: #fcd34d; background: #fffbeb; }
.summary-card.sc-commission strong { color: #92400e; }
.summary-card.sc-extra { border-color: #c4b5fd; background: #f5f3ff; }
.summary-card.sc-extra strong { color: #6d28d9; }

.summary-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 16px; overflow-x: auto; }
.summary-block-title { font-weight: 700; color: #111827; padding: 4px 6px 10px; font-size: 14px; letter-spacing: 0.3px; }

.breakdown-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.breakdown-table th, .breakdown-table td { padding: 8px 10px; border: 1px solid #e5e7eb; text-align: right; white-space: nowrap; }
.breakdown-table th:first-child, .breakdown-table td:first-child { text-align: left; }
.breakdown-table thead th { background: #f3f4f6; color: #111827; font-weight: 700; }
.breakdown-table tbody tr:hover td { background: #f9fafb; }
.breakdown-table .summary-total-row td { background: #fff0d9 !important; font-weight: 700; color: #111827; }
.breakdown-table .summary-empty { text-align: center; padding: 24px; color: #6b7280; }
.breakdown-table tbody tr.agency-divider td { border-top: 2px solid #cbd5e1; }

.matrix-scroll { overflow-x: auto; }
.matrix-table { min-width: 100%; }
.matrix-table th, .matrix-table td { vertical-align: top; }
.matrix-table .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #e5e7eb; min-width: 180px; }
.matrix-table thead .sticky-col { background: #f3f4f6; z-index: 2; }
.matrix-table .summary-total-row .sticky-col { background: #fff0d9 !important; }
.matrix-table .cell-amount { font-variant-numeric: tabular-nums; padding: 1px 0; }
.matrix-table .cell-empty { background: #fafafa; }
.matrix-table .cell-total { background: #f0f6fc; font-variant-numeric: tabular-nums; }
.matrix-table .muted-dash { color: #9ca3af; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.modal-overlay[hidden] {
    display: none !important;
}
body.modal-open {
    overflow: hidden;
}
.modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    padding: 18px 20px 22px;
    max-width: 960px;
    width: 100%;
}
.modal-dialog-wide {
    max-width: 1040px;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #374151;
}
.modal-close:hover {
    background: #e5e7eb;
}
.modal-title {
    margin: 0 40px 6px 0;
    font-size: 18px;
    color: #111827;
}
.modal-subtitle {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #6b7280;
}
.modal-empty {
    color: #6b7280;
    margin: 8px 0;
}
.modal-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.modal-detail-table th,
.modal-detail-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: left;
}
.modal-detail-table thead th {
    background: #f3f4f6;
    font-weight: 700;
}
.modal-detail-table td:nth-child(5),
.modal-detail-table td:nth-child(6),
.modal-detail-table td:nth-child(7),
.modal-detail-table td:nth-child(8) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.modal-detail-table .modal-status-select {
    min-width: 140px;
    font-size: 12px;
}

.matrix-cell-clickable {
    cursor: pointer;
    transition: background 0.12s ease;
}
.matrix-cell-clickable:hover {
    background: #f0f6fc !important;
}
.matrix-footer-cell:hover {
    background: #fff0d9 !important;
}

.cell-action-stack .btn-details {
    width: 100%;
    padding: 6px 8px;
    font-size: 11px;
    background: #015FC9;
    color: #fff;
    border: 1px solid #015FC9;
    border-radius: 4px;
    cursor: pointer;
}
.cell-action-stack .btn-details:hover {
    background: #014a9e;
    border-color: #014a9e;
}

.row-details-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}
.row-details-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}
.row-details-form label input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #111827;
}
.row-details-msg-actions,
.row-details-link-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.msg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
.msg-btn:hover { opacity: 0.92; }
.msg-btn:active { transform: translateY(1px); }
.msg-btn.disabled {
    background: #9ca3af !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}
.msg-btn-whatsapp { background: #25D366; }
.msg-btn-telegram { background: #229ED9; }
.msg-btn-link { background: #6366f1; }
.msg-btn-reset {
    background: #e5e7eb;
    color: #111827;
    border: 1px solid #d1d5db;
}
.msg-btn-reset:hover { background: #d1d5db; }
#rowDetailsMessage {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}
.row-details-msg-hint {
    font-weight: 500;
    color: #6b7280;
    font-size: 12px;
    margin-left: 6px;
}
.currency-totals-table td:nth-child(2),
.currency-totals-table td:nth-child(3) { font-variant-numeric: tabular-nums; }
.muted { color: #6b7280; font-weight: 500; }

.dashboard-intro h1 { margin: 0 0 6px 0; font-size: 22px; color: #111827; }
.dashboard-lead { margin: 0 0 18px 0; color: #6b7280; font-size: 14px; }
.dashboard-month-cards .card h3 { line-height: 1.35; }
.dashboard-month-cards .card-scope { font-size: 12px; font-weight: 600; color: #6b7280; }
.dashboard-month-cards .card-success { border-color: #6ee7b7; background: #ecfdf5; }
.dashboard-month-cards .card-danger-soft { border-color: #fca5a5; background: #fef2f2; }
.dashboard-month-cards .card-earnings { border-color: #9bbfe6; background: #f0f6fc; }

.dashboard-upcoming { margin-top: 8px; }
.dashboard-period-tabs { margin-bottom: 12px; }
.dashboard-activity-wrap { margin-bottom: 14px; }
.dashboard-activity-tabs .tab { font-size: 13px; }
.dashboard-readonly-wrap { overflow: hidden; }
.dashboard-table-scroll { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.readonly-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 960px;
}
.readonly-table th {
    background: #f3f4f6;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}
.readonly-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.readonly-table tbody tr:hover td { background: #f9fafb; }

.readonly-table tbody tr.row-state-green > td {
    background: #86efac !important;
}
.readonly-table tbody tr.row-state-yellow > td {
    background: #fde047 !important;
}
.readonly-table tbody tr.row-state-both > td {
    background: linear-gradient(180deg, #86efac 0%, #86efac 50%, #fde047 50%, #fde047 100%) !important;
}
.readonly-table tbody tr.row-state-cancelled > td {
    background: #fca5a5 !important;
}
.readonly-table tbody tr.row-state-completed > td {
    background: #9bbfe6 !important;
}
.readonly-table tbody tr.row-state-pending > td {
    background: #FFD4A8 !important;
}
.readonly-table tbody tr.row-state-noshow > td {
    background: #c4b5fd !important;
}
.readonly-table td:nth-child(6),
.readonly-table td:nth-child(7) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dashboard-empty {
    padding: 24px;
    color: #6b7280;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

/* Accounting page */
.accounting-page .dashboard-intro h1 {
    margin: 4px 0;
}
.accounting-page .dashboard-lead {
    color: #4b5563;
    margin-top: 0;
}
.acc-filters {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.acc-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.acc-filter-row.acc-date-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.acc-filter-row.acc-date-row input[type="date"] {
    width: 180px;
}
.acc-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.acc-chip-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.acc-chip-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.acc-chip-actions button,
.acc-quick-buttons button,
.acc-status-chips button,
.acc-chips .acc-chip {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.acc-chip-actions button:hover,
.acc-quick-buttons button:hover,
.acc-status-chips button:hover,
.acc-chips .acc-chip:hover {
    background: #e5e7eb;
}
.acc-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.acc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
    padding: 4px;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}
.acc-chips .acc-chip.active,
.acc-status-chips button.active {
    background: #015FC9;
    border-color: #014a9e;
    color: #fff;
}
.acc-chip-actions button {
    background: #fff;
}
.acc-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}
.acc-btn {
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
}
.acc-btn-primary {
    background: #015FC9;
    color: #fff;
}
.acc-btn-secondary {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}
.acc-btn-export {
    background: #16a34a;
    color: #fff;
    margin-left: auto;
}

.acc-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.acc-kpis .kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.acc-kpis .kpi span {
    font-size: 11px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.acc-kpis .kpi strong {
    font-size: 20px;
    color: #111827;
}
.acc-kpis .kpi-completed { border-left-color: #015FC9; background: #f0f6fc; }
.acc-kpis .kpi-cancelled { border-left-color: #dc2626; background: #fef2f2; }
.acc-kpis .kpi-pending { border-left-color: #FF9D3D; background: #fff5e6; }
.acc-kpis .kpi-buy { border-left-color: #6366f1; }
.acc-kpis .kpi-sale { border-left-color: #0ea5e9; }
.acc-kpis .kpi-comm { border-left-color: #FF9D3D; }
.acc-kpis .kpi-net { border-left-color: #16a34a; background: #f0fdf4; }
.acc-kpis .kpi-net strong { color: #166534; }
.acc-kpis .kpi-noshow { border-left-color: #7c3aed; background: #f5f3ff; }
.acc-kpis .kpi-noshow strong { color: #5b21b6; }

.acc-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.acc-section h2 {
    margin: 0 0 12px;
    font-size: 16px;
    color: #111827;
}
.acc-empty {
    padding: 18px;
    color: #6b7280;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}
.acc-block-scroll {
    overflow-x: auto;
}
.acc-list-summary {
    color: #4b5563;
    font-size: 13px;
    margin-bottom: 8px;
}
.acc-detail-table th,
.acc-detail-table td {
    white-space: nowrap;
}
.acc-detail-table td:nth-child(5),
.acc-detail-table td:nth-child(6),
.acc-detail-table td:nth-child(7),
.acc-detail-table td:nth-child(8),
.acc-detail-table td:nth-child(9) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.acc-detail-table tbody tr.row-state-cancelled > td {
    background: #fca5a5 !important;
}
.acc-detail-table tbody tr.row-state-completed > td {
    background: #9bbfe6 !important;
}
.acc-detail-table tbody tr.row-state-pending > td {
    background: #FFD4A8 !important;
}
.acc-detail-table tbody tr.row-state-noshow > td {
    background: #c4b5fd !important;
}

.matrix-table .sticky-col {
    position: sticky;
    left: 0;
    background: #f9fafb;
    z-index: 2;
}
.matrix-table .cell-amount {
    font-size: 11px;
    line-height: 1.4;
}
.matrix-table .cell-amount .muted {
    color: #6b7280;
    font-weight: 600;
}
.matrix-table .cell-empty {
    text-align: center;
    color: #9ca3af;
}
.matrix-table .muted-dash {
    color: #9ca3af;
}
.matrix-table .cell-total strong {
    color: #166534;
}

@media (max-width: 900px) {
    .acc-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .acc-filter-row.acc-date-row label {
        flex: 1 1 100%;
    }
    .acc-btn-export { margin-left: 0; }
}

/* Activity welcome message form & table */
.shortcode-help {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.shortcode-help summary {
    cursor: pointer;
    font-weight: 700;
    color: #111827;
    padding: 4px 0;
}
.shortcode-help summary:hover { color: #015FC9; }
.shortcode-help[open] summary { margin-bottom: 8px; }
.shortcode-help p { margin: 6px 0; color: #374151; font-size: 13px; }
.shortcode-help .muted-help {
    color: #6b7280;
    font-style: italic;
    font-size: 12px;
}
.shortcode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 12px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}
.shortcode-list li {
    font-size: 13px;
    color: #374151;
}
.shortcode-list code {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 12px;
    color: #111827;
}
.activity-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
}
.activity-form-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}
.activity-form label,
.activity-msg-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.activity-form input,
.activity-form textarea {
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400;
}
.activity-msg-label textarea,
.welcome-message-cell {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}
.welcome-message-cell {
    min-width: 280px;
    min-height: 60px;
}
.activity-form-submit {
    align-self: flex-start;
    background: #015FC9;
    color: #fff;
    padding: 8px 18px;
    font-weight: 700;
    border-radius: 6px;
}
.activities-table td {
    vertical-align: top;
}
.profile-form {
    grid-template-columns: 1fr 1fr auto;
}
.profile-form input[disabled] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .activity-form-row {
        grid-template-columns: 1fr;
    }
    .shortcode-list {
        grid-template-columns: 1fr;
    }
}

/* Firmalar (Companies) page */
.company-add-form {
    grid-template-columns: 2fr 3fr auto;
}
.companies-table .company-link {
    color: #015FC9;
    text-decoration: none;
    font-weight: 700;
}
.companies-table .company-link:hover {
    text-decoration: underline;
}
.companies-table .small {
    font-size: 11px;
}
.companies-table tr.tx-debt > td {
    background: #fff5e6 !important;
}
.companies-table td:nth-child(2),
.companies-table td:nth-child(3),
.companies-table td:nth-child(4),
.companies-table td:nth-child(5) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.companies-table td:nth-child(4) strong { color: #a35400; }
.companies-table td:nth-child(4) strong:empty { color: #16a34a; }

.company-info-form,
.payment-form {
    display: grid;
    gap: 8px;
    align-items: end;
}
.company-info-form {
    grid-template-columns: 2fr 2fr auto;
}
.payment-form {
    grid-template-columns: 1fr 1fr 1fr 2fr auto;
}
.company-info-form label,
.payment-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.company-info-form input,
.payment-form input,
.payment-form select {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 13px;
}
.tx-table th,
.tx-table td {
    white-space: nowrap;
}
.tx-table td:nth-child(4),
.tx-table td:nth-child(5),
.tx-table td:nth-child(6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tx-table tr.tx-debt td:nth-child(5) { color: #a35400; font-weight: 700; }
.tx-table tr.tx-payment td:nth-child(5) { color: #15803d; font-weight: 700; }
.tx-table tr.tx-credit td:nth-child(5) { color: #5b21b6; font-weight: 700; }
.tx-table tr.tx-payment > td { background: #f0fdf4; }
.tx-table tr.tx-debt > td { background: #fff5e6; }
.tx-table tr.tx-credit > td { background: #f5f3ff; }
.tx-table .tx-note-cell {
    max-width: 280px;
    white-space: normal;
    word-break: break-word;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
}
.badge-active {
    display: inline-block;
    padding: 2px 8px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.badge-passive {
    display: inline-block;
    padding: 2px 8px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .payment-form {
        grid-template-columns: 1fr 1fr;
    }
    .payment-form-desc {
        grid-column: 1 / -1;
    }
    .company-info-form {
        grid-template-columns: 1fr;
    }
}

/* Future-date rate notice (rezervasyonlar) */
.rate-notice {
    margin-top: 6px;
    padding: 8px 12px;
    background: #fff5e6;
    border: 1px solid #FFB36A;
    border-left: 4px solid #FF9D3D;
    border-radius: 6px;
    color: #a35400;
    font-size: 13px;
    line-height: 1.5;
}
.rate-notice strong {
    color: #78350f;
}

/* Settings: rate status */
.rate-status {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.rate-status-ok {
    color: #166534;
}
.rate-status-warn {
    color: #a35400;
}
.rate-status:has(.rate-status-ok) {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.rate-status:has(.rate-status-warn) {
    background: #fff5e6;
    border: 1px solid #FFB36A;
}

/* ============================================================
   MOBILE / RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 980px) {
    .topbar { padding: 8px 10px; row-gap: 4px; }
    .topbar-nav {
        flex: 1 1 100%;
        order: 1;
        gap: 2px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .topbar-nav::-webkit-scrollbar { height: 3px; }
    .topbar-nav strong { white-space: nowrap; font-size: 14px; margin-right: 4px; }
    .topbar .link {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .user-box { order: 2; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
    .user-box > span { font-size: 12px; padding: 3px 8px; }
    .header-rates { order: 3; flex: 1 1 100%; max-width: 100%; margin: 4px 0 0; padding: 4px 6px; }

    .container { padding: 10px; }
    .cards { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    .card { padding: 10px; }
    .card h3 { font-size: 12px; }
    .card p { font-size: 18px; }

    .summary-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .summary-cards.finance-cards { grid-template-columns: 1fr 1fr; }

    .acc-kpis { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .acc-kpis .kpi { padding: 10px 12px; }
    .acc-kpis .kpi span { font-size: 11px; }
    .acc-kpis .kpi strong { font-size: 16px; }

    .settings-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .panel { padding: 12px; }

    .tab { padding: 6px 10px; font-size: 13px; }
    .sticky-booking-toolbar { padding: 6px 8px; gap: 4px; }
    .sticky-booking-toolbar .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .sticky-booking-toolbar .tabs::-webkit-scrollbar { height: 3px; }
    .sticky-booking-toolbar .tab {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 5px 9px;
    }
}

@media (max-width: 720px) {
    .cards { grid-template-columns: 1fr; }
    .summary-cards { grid-template-columns: 1fr; }
    .summary-cards.finance-cards { grid-template-columns: 1fr; }
    .acc-kpis { grid-template-columns: 1fr !important; }

    /* Modals → fullscreen on phones */
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-dialog,
    .modal-dialog-wide {
        max-width: 100%;
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        padding: 14px 14px 80px;
    }
    .modal-overlay .modal-close,
    .modal-overlay .btn-close {
        position: sticky;
        top: 0;
    }
    .row-details-form label input,
    .row-details-form label select,
    .row-details-form label textarea {
        font-size: 16px; /* prevent iOS auto-zoom */
        padding: 10px;
    }
    .row-details-msg-actions,
    .row-details-link-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .row-details-msg-actions > *,
    .row-details-link-actions > * {
        flex: 1 1 calc(50% - 3px);
        text-align: center;
        min-height: 40px;
    }
}

/* === Reservation table → mobile card view === */
@media (max-width: 900px) {
    #dayView { overflow: visible !important; }
    #reservationTable { display: block; width: 100%; min-width: 0 !important; }
    #reservationTable thead { display: none; }
    #reservationTable tbody { display: block; }
    #reservationTable tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        padding: 12px;
        margin: 0 0 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-left: 4px solid #6b7280;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    #reservationTable tr.row-state-green { border-left-color: #16a34a; }
    #reservationTable tr.row-state-yellow { border-left-color: #ca8a04; }
    #reservationTable tr.row-state-both { border-left-color: #65a30d; }
    #reservationTable tr.row-state-cancelled { border-left-color: #dc2626; }
    #reservationTable tr.row-state-completed { border-left-color: #015FC9; }
    #reservationTable tr.row-state-pending { border-left-color: #FF9D3D; }
    #reservationTable tr.row-state-noshow { border-left-color: #7c3aed; }
    #reservationTable tbody tr.row-state-cancelled > td,
    #reservationTable tbody tr.row-state-completed > td,
    #reservationTable tbody tr.row-state-pending > td,
    #reservationTable tbody tr.row-state-noshow > td,
    #reservationTable tbody tr.row-state-green > td,
    #reservationTable tbody tr.row-state-yellow > td,
    #reservationTable tbody tr.row-state-both > td {
        background: transparent !important;
    }
    #reservationTable td {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 4px 0;
        border: none;
        min-width: 0;
    }
    #reservationTable td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #6b7280;
    }
    #reservationTable td input,
    #reservationTable td select,
    #reservationTable td textarea {
        width: 100%;
        font-size: 14px;
        padding: 8px 10px;
        min-height: 36px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #fff;
    }
    #reservationTable td input:focus,
    #reservationTable td select:focus { outline: 2px solid #015FC9; outline-offset: -1px; }

    /* Calc cells: prominent boxed values */
    #reservationTable td.calc-buy,
    #reservationTable td.calc-sale,
    #reservationTable td.calc-comm,
    #reservationTable td.calc-net,
    #reservationTable td.calc-extra {
        background: #f9fafb;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 700;
    }
    #reservationTable td.calc-net { color: #166534; background: #f0fdf4; }
    #reservationTable td.calc-extra { color: #6d28d9; background: #f5f3ff; }

    /* Tahsilat group spans full row */
    #reservationTable td:nth-child(12) { grid-column: 1 / -1; }
    .collection-inputs { gap: 6px; }
    .collection-group-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .collection-input-row { display: flex; align-items: center; gap: 6px; }
    .collection-input-row span { flex: 0 0 50px; font-size: 12px; font-weight: 600; }
    .collection-input-row input { flex: 1; min-height: 36px; }

    /* Note + extra payment full width */
    .extra-payment-cell { flex-direction: row; gap: 6px; }
    .extra-payment-cell input { flex: 2; }
    .extra-payment-cell select { flex: 1; }

    /* Action stack full width with prominent buttons */
    #reservationTable td.cell-action-stack { grid-column: 1 / -1; }
    .cell-action-stack-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .cell-action-stack-inner .btn-toggle,
    .cell-action-stack-inner .btn-details,
    .cell-action-stack-inner select {
        min-height: 40px;
        font-size: 13px;
        padding: 8px 10px;
    }
    .cell-action-stack-inner .status-select { grid-column: 1 / -1; }
    .cell-action-stack-inner .btn-details { grid-column: 1 / -1; background: #1e293b; color: #fff; border: none; border-radius: 6px; font-weight: 700; }

    /* Sticky toolbar shadow when scrolling cards */
    .sticky-booking-toolbar {
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
}

/* === Other tables: horizontal scroll with hint === */
@media (max-width: 720px) {
    .acc-block-scroll,
    .matrix-scroll {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .readonly-table,
    .breakdown-table,
    .tx-table,
    .companies-table,
    .acc-detail-table {
        font-size: 12px;
    }
    .readonly-table th,
    .readonly-table td,
    .tx-table th,
    .tx-table td,
    .companies-table th,
    .companies-table td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    .tx-table .tx-note-cell { white-space: normal; max-width: 200px; }

    /* Companies table: make first column sticky for orientation */
    .companies-table th:first-child,
    .companies-table td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1;
        box-shadow: 1px 0 0 #e5e7eb;
    }

    /* Forms full width */
    .inline-form,
    .company-add-form,
    .company-info-form,
    .payment-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .payment-form label,
    .company-info-form label {
        flex: 1 1 100%;
    }
    .acc-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

    /* Settings tables: horizontal scroll */
    .panel table { font-size: 12px; }
    .panel { padding: 10px; }
    .panel h3 { font-size: 15px; }

    /* Dashboard month cards */
    .dashboard-month-cards { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
    .dashboard-month-cards { grid-template-columns: 1fr !important; }
    .sticky-booking-toolbar .tab { font-size: 11px; padding: 4px 7px; }
    .container { padding: 8px; }
    h1 { font-size: 20px; }
    h2 { font-size: 16px; }
    h3 { font-size: 14px; }
}

/* Acc filters chips: scrollable on mobile */
@media (max-width: 720px) {
    .acc-filters { gap: 8px; }
    .acc-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .acc-chips::-webkit-scrollbar { height: 4px; }
    .acc-chips .acc-chip,
    .acc-chips button { flex: 0 0 auto; white-space: nowrap; }

    /* Activity form (settings): stack on mobile */
    .activity-form-row { grid-template-columns: 1fr !important; }
    .activity-form input,
    .activity-form select,
    .activity-form textarea { width: 100%; }

    /* Currency grid in settings */
    .panel .currency-grid,
    .panel .agency-grid,
    .panel .activity-grid { grid-template-columns: 1fr !important; }

    /* Profile form */
    .profile-form { grid-template-columns: 1fr !important; }
}

/* === Reservation history accordion (Detaylar modal) === */
.row-details-history {
    margin-top: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    overflow: hidden;
}
.row-details-history > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
    background: #f3f4f6;
    user-select: none;
}
.row-details-history > summary::-webkit-details-marker { display: none; }
.row-details-history > summary:hover { background: #e5e7eb; }
.rdh-summary-title { flex: 0 0 auto; }
.rdh-summary-meta {
    flex: 1 1 auto;
    font-weight: 500;
    font-size: 12px;
    color: #6b7280;
}
.rdh-summary-arrow {
    flex: 0 0 auto;
    font-size: 14px;
    color: #6b7280;
    transition: transform 0.15s ease;
}
.row-details-history[open] > summary > .rdh-summary-arrow {
    transform: rotate(180deg);
}
.rdh-body {
    padding: 10px 14px 14px;
    max-height: 360px;
    overflow-y: auto;
}
.rdh-empty {
    margin: 0;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    padding: 14px 0;
}
.rdh-entry {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #6b7280;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.rdh-entry.rdh-act-create { border-left-color: #16a34a; }
.rdh-entry.rdh-act-update { border-left-color: #015FC9; }
.rdh-entry.rdh-act-delete { border-left-color: #dc2626; background: #fef2f2; }
.rdh-entry-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.rdh-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
}
.rdh-act-create .rdh-badge { background: #dcfce7; color: #166534; }
.rdh-act-update .rdh-badge { background: #dbe8f7; color: #013b7a; }
.rdh-act-delete .rdh-badge { background: #fecaca; color: #991b1b; }
.rdh-who {
    font-weight: 700;
    font-size: 13px;
    color: #111827;
}
.rdh-when {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.rdh-changes {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.rdh-change {
    padding: 3px 0;
    line-height: 1.5;
    color: #374151;
    border-top: 1px dashed #f1f5f9;
}
.rdh-change:first-child { border-top: none; }
.rdh-change-note { color: #6b7280; font-style: italic; }
.rdh-field {
    font-weight: 700;
    color: #111827;
    margin-right: 4px;
}
.rdh-from {
    color: #b91c1c;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.4);
}
.rdh-to {
    color: #166534;
    font-weight: 600;
}
.rdh-arrow { color: #9ca3af; margin: 0 2px; }
.rdh-empty-val { color: #9ca3af; font-style: italic; }

@media (max-width: 720px) {
    .rdh-body { max-height: 50vh; }
    .rdh-when { margin-left: 0; flex-basis: 100%; }
}

/* ----- Mobil rezervasyon akışı (rezervasyonlar.php) ----- */
.mobile-booking-shell {
    display: none;
}
.mobile-booking-controls {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.mobile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.mobile-field span {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mobile-select,
.mobile-date-input {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 100%;
}
.mobile-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.mobile-btn-primary {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #015FC9 0%, #014a9e 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.mobile-btn-secondary {
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.mobile-selected-date {
    margin: 10px 0 0;
    font-size: 13px;
    color: #4b5563;
    text-align: center;
}
.mobile-rate-notice {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.mobile-desktop-hint {
    font-size: 13px;
    color: #a35400;
    background: #fff5e6;
    border: 1px solid #FFB36A;
    padding: 10px;
    border-radius: 8px;
}
.mobile-reservation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-list-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 24px 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px dashed #e5e7eb;
}
.mob-res-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mob-res-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.mob-res-customer {
    font-size: 16px;
    color: #111827;
}
.mob-card-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.mob-tag-cancel { background: #fecaca; color: #991b1b; }
.mob-tag-done { background: #cfe0f5; color: #013b7a; }
.mob-tag-noshow { background: #ddd6fe; color: #5b21b6; }
.mob-tag-both { background: #bbf7d0; color: #166534; }
.mob-tag-msg { background: #FFB36A; color: #a35400; }
.mob-tag-res { background: #86efac; color: #166534; }
.mob-tag-wait { background: #FFD4A8; color: #a35400; }
.mob-res-meta {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
}
.mob-res-numbers {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    color: #374151;
}
.mob-res-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.mobile-editor-overlay {
    z-index: 2100;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}
.mobile-editor-dialog {
    max-width: 100%;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
    padding: 12px 14px 90px;
    overflow-y: auto;
}
.mobile-editor-body {
    padding-bottom: 8px;
}
.mob-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-field span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.mob-field input,
.mob-field select,
.mob-field textarea {
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}
.mob-section-label {
    font-weight: 800;
    font-size: 13px;
    color: #111827;
    margin-top: 6px;
}
.mob-coll-group {
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 8px;
    background: #fafafa;
}
.mob-coll-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 6px;
}
.mob-coll-field span {
    font-size: 11px;
    text-transform: none;
}
.mob-toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mob-toggle {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.mob-toggle.active {
    background: #ecfdf5;
    border-color: #16a34a;
    color: #166534;
}
.mobile-editor-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0.92), #fff);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

@media (max-width: 900px) {
    .mobile-booking-shell {
        display: block;
    }
    .desktop-booking-toolbar,
    .desktop-day-view {
        display: none !important;
    }
}

@media (min-width: 901px) {
    .mobile-booking-shell {
        display: none !important;
    }
}

/* Make all touch targets meet ~40px guideline on touch devices */
@media (hover: none) and (pointer: coarse) {
    button, .acc-btn, .link, select, input[type="date"], input[type="number"], input[type="text"] {
        min-height: 40px;
    }
}

/* ===========================================================
   Push notification permission banner
   =========================================================== */
.push-perm-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: 540px;
    width: calc(100% - 32px);
    background: #1f2937;
    color: #f9fafb;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    animation: pushBannerIn 0.25s ease-out;
}
.push-perm-banner .push-perm-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.push-perm-banner .push-perm-text strong {
    font-size: 14px;
    font-weight: 600;
}
.push-perm-banner .push-perm-text span {
    font-size: 12px;
    color: #d1d5db;
}
.push-perm-banner .push-perm-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.push-perm-banner button {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.push-perm-banner .push-perm-yes {
    background: #2563eb;
    color: #fff;
}
.push-perm-banner .push-perm-yes:hover {
    background: #1d4ed8;
}
.push-perm-banner .push-perm-no {
    background: transparent;
    color: #d1d5db;
    border: 1px solid #4b5563;
}
.push-perm-banner .push-perm-no:hover {
    background: #374151;
}
@keyframes pushBannerIn {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 600px) {
    .push-perm-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .push-perm-banner .push-perm-actions {
        justify-content: flex-end;
    }
}