:root {
    --f-navy-deep: #0e172d;
    --f-navy: #14213d;
    --f-gold: #c9a44f;
    --f-muted: #9ea3b2;
    --f-border: rgba(201, 164, 79, 0.35);
}

* { box-sizing: border-box; }
html { direction: rtl; }

body.filing {
    margin: 0;
    background: #f6f8fa;
    color: var(--f-navy);
    font-family: 'Inter', 'Vazirmatn', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.filing h1, .filing h2, .filing h3, .filing .heading { font-family: 'Vazirmatn', sans-serif; }
.filing a { text-decoration: none; }
.filing button { font-family: inherit; cursor: pointer; border: none; }
.filing ul { list-style: none; margin: 0; padding: 0; }

/* Topbar */
.f-topbar {
    background: var(--f-navy-deep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.f-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.f-topbar-left form { display: contents; }

.f-search {
    background: #1f2b4a;
    border: 1px solid #404d66;
    height: 40px;
    width: 320px;
    max-width: 60vw;
    border-radius: 10px;
    padding: 0 14px;
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    text-align: right;
}
.f-search::placeholder { color: var(--f-muted); }
.f-search:focus { border-color: var(--f-gold); }

.f-user-chip {
    background: #212e4d;
    border-radius: 20px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.f-user-chip .avatar-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--f-gold);
}

.f-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.f-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}

.f-topbar-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.f-topbar-crest img {
    width: 40px;
    height: 40px;
}

.a-admin-badge {
    display: inline-block;
    background: var(--f-gold);
    color: var(--f-navy-deep);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-inline-end: 6px;
    vertical-align: middle;
}

.f-brand-col .name { font-weight: 700; font-size: 16px; color: #fff; }
.f-brand-col .sub { font-size: 10px; color: var(--f-muted); }

.f-avatar {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--f-gold), #8a6a2a);
    overflow: hidden;
    flex-shrink: 0;
}
.f-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Body: sidebar + main */
.f-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 68px);
    background: #fff;
}

.f-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #1c2947 0%, #121c33 50%, #0a0f1f 100%);
    padding: 24px 16px;
    position: relative;
    border-left: 2px solid rgba(201, 164, 79, 0.5);
    overflow-y: auto;
}

/* Hamburger toggle: hidden on desktop, shown ≤1024px in the topbar */
.f-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 6px;
    background: transparent;
    flex-shrink: 0;
}
.f-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--f-gold);
}

/* Close (×) button inside the drawer, hidden on desktop */
.f-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--f-gold);
    font-size: 18px;
    line-height: 1;
}

/* Drawer backdrop, hidden on desktop */
.f-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 31, 0.55);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.f-nav-section { padding: 14px 4px 2px; }

.f-nav-label {
    color: var(--f-gold);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    display: block;
    margin-bottom: 2px;
}

.f-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
}

.f-nav-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.f-nav-item.active {
    background: var(--f-gold);
    color: var(--f-navy);
    font-weight: 600;
}

.f-nav-item.active .dot { background: var(--f-navy); }

.f-nav-item:hover:not(.active) { background: rgba(255, 255, 255, 0.06); }

.f-nav-divider {
    height: 1px;
    background: rgba(201, 164, 79, 0.18);
    margin: 4px 0;
}

