/* ==========================================================================
   FacilityOS — Apple Developer Edition
   White + light gray + Apple Blue. Horizontal nav. SF Pro typography.
   ========================================================================== */

:root{
    /* Apple system colors */
    --fo-bg:           #FFFFFF;
    --fo-bg-2:         #F5F5F7;     /* Apple light gray */
    --fo-bg-3:         #FAFAFA;
    --fo-surface:      #FFFFFF;
    --fo-card:         #FBFBFD;     /* faint card bg */

    --fo-ink:          #1D1D1F;     /* Apple near-black */
    --fo-ink-2:        #424245;     /* secondary text */
    --fo-muted:        #6E6E73;     /* Apple gray text */
    --fo-muted-2:      #86868B;
    --fo-line:         #D2D2D7;     /* Apple subtle gray border */
    --fo-line-soft:    #E5E5EA;
    --fo-line-faint:   #F0F0F2;

    /* Apple blue */
    --fo-blue:         #0066CC;
    --fo-blue-hover:   #004499;
    --fo-blue-light:   #E8F0FE;
    --fo-blue-bg:      #F5F8FD;

    /* Semantic (subtle Apple tones) */
    --fo-red:          #BF4040;
    --fo-red-bg:       #FDF2F2;
    --fo-orange:       #C77700;
    --fo-orange-bg:    #FFF9EB;
    --fo-green:        #1F7A3F;
    --fo-green-bg:     #EEFAF1;
    --fo-purple:       #5E3FBE;
    --fo-purple-bg:    #F4F0FD;

    /* Layout */
    --fo-header-h:     52px;       /* Apple's header height */
    --fo-sub-header-h: 56px;       /* sub-section nav */
    --fo-max-w:        1024px;     /* Apple's content max width */
    --fo-radius-sm:    8px;
    --fo-radius:       12px;
    --fo-radius-lg:    18px;
    --fo-radius-xl:    22px;
}

/* ============ RESET & BASE ============ */
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Tajawal","Segoe UI",system-ui,sans-serif;
    font-size:14px;
    line-height:1.47;
    color:var(--fo-ink);
    background:var(--fo-bg);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-feature-settings:"kern" 1;
    letter-spacing:-.003em;
}

h1,h2,h3,h4,h5,h6{
    font-family:inherit;
    color:var(--fo-ink);
    letter-spacing:-.022em;
    line-height:1.08;
    margin:0;
    font-weight:600;
}

a{
    color:var(--fo-blue);
    text-decoration:none;
    transition:color .15s ease;
}
a:hover{color:var(--fo-blue-hover);text-decoration:underline}
.text-muted{color:var(--fo-muted)!important}

::selection{background:rgba(0,102,204,.18);color:var(--fo-ink)}

/* Disable Bootstrap defaults we don't want */
.shadow,.shadow-sm,.shadow-lg{box-shadow:none!important}

/* ============ FORM CONTROLS ============ */
.form-label{
    font-weight:600;
    color:var(--fo-ink);
    margin-bottom:6px;
    font-size:13px;
    letter-spacing:-.005em;
}
.form-control,.form-select{
    border:1px solid var(--fo-line);
    border-radius:var(--fo-radius-sm)!important;
    padding:.55rem .8rem;
    background:var(--fo-surface);
    color:var(--fo-ink);
    font-size:14px;
    font-family:inherit;
    box-shadow:none!important;
    transition:border-color .15s ease, background .15s ease;
}
.form-control:hover,.form-select:hover{border-color:var(--fo-muted-2)}
.form-control:focus,.form-select:focus{
    border-color:var(--fo-blue);
    background:var(--fo-surface);
    outline:0;
    box-shadow:0 0 0 4px rgba(0,102,204,.12)!important;
}
textarea.form-control{min-height:110px;resize:vertical}
.form-control::placeholder{color:var(--fo-muted-2);opacity:1}

.input-group{
    border:1px solid var(--fo-line);
    border-radius:var(--fo-radius-sm);
    overflow:hidden;
    transition:border-color .15s, box-shadow .15s;
}
.input-group:focus-within{
    border-color:var(--fo-blue);
    box-shadow:0 0 0 4px rgba(0,102,204,.12);
}
.input-group .form-control,
.input-group .input-group-text{
    border:none!important;
    background:transparent;
    box-shadow:none!important;
}
.input-group .form-control:focus{box-shadow:none!important}
.input-group-text{
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    color:var(--fo-muted);
    padding:.55rem .75rem;
    font-size:13px;
}

.form-check-input{
    border:1.5px solid var(--fo-line)!important;
    border-radius:4px!important;
    width:16px;height:16px;
    margin-inline-end:8px;
    cursor:pointer;
}
.form-check-input:checked{background:var(--fo-blue);border-color:var(--fo-blue)!important}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(0,102,204,.18)!important}

/* ============ BUTTONS (Apple pill style) ============ */
.btn{
    border-radius:980px!important;     /* full pill */
    padding:.55rem 1.1rem;
    font-weight:500;
    font-size:14px;
    font-family:inherit;
    border:1px solid transparent;
    background:var(--fo-bg-2);
    color:var(--fo-ink);
    box-shadow:none!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:background .15s, color .15s, transform .08s, border-color .15s;
    letter-spacing:-.003em;
    line-height:1.2;
}
.btn:hover{background:var(--fo-line-soft);transform:none!important}
.btn:active{transform:scale(.98)!important}
.btn:focus{box-shadow:0 0 0 4px rgba(0,102,204,.18)!important;outline:none}

.btn-primary{
    background:var(--fo-blue);
    color:#fff!important;
    border-color:var(--fo-blue);
}
.btn-primary:hover,.btn-primary:focus{
    background:var(--fo-blue-hover);
    border-color:var(--fo-blue-hover);
    color:#fff!important;
}

.btn-light,.btn-white{
    background:var(--fo-bg-2);
    color:var(--fo-ink);
    border-color:var(--fo-bg-2)!important;
}
.btn-light:hover,.btn-white:hover{background:var(--fo-line-soft);border-color:var(--fo-line-soft)!important}