.f-main {
    flex: 1;
    min-width: 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.f-title-block { margin-bottom: 0; }
.f-title-block h1 { font-weight: 900; font-size: 30px; color: var(--f-navy); margin: 0; text-align: right; }

/* Gold-bordered dark banner, reused as the title pattern on every filing sub-page */
.f-page-banner {
    background: linear-gradient(90deg, #0d1429, #1a243d);
    border: 1px solid var(--f-gold);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.f-page-banner h1 {
    font-family: 'Vazirmatn', sans-serif;
    color: var(--f-gold);
    font-size: 19px;
    font-weight: 900;
    margin: 0;
}

.f-page-banner .hint { color: var(--f-gold); font-size: 12px; }

/* Blue notice box (used on the folders page) */
.f-info-box {
    background: #e3f2fc;
    color: #1a598c;
    border-radius: 10px;
    padding: 16px;
    text-align: right;
    margin-bottom: 0;
}
.f-info-box .title { font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; }
.f-info-box .desc { font-size: 11px; display: block; }

/* Blue save button used on dashboard forms (support/password/etc) */
.f-btn-blue {
    background: #2480d9;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

/* Red danger button, e.g. "remove all files from this folder" */
.f-btn-danger {
    background: #bf2626;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}
.f-btn-danger:hover { background: #a31f1f; }

/* Fixed-column detail table: folders / customers / tickets */
.f-data-table-wrap {
    background: #fff;
    border: 1px solid #e5e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(26, 26, 38, 0.05), 0 10px 28px rgba(128, 102, 38, 0.1);
    overflow-x: auto;
}
.f-data-table { border-collapse: collapse; width: max-content; min-width: 100%; }
.f-data-table th, .f-data-table td {
    width: 140px;
    height: 36px;
    text-align: center;
    font-size: 11px;
    padding: 0 8px;
    white-space: nowrap;
}
.f-data-table thead tr { background: #f2f5fa; }
.f-data-table th { color: #4d5466; font-weight: 600; }
.f-data-table td { color: var(--f-navy); font-weight: 400; }
.f-data-table tbody tr:nth-child(even) { background: #fafafc; }
.f-data-table tbody tr:nth-child(odd) { background: #fff; }
.f-row-action {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    margin-inline-start: 4px;
    background: none;
    cursor: pointer;
}
.f-row-action.edit { color: #2480d9; }
.f-row-action.edit:hover { background: rgba(36, 128, 217, 0.1); }
.f-row-action.danger { color: #bf2626; }
.f-row-action.danger:hover { background: rgba(191, 38, 38, 0.1); }
.f-row-action-muted { color: #c3c8d4; font-size: 11px; }

.f-row-link { cursor: pointer; }
.f-row-link:hover { background: #fbf6ea !important; }
.f-cell-link { color: var(--f-navy); text-decoration: underline; text-decoration-color: transparent; }
.f-row-link:hover .f-cell-link { text-decoration-color: var(--f-gold); }

.f-data-table-empty {
    padding: 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #994d33;
    font-size: 12px;
}

/* Profile photo upload row */
.f-photo-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.f-photo-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(201, 164, 79, 0.12);
    border: 1px solid var(--f-gold);
    color: var(--f-gold);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 900;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.f-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.f-photo-field { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: right; }
.f-photo-field label { font-size: 13px; font-weight: 600; color: var(--f-navy); }
.f-photo-field input[type="file"] { font-size: 12px; font-family: inherit; }
.f-photo-hint { font-size: 11px; color: #9098a8; }

/* Detail form rows: label above input box, used on support/profile/password pages */
.f-detail-row { display: flex; gap: 16px; flex-wrap: wrap; }
.f-detail-field { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 220px; max-width: 100%; }
.f-detail-field label { color: #596173; font-size: 12px; font-weight: 500; }
.f-detail-field input, .f-detail-field select {
    width: 100%;
    height: 40px;
    border: 1px solid #dbe0eb;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    text-align: right;
    font-family: inherit;
}
.f-detail-field.wide { width: 700px; }
.f-detail-field textarea {
    width: 100%;
    height: 120px;
    border: 1px solid #dbe0eb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: right;
    font-family: inherit;
    resize: vertical;
}

/* Subscription status card */
.f-status-card {
    background: #fff;
    border: 1px solid #e5e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(26, 26, 38, 0.05), 0 10px 28px rgba(128, 102, 38, 0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.f-status-row { display: flex; align-items: center; gap: 8px; }
.f-status-row .dot { width: 10px; height: 10px; border-radius: 50%; background: #23a26d; flex-shrink: 0; }
.f-status-row .dot.gold { background: var(--f-gold); }
.f-status-row .val { color: var(--f-navy); font-size: 13px; font-weight: 600; }
.f-status-row .lbl { color: #808594; font-size: 12px; }

/* Stats row */
.f-stats-row { display: flex; gap: 20px; flex-wrap: wrap; }

.f-stat-card {
    background: #fff;
    border: 1px solid var(--f-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(23, 28, 51, 0.04), 0 8px 24px rgba(23, 28, 51, 0.08);
    padding: 20px;
    width: 300px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.f-stat-card .icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(201, 164, 79, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.f-stat-card .icon-badge .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--f-gold); }

.f-stat-card .text-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: right; }
.f-stat-card .label { color: #737a8c; font-size: 13px; font-weight: 500; }
.f-stat-card .value { color: var(--f-navy); font-size: 26px; font-weight: 700; }

/* Cards / panels */
.f-panel {
    background: #fff;
    border: 1px solid #ebedf2;
    border-radius: 14px;
    padding: 24px;
}

/* Table */
.f-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ebedf2; border-radius: 14px; }
.f-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 13px; }
.f-table th, .f-table td { padding: 12px 16px; text-align: right; white-space: nowrap; }
.f-table thead th { background: #f6f8fa; color: #596173; font-weight: 600; border-bottom: 1px solid #ebedf2; }
.f-table tbody tr { border-bottom: 1px solid #f1f2f6; }
.f-table tbody tr:last-child { border-bottom: none; }
.f-empty { padding: 40px; text-align: center; color: #9098a8; }

/* Quick-filter tabs (e.g. «فایل‌های من») */
.f-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.f-tab { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #f1f2f6; color: #596173; font-size: 13px; font-weight: 600; text-decoration: none; }
.f-tab.active { background: var(--f-navy); color: #fff; }
.f-tab:hover:not(.active) { background: #e4e7ee; }

/* Forms */
.f-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: right; }
.f-form-row label { font-size: 13px; font-weight: 600; color: var(--f-navy); }
.f-form-row input, .f-form-row select, .f-form-row textarea {
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    text-align: right;
}
.f-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
/* کارشناس ۱/۲/۳ + امضا row — used to be an inline style="grid-template-columns:
   repeat(4,1fr)" on file_new/file_edit's appraisal form, which (being inline)
   always overrode the ≤640px .f-form-grid → 1fr rule below and forced 4 fixed
   columns even on a phone screen. Moved to a class so the responsive rules
   below can actually reach it. */
.f-form-grid-4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .f-form-grid-4col { grid-template-columns: repeat(2, 1fr); } }

/*
 * Sidebar drawer (≤1024px), shared by /filing and /admin.
 * Above 1024px the sidebar stays the fixed, always-visible 300px column
 * defined above — nothing in this block applies there.
 * Below 1024px the sidebar becomes an off-canvas drawer that slides in
 * from the right edge (this is an RTL layout, and the sidebar already sits
 * visually on the right), toggled by the hamburger button in .f-topbar.
 */
@media (max-width: 1024px) {
    .f-hamburger { display: flex; }

    .f-body { position: relative; }

    .f-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        padding-top: 56px;
        transform: translateX(100%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        z-index: 1000;
    }

    .f-sidebar-close { display: flex; }

    .f-drawer-backdrop { display: block; }

    body.f-sidebar-open { overflow: hidden; }
    /* Shadow lives on the open state only: on the closed drawer it bled ~28px
       of grey gradient onto the right edge of every page. */
    body.f-sidebar-open .f-sidebar { transform: translateX(0); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35); }
    body.f-sidebar-open .f-drawer-backdrop { opacity: 1; pointer-events: auto; }
}

/*
 * Mobile navigation helpers (≤1024px, same breakpoint as the drawer):
 *  - .f-home-btn: persistent "خانه" pill in the topbar → panel dashboard.
 *  - .f-back-link: "بازگشت" pill at the top of the page content.
 * Both are rendered by panel_home_button()/panel_back_link() in helpers.php
 * and stay hidden on desktop, where the sidebar is always on screen.
 * The topbar is sticky here so the home button is reachable from anywhere on
 * a long page, not just at the very top. z-index 900 keeps it under the
 * drawer (1000) and its backdrop (999). The topbar wraps into two rows here
 * (adding خانه pushes the search + role chip group onto its own row), and
 * pinning both would eat 120-135px of the screen. So .f-topbar becomes
 * display:contents and only its first row (hamburger, brand, خانه —
 * .f-topbar-right) is the sticky element, a direct child of <body> so it
 * can stick for the whole page; the second row scrolls away with the page.
 * Each row therefore carries its own navy background and padding.
 */
.f-home-btn, .f-back-link { display: none; }

@media (max-width: 1024px) {
    .f-topbar { display: contents; }
    .f-topbar-right {
        position: sticky;
        top: 0;
        z-index: 900;
        background: var(--f-navy-deep);
        padding: 14px 24px 12px;
    }
    .f-topbar-left { background: var(--f-navy-deep); padding: 0 24px 14px; }

    .f-home-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-inline-start: auto;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid var(--f-gold);
        border-radius: 20px;
        background: rgba(201, 164, 79, 0.14);
        color: var(--f-gold);
        font-family: 'Vazirmatn', sans-serif;
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
    }
    .f-home-btn:active { background: var(--f-gold); color: var(--f-navy-deep); }

    .f-back-link {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px 0 12px;
        margin-bottom: -8px;
        border: 1px solid var(--f-gold);
        border-radius: 20px;
        background: #fff;
        color: var(--f-navy);
        font-family: 'Vazirmatn', sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    .f-back-link svg { color: var(--f-gold); }
    .f-back-link:active { background: var(--f-gold); }
}

@media (max-width: 640px) {
    .f-topbar-right { padding: 12px 16px; }
    .f-topbar-left { padding: 0 16px 14px; }
}

@media (max-width: 640px) { .f-form-grid { grid-template-columns: 1fr; } .f-main { padding: 20px; } }

.f-btn {
    background: var(--f-gold);
    color: var(--f-navy-deep, #0d1429);
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.f-alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; text-align: right; }
.f-alert.error { background: #fdecec; color: #b3261e; }
.f-alert.success { background: #eaf7ee; color: #1e7a3a; }

.f-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: #f5f7fa; color: #596173; white-space: nowrap; }
/* Same color pairs already used for .f-alert.error/.success and the pending notice boxes elsewhere. */
.f-badge.status-pending { background: #fbf6ea; color: #6b5a26; }
.f-badge.status-approved { background: #eaf7ee; color: #1e7a3a; }
.f-badge.status-rejected { background: #fdecec; color: #b3261e; }
.f-badge-note { font-size: 10px; color: #b3261e; margin-top: 3px; white-space: normal; max-width: 160px; }

/* اعلان‌ها — notifications list */
.f-notification-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    text-decoration: none;
    color: var(--f-navy);
    font-size: 13px;
    flex-wrap: wrap;
}
.f-notification-row:hover { background: #f6f8fa; }
.f-notification-time { color: #9098a8; font-size: 11px; white-space: nowrap; }

/* Ticket thread */
.f-thread-msg {
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 640px;
}
.f-thread-msg.agent { background: #f6f8fa; align-self: flex-start; }
.f-thread-msg.support { background: #e3f2fc; align-self: flex-start; }
.f-thread-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.f-thread-sender { font-size: 12px; font-weight: 700; color: var(--f-navy); }
.f-thread-msg.support .f-thread-sender { color: #1a598c; }
.f-thread-date { font-size: 11px; color: #9098a8; }
.f-thread-body { font-size: 13px; color: #3c4257; margin: 0; line-height: 1.9; }

/* Auth pages */
.f-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #14213d, #0d1429);
    padding: 20px;
}

.f-auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 32px;
    width: 380px;
    max-width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Unlike the navbar/footer/topbar crests, this one sits inside a WHITE card
   (.f-auth-card has background:#fff) rather than directly on the navy page
   background — a box-free white-on-transparent mark would be fully invisible
   here, so it keeps a plain navy circle backdrop (no border/gold tint). */
.f-auth-crest {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--f-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.f-auth-crest img {
    width: 60px;
    height: 60px;
}

.f-auth-card h1 { font-size: 18px; color: var(--f-navy); margin: 0 0 6px; }
.f-auth-card p.sub { color: #808594; font-size: 13px; margin: 0 0 24px; }

.f-auth-card input {
    width: 100%;
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
    direction: ltr;
    font-family: inherit;
}

.f-auth-card button.f-btn { width: 100%; padding: 12px; font-size: 14px; }

.f-dev-code {
    margin-top: 16px;
    padding: 10px;
    background: #fbf6ea;
    border: 1px dashed var(--f-gold);
    border-radius: 10px;
    font-size: 12px;
    color: #6b5a26;
}

/* فرم کارشناسی — appraisal section reused on file_new/file_edit (fillable) and
   file_show/appraisal_show (read-only). Themed with the existing f-navy/f-gold
   tokens and .f-form-row's border/radius/font-size, not a separate look. */
.f-ap-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--f-gold);
    margin: 4px 0 0;
    text-align: right;
}
.f-ap-required-legend { font-size: 11px; color: #9098a8; margin: 2px 0 10px; text-align: right; }
.f-required-mark { color: #b3261e; font-weight: 700; }
.f-cross-link-note { font-size: 12px; color: #596173; background: #f6f8fa; border: 1px solid #ebedf2; border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; text-align: right; }
.f-cross-link-note a { color: var(--f-gold); font-weight: 600; }

.f-ap-grid { display: flex; gap: 10px; flex-wrap: wrap; overflow-x: auto; padding-bottom: 4px; }
.f-ap-col {
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 112px;
    flex: 1 1 112px;
    background: #fff;
}
.f-ap-col-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-navy);
    text-align: center;
    border-bottom: 1px solid #eef0f5;
    padding-bottom: 6px;
}
.f-ap-col input, .f-ap-col select, .f-ap-col textarea {
    text-align: center;
    font-size: 12px;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    padding: 6px 8px;
    font-family: inherit;
    width: 100%;
}
.f-ap-radio-col { min-width: 140px; flex-basis: 140px; }
.f-ap-radio-list { display: flex; flex-direction: column; gap: 6px; }
.f-ap-radio-item, .f-ap-check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-navy); }
.f-ap-radio-item input, .f-ap-check-item input { width: auto; }
.f-ap-direction-col { min-width: 120px; flex-basis: 120px; }
.f-ap-direction-sub { display: flex; gap: 6px; }
.f-ap-direction-sub .mini { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.f-ap-direction-sub .mini label { font-size: 10px; color: #9098a8; }
.f-ap-direction-sub input { text-align: center; }

.f-ap-amenities { display: flex; flex-direction: column; gap: 8px; }
.f-ap-amenity-row { display: flex; gap: 8px; flex-wrap: wrap; border: 1px solid #dfe3ec; border-radius: 10px; padding: 10px 12px; }
.f-ap-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid #dfe3ec; border-radius: 16px; padding: 6px 12px; color: var(--f-navy); }
.f-ap-chip input { width: auto; }

.f-ap-quality { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid #dfe3ec; border-radius: 10px; padding: 10px 12px; }
.f-ap-quality .title-sm { font-size: 12px; font-weight: 700; color: var(--f-navy); flex: none; }

.f-ap-error { color: #b3261e; font-size: 11px; margin-top: 2px; }

/* Read-only variant used on file_show.php / appraisal_show.php */
.f-ap-view-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.f-ap-view-col {
    border: 1px solid #ebedf2;
    border-radius: 10px;
    padding: 8px 12px;
    background: #f9fafb;
    min-width: 120px;
    flex: 1 1 120px;
    text-align: center;
}
.f-ap-view-col .lbl { display: block; font-size: 11px; color: #9098a8; margin-bottom: 4px; }
.f-ap-view-col .val { font-size: 13px; font-weight: 600; color: var(--f-navy); }

@media (max-width: 640px) {
    /* Was flex-wrap:nowrap + fixed 108px columns, which turned this whole
       row into a horizontally-scrolling strip on phones — every field was
       technically reachable but only by swiping sideways, easy to miss
       entirely, and each 108px box was too narrow to comfortably read/tap.
       Stack one field per row instead, like the rest of this form already
       does at this width (see .f-form-grid's own ≤640px rule above). */
    .f-ap-grid { overflow-x: visible; flex-direction: column; }
    .f-ap-col { flex: 1 1 auto; min-width: 0; width: 100%; }
    .f-ap-direction-sub { max-width: 220px; }
}

/* --- 2026-09-21 punch list: read-only stamp hint, fixed-option stack, facade photo --- */
.f-field-hint { font-size: 11px; color: var(--f-muted); line-height: 1.6; }
.f-form-row input[disabled][readonly] { background: #f3f4f8; color: var(--f-navy); cursor: not-allowed; }
.f-ap-radio-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.f-facade-thumb { display: block; width: 160px; max-width: 100%; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid #dfe3ec; }
.f-facade-img { display: block; width: 320px; max-width: 100%; border-radius: 12px; border: 1px solid #dfe3ec; }

/* Admin sidebar: state-changing items (logout) are POST forms styled exactly
   like the other nav links (admin/layout.php). */
.f-nav-form { margin: 0; }
.f-nav-button { width: 100%; background: none; border: 0; font: inherit; font-size: 13px; color: #fff; text-align: right; cursor: pointer; }

/* Admin اعلانات: unread rows + "mark all read" (POST) bar. */
.f-notif-markread { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.f-notif-markread span { color: #596173; font-size: 13px; }
.f-notification-row.is-unread { border-right: 3px solid var(--f-gold); background: #fffdf5; }
.f-notif-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--f-gold); color: var(--f-navy); font-size: 10px; font-weight: 700; }

/* /admin/agents/{id} — «حذف دائمی مشاور» (مدیر کل only) */
.f-agent-delete { margin-top: 20px; padding: 14px 16px; border: 1px solid #f1c4c4; border-radius: 10px; background: #fff7f7; }
.f-agent-delete h3 { margin: 0 0 6px; font-size: 14px; color: #b42318; }
.f-agent-delete p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; color: #4a5160; }
.f-agent-delete ul { margin: 0 0 10px; padding-right: 18px; font-size: 13px; line-height: 1.9; color: #b42318; }
.f-agent-delete button[disabled] { opacity: .45; cursor: not-allowed; }

/* Long free text in otherwise nowrap tables (contact messages): wrap inside a
   bounded column instead of stretching the table to the length of the text. */
.f-data-table td.f-cell-longtext { white-space: normal; overflow-wrap: anywhere; min-width: 220px; max-width: 360px; line-height: 1.8; }

/* Phones (reversed 2026-10-xx): every list stays a REAL row-per-record table,
   horizontally scrollable inside its own .f-data-table-wrap/.f-table-wrap
   (those already have overflow-x:auto unconditionally — this block only adds
   the phone-specific touches on top: ellipsis+tooltip, a sticky first column,
   a self-adapting scroll-shadow hint, and bigger row-action tap targets. No
   stacking, no data-label hack — see app/views/{filing,admin}/layout.php for
   the (now much smaller) companion JS that sets title= for the ellipsis. */
@media (max-width: 640px) {
    .f-data-table-wrap, .f-table-wrap {
        -webkit-overflow-scrolling: touch;
        position: relative;
        /* Scroll-shadow hint: pure CSS, self-adapting — a shadow only renders
           at an edge that still has more content to reveal, and disappears on
           its own once scrolled all the way, or never appears at all if the
           table already fits. No JS, nothing to clean up. The `background`
           shorthand resets background-color to transparent for any
           sub-property it doesn't mention, so the solid white base (desktop
           sets it via that same shorthand, filing.css:321/485) is restored by
           a separate background-color declaration AFTER the shorthand. */
        background:
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
            radial-gradient(farthest-side at left, rgba(20, 33, 61, .18), rgba(20, 33, 61, 0)),
            radial-gradient(farthest-side at right, rgba(20, 33, 61, .18), rgba(20, 33, 61, 0));
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
        background-position: left center, right center, left center, right center;
        background-attachment: local, local, scroll, scroll;
        background-color: #fff;
    }
    .f-table { font-size: 12px; } /* .f-data-table is already 11px unconditionally */
    /* max-width (not just the base width:140px) is required: in table
       auto-layout, a plain `width` is only a sizing HINT a column can still
       exceed for long nowrap content (confirmed empirically — a spam contact
       message's free-text name field alone grew its column to ~744px despite
       width:140px + overflow:hidden). max-width is a hard cap regardless. */
    .f-data-table th, .f-data-table td, .f-table th, .f-table td {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* A cell with its own interactive content (action links/buttons/forms) is
       exempt — clipping would hide or mangle a tappable control. Table
       auto-layout re-measures that column from these cells, so it simply
       grows to fit; it's still reachable by scrolling like any other column. */
    .f-data-table td:has(a, button, form), .f-table td:has(a, button, form) {
        overflow: visible;
        white-space: nowrap;
        max-width: none;
    }
    /* Sticky first column (serial/name), so the user always knows which row
       they're on while swiping sideways. inset-inline-start follows the
       page's RTL direction automatically. A solid per-row background stops
       the scrolling columns behind it from showing through. */
    .f-data-table th:first-child, .f-data-table td:first-child,
    .f-table th:first-child, .f-table td:first-child {
        position: sticky;
        inset-inline-start: 0;
        border-inline-end: 1px solid #e5e8f0;
    }
    .f-data-table thead th:first-child, .f-table thead th:first-child { z-index: 3; }
    .f-data-table tbody td:first-child, .f-table tbody td:first-child { z-index: 2; }
    .f-data-table thead tr th:first-child { background: #f2f5fa; }
    .f-table thead tr th:first-child { background: #f6f8fa; }
    .f-data-table tbody tr:nth-child(odd) td:first-child { background: #fff; }
    .f-data-table tbody tr:nth-child(even) td:first-child { background: #fafafc; }
    .f-table tbody tr td:first-child { background: #fff; } /* .f-table has no zebra striping */
    /* Row actions: bigger tap targets (>=36px) regardless of the compacting
       rule file_table.php's own actions cell already applies (filing.css ~943). */
    .f-row-action, .f-file-table .f-cell-actions .f-row-action {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        margin-inline-start: 8px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Mobile drawer logout (2026-09-29). The drawer was `height: 100vh`, which on
   phone browsers is the height with the address/tool bars hidden — so its last
   ~60–100px (where «خروج» sat) stayed under the browser toolbar even when the
   drawer was scrolled to the end. Now it is sized to the visible screen (dvh,
   vh fallback) and logout is pinned to its bottom, always on screen; the
   in-list logout item is hidden there to avoid showing it twice. */
.f-drawer-logout { display: none; }
@media (max-width: 1024px) {
    .f-sidebar { height: 100vh; height: 100dvh; padding-bottom: 0; }
    .f-sidebar .f-nav-logout { display: none; }
    .f-sidebar .f-nav-section:not(:has(> a:not(.f-nav-logout), > form:not(.f-nav-logout))) { display: none; }
    .f-drawer-logout {
        display: block; position: sticky; bottom: 0; z-index: 1;
        margin: 12px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
        background: #0a0f1f; border-top: 1px solid rgba(201, 164, 79, 0.35);
    }
    .f-drawer-logout .f-nav-item { color: #ffb4a8; }
}

/* «بازگشت به سایت» on every login / code-entry card */
.f-auth-back {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px; min-height: 44px; padding: 10px 16px;
    border: 1px solid #d9dde6; border-radius: 10px; background: #fff;
    color: #4a5160; font-size: 14px; font-weight: 600; text-decoration: none;
}
.f-auth-back:hover { border-color: var(--f-gold); color: var(--f-navy); }

/* Photo upload field with live preview (views/filing/partials/photo_field.php + js/photo-field.js). */
.f-upl-field input[type="file"] { max-width: 100%; }
.f-upl-existing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.f-upl-preview { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.f-upl-preview[hidden] { display: none; }
.f-upl-preview img { display: block; width: 160px; max-width: 60vw; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid #dfe3ec; background: #f4f6fa; }
.f-upl-remove {
    position: absolute; top: -8px; inset-inline-start: 146px; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #fff; background: #b3261e; color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; padding: 0;
}
.f-upl-remove:hover, .f-upl-remove:focus-visible { background: #8c1d17; outline: none; }
.f-upl-caption { font-size: 12px; color: #5b6475; }
.f-upl-msg { display: block; font-size: 12px; color: #1f6f43; min-height: 0; }
.f-upl-msg.is-error { color: #b3261e; font-weight: 600; }
@media (max-width: 640px) { .f-upl-remove { inset-inline-start: calc(min(160px, 60vw) - 14px); } }

/* ---- File lists: spreadsheet-style table + filter bar (2026-09-29) ---------- */
.f-file-table { font-size: 12px; }
.f-file-table th, .f-file-table td { width: auto; padding: 7px 6px; }
.f-file-table th { font-size: 11.5px; }
.f-file-table .f-col-extra { display: none; }
.f-show-all-cols .f-file-table .f-col-extra { display: table-cell; }
.f-file-table .f-cell-clip { max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
.f-file-table .f-cell-address { max-width: 150px; }
.f-file-table .f-cell-ltr { direction: ltr; text-align: right; }
.f-file-table .f-cell-num { font-variant-numeric: tabular-nums; }
.f-file-table .f-cell-status { white-space: normal; min-width: 92px; max-width: 130px; }
.f-file-table .f-cell-status .f-badge-note { max-width: 130px; }
/* short one-line row buttons (the widest column otherwise) */
.f-file-table .f-cell-actions { white-space: nowrap; }
.f-file-table .f-cell-actions .f-row-action { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
.f-file-table tbody tr:hover { background: #fbfaf5; }
.f-cols-toggle-bar { display: flex; justify-content: flex-end; padding: 8px 10px; border-bottom: 1px solid #eef0f5; }
.f-cols-toggle { background: #fff; border: 1px solid #d9dde6; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; color: #4a5160; cursor: pointer; }
.f-cols-toggle[aria-pressed="true"] { border-color: var(--f-gold); color: var(--f-navy); background: #fffaf0; }

.f-filters { background: #fff; border: 1px solid #e5e8f0; border-radius: 12px; padding: 14px; margin: 0 0 16px; }
.f-filters-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.f-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: #5b6475; }
.f-filter > span:first-child { font-weight: 600; }
.f-filter input, .f-filter select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #d9dde6; border-radius: 8px; font: inherit; font-size: 13px; background: #fff; color: var(--f-navy); }
.f-filter-q { grid-column: span 2; }
.f-filter-range { grid-column: span 1; }
.f-range { display: flex; gap: 6px; }
.f-range input { flex: 1 1 0; }
.f-filters-more { margin-top: 12px; }
.f-filters-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--f-navy); padding: 4px 0; }
.f-filters-more[open] > summary { margin-bottom: 10px; }
.f-filter-amen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: #4a5160; }
.f-filter-amen > span { width: 100%; font-weight: 600; color: #5b6475; }
.f-filter-amen label { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; }
.f-filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.f-filters-count { font-size: 12.5px; color: #5b6475; margin-inline-start: auto; }
.f-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0; }
.f-pager a, .f-pager span { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9dde6; border-radius: 8px; background: #fff; color: var(--f-navy); text-decoration: none; font-size: 13px; }
.f-pager .is-current { background: var(--f-navy); color: #fff; border-color: var(--f-navy); }
@media (max-width: 640px) {
    .f-filter-q { grid-column: 1 / -1; }
    .f-filters-row { grid-template-columns: 1fr 1fr; }
    .f-filter-range { grid-column: 1 / -1; }
}