.btn-outline-primary,
.btn-outline-secondary{
    background:transparent;
    color:var(--fo-blue);
    border-color:var(--fo-blue);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover{background:var(--fo-blue);color:#fff!important;border-color:var(--fo-blue)}

.btn-success{background:var(--fo-green);color:#fff!important;border-color:var(--fo-green)}
.btn-success:hover{background:#155A2D;border-color:#155A2D}
.btn-danger{background:var(--fo-red);color:#fff!important;border-color:var(--fo-red)}
.btn-danger:hover{background:#9A3232;border-color:#9A3232}
.btn-warning{background:var(--fo-orange);color:#fff!important;border-color:var(--fo-orange)}

.btn-sm{padding:.35rem .85rem;font-size:13px}
.btn-lg{padding:.7rem 1.6rem;font-size:15px}

.btn i{font-size:1em}

/* ============ DROPDOWNS ============ */
.dropdown-menu{
    border:1px solid var(--fo-line)!important;
    border-radius:var(--fo-radius)!important;
    box-shadow:0 12px 40px rgba(0,0,0,.08)!important;
    background:var(--fo-surface);
    padding:6px;
    margin-top:6px;
}
.dropdown-item{
    border-radius:var(--fo-radius-sm)!important;
    padding:.5rem .75rem;
    font-weight:400;
    color:var(--fo-ink);
    font-size:14px;
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--fo-bg-2);color:var(--fo-ink)}
.dropdown-divider{border-color:var(--fo-line-soft);margin:6px 0}

/* ============ ALERTS ============ */
.alert{
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius)!important;
    box-shadow:none!important;
    background:var(--fo-bg-2);
    color:var(--fo-ink);
    padding:14px 18px;
    font-weight:400;
    font-size:14px;
}
.alert-success{border-color:#C5E7CF;background:var(--fo-green-bg);color:var(--fo-green)}
.alert-danger{border-color:#F2CFCF;background:var(--fo-red-bg);color:var(--fo-red)}
.alert-warning{border-color:#F2E0AC;background:var(--fo-orange-bg);color:var(--fo-orange)}
.alert-info{border-color:#CCDEF2;background:var(--fo-blue-bg);color:var(--fo-blue)}

/* ============ AUTH PAGE (Apple ID style) ============ */
.auth-page{
    min-height:100vh;
    background:var(--fo-bg);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:60px 24px 40px;
    position:relative;
}
.auth-page:before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:52px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--fo-line-soft);
    z-index:1;
}
.auth-page:after{display:none}
.auth-card{
    width:100%;
    max-width:380px;
    background:transparent;
    border:none;
    border-radius:0!important;
    box-shadow:none!important;
    padding:60px 0 40px;
    margin:0 auto;
    position:relative;
    z-index:3;
    text-align:center;
}
.auth-card:before{display:none}
.brand-mark{display:none}     /* hide custom brand - use page text instead */
.auth-card h1{
    font-size:28px;
    font-weight:600;
    letter-spacing:-.022em;
    line-height:1.14;
    margin-bottom:8px;
    color:var(--fo-ink);
}
.auth-card .text-muted,
.auth-card p{
    font-size:14px;
    color:var(--fo-muted);
    margin-bottom:32px;
    text-align:center;
}
.auth-card form{text-align:start}
.auth-card .input-group{
    border-radius:var(--fo-radius)!important;
    background:var(--fo-bg-2);
    border:1px solid var(--fo-line-soft);
    padding:0;
    transition:border-color .15s, box-shadow .15s;
}
.auth-card .input-group:focus-within{
    border-color:var(--fo-blue);
    box-shadow:0 0 0 4px rgba(0,102,204,.12);
}
.auth-card .input-group .form-control{
    background:transparent;
    padding:.85rem .95rem;
    font-size:15px;
    border:none!important;
}
.auth-card .input-group-text{background:transparent!important;color:var(--fo-muted)}
.auth-card .btn-primary{
    padding:.85rem 1.2rem;
    font-size:15px;
    font-weight:500;
    border-radius:980px!important;
}
.auth-footnote{
    background:transparent;
    border:none;
    border-top:1px solid var(--fo-line-soft);
    border-radius:0!important;
    padding:16px 0 0;
    color:var(--fo-muted);
    font-size:12px;
    text-align:center;
    margin-top:24px;
}

/* ============ APP SHELL — horizontal layout ============ */
.app-shell{display:flex;flex-direction:column;min-height:100vh;position:relative;background:var(--fo-bg)}
.sidebar-backdrop{display:none}

/* ============ HEADER — Apple Developer top nav ============ */
.apple-nav{
    position:sticky;top:0;z-index:1030;
    background:rgba(255,255,255,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--fo-line-soft);
    width:100%;
}
.apple-nav-inner{
    max-width:1240px;
    margin:0 auto;
    height:var(--fo-header-h);
    padding:0 22px;
    display:flex;
    align-items:center;
    gap:0;
}
.apple-nav-brand{
    display:flex;align-items:center;
    gap:8px;
    color:var(--fo-ink);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.022em;
    padding-inline-end:8px;
    flex-shrink:0;
    border:none;
}
.apple-nav-brand:hover{color:var(--fo-ink);text-decoration:none}
.apple-nav-brand .brand-mark-sm{
    width:18px;height:22px;
    color:var(--fo-ink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.apple-nav-brand .brand-text{font-size:14px;font-weight:400;color:var(--fo-ink)}
.apple-nav-brand .brand-text-bold{font-weight:600}

.apple-nav-menu{
    display:flex;
    align-items:center;
    gap:0;
    flex:1;
    justify-content:flex-start;
    padding-inline-start:14px;
}
.apple-nav-item{position:relative}
.apple-nav-link{
    display:flex;align-items:center;
    color:var(--fo-ink);
    padding:0 12px;
    height:var(--fo-header-h);
    font-size:12px;
    font-weight:400;
    letter-spacing:-.005em;
    cursor:pointer;
    border:none;
    background:transparent;
    transition:opacity .15s;
    text-decoration:none!important;
}
.apple-nav-link:hover{opacity:.7;color:var(--fo-ink)}
.apple-nav-link.active{font-weight:500}

/* Mega menu dropdown */
.apple-megamenu{
    position:absolute;
    top:100%;right:0;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius-lg);
    box-shadow:0 24px 60px rgba(0,0,0,.1);
    padding:18px;
    min-width:280px;
    z-index:1040;
    display:none;
    margin-top:6px;
}
.apple-nav-item:hover .apple-megamenu,
.apple-nav-item.show .apple-megamenu{display:block}
.apple-megamenu-title{
    font-size:11px;
    font-weight:600;
    color:var(--fo-muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:0 10px 8px;
    margin:0;
}
.apple-megamenu-link{
    display:flex;align-items:center;gap:10px;
    color:var(--fo-ink);
    padding:8px 10px;
    border-radius:var(--fo-radius-sm);
    font-size:14px;
    font-weight:400;
    text-decoration:none;
    transition:background .12s;
    border:none;
}
.apple-megamenu-link:hover{background:var(--fo-bg-2);color:var(--fo-ink);text-decoration:none}
.apple-megamenu-link i{color:var(--fo-blue);font-size:16px;width:20px;text-align:center}
.apple-megamenu-link.active{color:var(--fo-blue);background:var(--fo-blue-bg)}

.apple-nav-tools{
    display:flex;align-items:center;
    margin-inline-start:auto;
    gap:0;
}
.apple-nav-icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:var(--fo-header-h);
    color:var(--fo-ink);
    background:transparent;
    border:none;
    cursor:pointer;
    font-size:14px;
    transition:opacity .15s;
    position:relative;
}
.apple-nav-icon-btn:hover{opacity:.7;color:var(--fo-ink)}
.apple-nav-icon-btn .notif-dot{
    position:absolute;
    top:14px;left:14px;
    width:7px;height:7px;
    background:var(--fo-red);
    border-radius:50%;
    border:1.5px solid #fff;
}

/* Account row (under header, gray bg) */
.apple-subheader{
    background:var(--fo-bg-2);
    border-bottom:1px solid var(--fo-line-soft);
}
.apple-subheader-inner{
    max-width:1240px;
    margin:0 auto;
    padding:0 22px;
    min-height:var(--fo-sub-header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.apple-subheader-title{
    font-size:21px;
    font-weight:600;
    color:var(--fo-ink);
    letter-spacing:-.022em;
    margin:0;
}
.apple-subheader-user{
    display:flex;align-items:center;gap:8px;
    color:var(--fo-ink);
    font-size:14px;
}
.apple-subheader-user .user-name{font-weight:400;color:var(--fo-muted)}
.apple-subheader-user .user-account{font-weight:500;display:flex;align-items:center;gap:4px}

.main-content{
    margin:0;
    width:100%;
    min-height:calc(100vh - var(--fo-header-h));
    background:var(--fo-bg);
}
/* Hide standalone topbar from previous design */
.topbar{display:none!important}
.mobile-menu{display:none}

.page-wrap{
    max-width:1240px;
    margin:0 auto;
    padding:32px 22px 60px;
    width:100%;
}

.page-title{
    font-weight:600;
    margin:0;
    color:var(--fo-ink);
    letter-spacing:-.022em;
    font-size:32px;
    line-height:1.1;
}
.page-subtitle{
    color:var(--fo-muted);
    margin-top:8px;
    font-weight:400;
    font-size:15px;
    max-width:70ch;
    line-height:1.42;
}

/* Hide old sidebar elements completely */
.sidebar{display:none!important}

/* ============ CARDS — Apple style: subtle gray bg, soft corners ============ */
.card-clean{
    background:var(--fo-surface);
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius-lg)!important;
    box-shadow:none!important;
    transition:border-color .15s, background .15s;
}
a.card-clean:hover,.card-clean.hoverable:hover{
    border-color:var(--fo-line);
    background:var(--fo-card);
    transform:none!important;
    box-shadow:none!important;
}

/* Stat card */
.stat-card{
    padding:22px;
    position:relative;
    min-height:140px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--fo-bg-2);
    border:none!important;
    border-radius:var(--fo-radius-lg)!important;
}
.stat-card:before{display:none!important}
.stat-icon{
    width:40px;height:40px;
    border-radius:var(--fo-radius-sm)!important;
    display:flex;align-items:center;justify-content:center;
    background:var(--fo-blue-bg);
    color:var(--fo-blue);
    font-size:18px;
    box-shadow:none;
    border:none;
    margin-bottom:0!important;
}
.stat-value{
    font-size:38px;
    font-weight:600;
    line-height:1;
    color:var(--fo-ink);
    letter-spacing:-.028em;
    position:relative;
    margin-top:auto;
}
.stat-label{
    color:var(--fo-muted);
    font-weight:400;
    position:relative;
    margin-top:6px;
    font-size:14px;
    text-transform:none;
    letter-spacing:-.003em;
}
.stat-number{
    font-size:26px;
    font-weight:600;
    color:var(--fo-ink);
    line-height:1.1;
    letter-spacing:-.022em;
}

.kpi-mini{
    padding:18px;
    border-radius:var(--fo-radius)!important;
    background:var(--fo-bg-2);
    border:none;
    box-shadow:none;
}
.info-box{
    background:var(--fo-bg-2);
    border:none;
    border-radius:var(--fo-radius)!important;
    padding:16px 18px;
    height:100%;
    box-shadow:none;
}
.info-box small{
    display:block;
    color:var(--fo-muted);
    font-weight:400;
    margin-bottom:4px;
    font-size:13px;
}
.info-box strong{
    display:block;
    font-size:15px;
    color:var(--fo-ink);
    font-weight:600;
}
.info-box span{display:block;color:var(--fo-muted);font-size:13px;margin-top:2px}

.quick-action,
.card-clean .bg-light{
    background:var(--fo-bg-2)!important;
    border:none!important;
    border-radius:var(--fo-radius)!important;
    transition:background .15s;
}
.quick-action:hover,
.card-clean .bg-light:hover{
    background:var(--fo-line-soft)!important;
    transform:none!important;
}
.quick-action b,
.card-clean .bg-light b{color:var(--fo-ink);font-weight:500;font-size:15px}
.quick-action .text-muted,
.card-clean .bg-light .text-muted{font-size:13px}

/* ============ TABLES — Apple support style ============ */
.table-responsive{
    border-radius:var(--fo-radius-lg)!important;
    border:1px solid var(--fo-line-soft);
    background:var(--fo-surface);
    overflow:hidden;
}
.card-clean .table-responsive{border:none}
.table{
    vertical-align:middle;
    margin-bottom:0;
    color:var(--fo-ink);
    font-size:14px;
}
.table thead th{
    font-size:12px;
    color:var(--fo-muted);
    background:var(--fo-bg-2);
    border-bottom:1px solid var(--fo-line-soft);
    border-top:none;
    font-weight:500;
    white-space:nowrap;
    text-transform:none;
    letter-spacing:-.003em;
    padding:12px 16px;
}
.table td,.table th{
    padding:14px 16px;
    border-color:var(--fo-line-faint);
    border-bottom:1px solid var(--fo-line-faint);
}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--fo-bg-3)}
.table tbody tr:last-child td{border-bottom:none}
.table td{font-weight:400;color:var(--fo-ink-2)}
.table td .text-muted{font-weight:400;color:var(--fo-muted)!important;font-size:13px}
.table a.fw-bold,.table .fw-bold a{color:var(--fo-blue);font-weight:500}
.table a.fw-bold:hover,.table .fw-bold a:hover{text-decoration:underline;color:var(--fo-blue-hover)}

/* ============ BADGES — Apple pill style ============ */
.badge{
    font-weight:500;
    letter-spacing:-.003em;
    border-radius:980px!important;
    padding:3px 10px;
    font-size:12px;
    text-transform:none;
    border:none;
    font-family:inherit;
}
.badge-soft       {background:var(--fo-blue-bg);color:var(--fo-blue)}
.badge-green      {background:var(--fo-green-bg);color:var(--fo-green)}
.badge-red        {background:var(--fo-red-bg);color:var(--fo-red)}
.badge-warning-soft{background:var(--fo-orange-bg);color:var(--fo-orange)}
.badge-dark-soft  {background:var(--fo-bg-2);color:var(--fo-ink-2)}
.badge-purple     {background:var(--fo-purple-bg);color:var(--fo-purple)}

.bg-primary{background:var(--fo-blue)!important;color:#fff!important}
.bg-danger{background:var(--fo-red)!important;color:#fff!important}
.bg-success{background:var(--fo-green)!important;color:#fff!important}
.bg-warning{background:var(--fo-orange)!important;color:#fff!important}
.text-primary{color:var(--fo-blue)!important}
.text-danger{color:var(--fo-red)!important}
.text-success{color:var(--fo-green)!important}
.text-warning{color:var(--fo-orange)!important}

.status-active,.status-Active{background:var(--fo-green-bg);color:var(--fo-green);border:none}
.status-inactive,.status-Inactive{background:var(--fo-bg-2);color:var(--fo-muted);border:none}

.ticket-number{
    font-family:"SF Mono","Menlo","Monaco","Courier New",monospace;
    font-weight:500;
    color:var(--fo-blue);
    font-size:13px;
    letter-spacing:-.005em;
}

.action-btn{
    width:32px;height:32px;
    border-radius:50%!important;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;
    flex-shrink:0;
    border:none!important;
    background:transparent;
    color:var(--fo-muted);
    font-size:14px;
    transition:background .12s, color .12s;
}
.action-btn:hover{background:var(--fo-bg-2);color:var(--fo-blue);transform:none!important}
.action-btn.text-danger{color:var(--fo-muted)}
.action-btn.text-danger:hover{background:var(--fo-red-bg);color:var(--fo-red)}

.toolbar{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:24px;
}

.filter-card{
    background:var(--fo-bg-2);
    border:none;
    border-radius:var(--fo-radius-lg)!important;
    padding:20px;
    box-shadow:none;
}
.filter-card .form-control,
.filter-card .form-select{
    background:var(--fo-surface);
    border:1px solid var(--fo-line-soft);
}

.permission-group{
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius)!important;
    padding:18px;
    background:var(--fo-surface);
    box-shadow:none;
}

.empty-state{
    padding:60px 20px;
    text-align:center;
    color:var(--fo-muted);
    font-weight:400;
    font-size:15px;
}
.empty-state:before{
    content:"";
    display:block;
    width:48px;height:48px;
    margin:0 auto 14px;
    background:var(--fo-line-soft);
    border-radius:50%;
    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E") center / 60% no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.form-hint{
    font-size:13px;
    color:var(--fo-muted);
    font-weight:400;
    margin-top:4px;
}

/* ============ DETAILS GRID ============ */
.details-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}
.detail-box{
    padding:16px 18px;
    border-radius:var(--fo-radius)!important;
    background:var(--fo-bg-2);
    border:none;
}
.detail-label{
    font-size:13px;
    color:var(--fo-muted);
    font-weight:400;
    margin-bottom:4px;
}
.detail-value{
    font-weight:500;
    color:var(--fo-ink);
    font-size:15px;
    line-height:1.3;
}

.timeline{position:relative;padding-right:24px}
.timeline:before{
    content:"";
    position:absolute;
    right:7px;top:8px;bottom:8px;
    width:2px;
    background:var(--fo-line-soft);
}
.timeline-item{position:relative;margin-bottom:18px;padding:0}
.timeline-item:before{
    content:"";
    position:absolute;
    right:-21px;top:6px;
    width:12px;height:12px;
    border-radius:50%!important;
    background:var(--fo-blue);
    border:2.5px solid var(--fo-surface);
    box-shadow:0 0 0 1px var(--fo-line-soft);
}

/* ============ UPLOADS & GALLERY ============ */
.upload-box{
    border:2px dashed var(--fo-line);
    border-radius:var(--fo-radius)!important;
    background:var(--fo-bg-2);
    padding:24px;
}
.asset-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:14px;
}
.asset-thumb{
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius)!important;
    background:var(--fo-surface);
    padding:10px;
    box-shadow:none;
}
.asset-thumb img{width:100%;height:130px;object-fit:cover;border-radius:var(--fo-radius-sm)!important}

.qr-box{
    border:2px dashed var(--fo-line);
    background:var(--fo-bg-2);
    border-radius:var(--fo-radius)!important;
    padding:20px;
}
.sticky-lg-top{z-index:5}
.text-break{word-break:break-word}

.comment-card{
    border:1px solid var(--fo-line-soft);
    background:var(--fo-surface);
    border-radius:var(--fo-radius)!important;
    padding:16px 18px;
    box-shadow:none;
}

/* ============ NOTIFICATIONS ============ */
.notification-dot{
    position:absolute;
    top:7px;left:7px;
    width:8px;height:8px;
    background:var(--fo-red);
    border-radius:50%!important;
    border:1.5px solid var(--fo-surface);
    box-shadow:none;
}
.notification-dropdown .dropdown-item{white-space:normal}
.notification-list{display:flex;flex-direction:column}
.notification-row{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px 18px;
    border-bottom:1px solid var(--fo-line-faint);
    background:var(--fo-surface);
}
.notification-row:last-child{border-bottom:none}
.notification-row.unread{background:var(--fo-blue-bg)}
.notification-icon{
    width:40px;height:40px;
    border-radius:50%!important;
    background:var(--fo-blue-bg);
    border:none;
    color:var(--fo-blue);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    font-size:16px;
}
.notification-setting-card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius)!important;
    padding:18px;
    background:var(--fo-surface);
    height:100%;
    cursor:pointer;
    transition:border-color .15s;
    box-shadow:none;
}
.notification-setting-card:hover{border-color:var(--fo-blue)}
.notification-setting-card .form-check-input{margin-top:4px;flex-shrink:0}

/* ============ CLIENT PORTAL HERO ============ */
.client-hero{
    background:var(--fo-bg-2);
    color:var(--fo-ink);
    border-radius:var(--fo-radius-xl)!important;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    box-shadow:none;
    overflow:hidden;
    position:relative;
    border:none;
}
.client-hero:after{display:none}
.client-hero h1,.client-hero h2,.client-hero h3{color:var(--fo-ink)}
.client-hero .btn-outline-light{
    border:1px solid var(--fo-line);
    color:var(--fo-ink);
    background:var(--fo-surface);
    border-radius:980px!important;
}
.client-hero .btn-outline-light:hover{background:var(--fo-ink);color:#fff;border-color:var(--fo-ink)}

/* ============ PAGINATION ============ */
.pagination{gap:4px}
.page-item .page-link{
    border:1px solid var(--fo-line-soft);
    border-radius:var(--fo-radius-sm)!important;
    color:var(--fo-ink);
    background:var(--fo-surface);
    padding:.45rem .8rem;
    font-weight:400;
    font-size:14px;
    box-shadow:none!important;
}
.page-item .page-link:hover{background:var(--fo-bg-2);border-color:var(--fo-line);color:var(--fo-ink)}
.page-item.active .page-link{background:var(--fo-blue);color:#fff;border-color:var(--fo-blue)}
.page-item.disabled .page-link{color:var(--fo-muted-2);background:var(--fo-surface);border-color:var(--fo-line-faint)}

/* ============ MODAL ============ */
.modal-content{
    border:1px solid var(--fo-line-soft)!important;
    border-radius:var(--fo-radius-lg)!important;
    box-shadow:0 30px 80px rgba(0,0,0,.12)!important;
}
.modal-header{border-bottom:1px solid var(--fo-line-soft);padding:18px 24px}
.modal-footer{border-top:1px solid var(--fo-line-soft);padding:14px 24px}
.modal-title{font-weight:600;letter-spacing:-.022em}

/* ============ PRINT ============ */
@media print{
    .apple-nav,.apple-subheader,.btn,.dropdown{display:none!important}
    .main-content{margin:0!important;width:100%!important}
    .page-wrap{padding:0!important;max-width:none}
    .card-clean{box-shadow:none!important;border:1px solid #ddd!important}
    body{background:#fff}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1199px){
    .page-wrap{padding:28px 20px 60px}
    .stat-value{font-size:32px}
}
@media (max-width:991px){
    .apple-nav-menu{display:none}
    .apple-nav-menu.show{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        position:fixed;
        top:var(--fo-header-h);
        right:0;bottom:0;
        width:min(86vw,320px);
        background:rgba(255,255,255,.96);
        backdrop-filter:saturate(180%) blur(20px);
        padding:18px 14px;
        overflow-y:auto;
        border-inline-start:1px solid var(--fo-line-soft);
    }
    .apple-nav-link{
        height:auto;
        padding:14px 14px;
        font-size:15px;
        width:100%;
        border-bottom:1px solid var(--fo-line-faint);
    }
    .apple-megamenu{
        position:static;
        display:block;
        border:none;
        box-shadow:none;
        backdrop-filter:none;
        background:transparent;
        margin:0;
        padding:0 0 12px 16px;
        min-width:0;
    }
    .apple-megamenu-link{font-size:14px;padding:8px 12px}

    .mobile-menu{display:inline-flex}
    .apple-subheader-inner{flex-direction:column;align-items:flex-start;padding:12px 22px}
    .apple-subheader-title{font-size:18px}
    .page-title{font-size:26px}
    .auth-card{padding:48px 0 32px;max-width:340px}
}
@media (max-width:767px){
    body{background:var(--fo-bg)}
    .page-wrap{padding:20px 16px 40px}
    .page-title{font-size:24px}
    .page-subtitle{font-size:14px}
    .stat-card{min-height:auto;padding:18px}
    .stat-icon{width:36px;height:36px}
    .stat-value{font-size:30px}
    .table td,.table th{padding:10px 12px}
    .client-hero{display:block;padding:24px}
    .client-hero .d-flex{margin-top:18px}
    .notification-dropdown{width:calc(100vw - 28px)!important}
    .details-grid{grid-template-columns:1fr}
    .apple-nav-inner{padding:0 14px}
    .apple-subheader-inner{padding:12px 14px}
}
@media (max-width:575px){
    .auth-card{padding:36px 16px 24px}
    .toolbar{align-items:stretch}
    .toolbar>div{width:100%}
    .toolbar .d-flex{width:100%}
    .toolbar .btn{width:100%}
}
/* ============ SYSTEM HEALTH PILL BADGE ============ */
.health-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px 6px 12px;
    border-radius:980px;
    background:var(--fo-bg-2);
    border:1px solid var(--fo-line-soft);
    font-size:13px;
    font-weight:500;
    color:var(--fo-ink);
    letter-spacing:-.003em;
    line-height:1;
    position:relative;
    overflow:hidden;
    transition:background .2s, border-color .2s;
}
.health-pill-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--health-color, var(--fo-muted));
    box-shadow:0 0 0 0 var(--health-color, var(--fo-muted));
    animation:health-pulse 2.2s ease-out infinite;
    flex-shrink:0;
}
.health-pill-label{
    color:var(--fo-muted);
    font-weight:400;
    font-size:12px;
}
.health-pill-value{
    color:var(--health-color, var(--fo-ink));
    font-weight:600;
    font-variant-numeric:tabular-nums;
    min-width:34px;
    text-align:start;
}
.health-counter{font-variant-numeric:tabular-nums}

/* Inner bar that fills */
.health-pill-bar{
    position:absolute;
    bottom:0;left:0;right:0;
    height:2px;
    background:transparent;
    pointer-events:none;
}
.health-pill-bar-fill{
    display:block;
    height:100%;
    width:0;
    background:var(--health-color);
    transition:width 1.6s cubic-bezier(.22,.61,.36,1);
    transition-delay:.15s;
    border-radius:0 980px 980px 0;
}
.health-pill.animate-in .health-pill-bar-fill{width:var(--health-w)}

/* Color tiers */
.health-pill.health-healthy {--health-color:var(--fo-green, #1F7A3F)}
.health-pill.health-good    {--health-color:var(--fo-blue, #0066CC)}
.health-pill.health-warning {--health-color:var(--fo-orange, #C77700)}
.health-pill.health-critical{--health-color:var(--fo-red, #BF4040)}

.health-pill.health-healthy {background:#EEFAF1; border-color:#C5E7CF}
.health-pill.health-good    {background:#F5F8FD; border-color:#CCDEF2}
.health-pill.health-warning {background:#FFF9EB; border-color:#F2E0AC}
.health-pill.health-critical{background:#FDF2F2; border-color:#F2CFCF}

@keyframes health-pulse{
    0%   { box-shadow:0 0 0 0 var(--health-color); opacity:1 }
    70%  { box-shadow:0 0 0 6px transparent; opacity:.75 }
    100% { box-shadow:0 0 0 0 transparent; opacity:1 }
}

@media (max-width:575px){
    .health-pill{padding:5px 10px 5px 9px;font-size:12px}
    .health-pill-label{display:none}
}