*{
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.home-cards {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075), inset 0 0 1rem 0px rgb(0 0 0 / 3%) !important;
    border: 5px solid #fff !important;
    transition: all 300ms;
}
.home-cards:hover {
    transform: translateY(-3px);
    transition: all 300ms;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075), 0 0 0px 7px #f4f2d7 !important
}
.navbar {
    z-index: 99;
}
.navbar-toggler {
    filter: invert(1)
}
.table-responsive{
    padding-bottom: 120px
}

body{
    font-size: 16px;
    line-height: 1.5;
    color: #091935
}
img {
    width: 100%;
    height: auto;
    user-select: none
}
a{
    color: inherit;
    text-decoration: none
}
ul, li{
    list-style: none
}
input::placeholder, textarea::placeholder{
    color: #ACACAC !important
}
input, textarea, select {
    font-size: 14px !important;
    padding: 12px !important;
    border: 1px solid rgb(0 0 0 / 8%) !important;
    box-shadow: -1px 2px 2px rgb(0 0 0 / 3%);
}
button{
    border:0
}
label{
    color: #374151;
    font-size:14px
}
.form-control:focus, .form-select:focus{
    box-shadow: none !important;
    border-color: #124e4a !important
}
.ck a {
    color: var(--bs-primary);
    text-decoration: underline
}

.btn-green{
    background: #134e4a !important;
    color: #d4f478;
}
._btn:hover{
    background: #134e4a !important;
    color: #d4f478;
}


/*
|
|----------------------------------------------------------------------------------
|   Custom Classes
|----------------------------------------------------------------------------------
|
*/
.center{
    display: flex;
    align-items: center;
    justify-content: center
}
.space-between{
    display: flex;
    align-items: center;
    justify-content: space-between
}
.align-center{
    display: flex;
    align-items: center
}

.rounded-15{
    border-radius: 15px !important
}
.rounded-top-15{
    border-radius: 15px 15px 0 0 !important
}
.py-6{padding-top: 6rem !important; padding-bottom: 6rem !important}

@media (max-width: 992px) {
    .py-6{padding-top: 5rem !important; padding-bottom: 5rem !important}
}
.pt-6{padding-top: 6rem !important}
.pb-6{padding-bottom: 6rem !important}

.w-h-16{width: 16px;height: 16px}
.w-h-30{width: 30px;height: 30px}
.w-h-35{width: 35px;height: 35px}
.w-h-40{width: 40px;height: 40px}
.w-h-50{width: 50px;height: 50px}

.fs-10{font-size: 10px !important}
.fs-11{font-size: 11px !important}
.fs-12{font-size: 12px !important}
.fs-13{font-size: 13px !important}
.fs-14{font-size: 14px !important}
.fs-15{font-size: 15px !important}
.fs-16{font-size: 16px !important}
.fs-17{font-size: 17px !important}
.fs-18{font-size: 18px !important}
.fs-19{font-size: 19px !important}
.fs-20{font-size: 20px !important}
.fs-21{font-size: 21px !important}

/* Backgrounds */
.bg-dark-1{background: #091935 !important}
.bg-dark-2{background: #374151}
.bg-dark-3{background: #6B7280}
.bg-dark-4{background: #9095a0}

.bg-smoke-1{background: #E4E4E4}
.bg-smoke-2{background: #F5F5F5}

.bg-gold-1{background: #124e4a}
.bg-gold-2{background: #FBF3E7}
.bg-red-1{background:  #790407}

/* Text */
.text-dark-1{color: #091935}
.text-dark-2{color: #374151}
.text-dark-3{color: #6B7280}
.text-dark-4{color: #9095a0}

.text-smoke-1{color: #E4E4E4}
.text-smoke-2{color: #F5F5F5}

.text-gold-1{color: #124e4a}
.text-gold-2{color: #FBF3E7}
.text-red-1{color:  #790407}


/*
|
|----------------------------------------------------------------------------------
|   Navbar
|----------------------------------------------------------------------------------
|
*/
.navbar-brand {
  z-index: 1
}
.sidebar .nav-item a {
    color: #374151;
    font-size: 15px;
    margin-bottom: 10px;
    border-radius: 10px
}
@media (max-width: 992px) {

.sidebar {
    transition: transform 0.3s ease;
    transform: translateX(-100%);
}
.sidebar.show {
    transform: translateX(0);
    width: 75%;
}
}
.sidebar .nav-item a:hover {
    color: var(--bs-primary) !important;
    background: #faf9e3;
    box-shadow: 0px 0px 0px 0.1px #124e4a;
}
.sidebar .nav-item a.active {
    background: #faf9e3;
    border: 1px solid #124e4a;
    box-shadow: -2px 3px #124e4a;
}

tr:last-child td{ border-bottom:0}
.table td{
    padding: .7rem .5rem
}
.table th {
    padding: 20px;
    font-size: 14px !important;
    font-weight: 500;
    background: #ffffff;
    color: #6c757d;
}

.table tr:hover td{
    background: #f9f9f9;
}

.page-item:first-child .page-link{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px
}
.page-item:last-child .page-link {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: #ffffff !important; 
    transition: background-color 5000s ease-in-out 0s
}

.primary-btn-hover:hover {
    color: var(--bs-primary);
    box-shadow: 0 0 0px 1px var(--bs-primary);
    background: transparent !important
}
.dark-btn-hover:hover {
    color: #091935 !important;
    box-shadow: 0 0 0px 1px #091935;
    background: transparent !important
}

.navbar a.nav-link:hover {
    color: var(--bs-primary) !important
}
.link-hover:hover {
    color: var(--bs-primary) !important
}

.sidebar::-webkit-scrollbar{width:0px }
.no-arrow::after{
    display: none !important;
}
.dropdown-item{
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important
}
/* Simple spin utility for loading icons (used by searchable-select and form submit states) */
.ph-spin{
    display: inline-block;
    animation: ph-spin-anim 0.9s linear infinite;
}
@keyframes ph-spin-anim{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* =====================================================================
   DESIGN SYSTEM v2 — modern, mobile/tablet-first responsive shell
   Scoped to layout/shell selectors only (navbar, sidebar, bottom nav,
   buttons, forms, tables) so it upgrades every existing page globally
   without needing to touch each page's markup.
   ===================================================================== */

:root{
    --rf-primary: #124e4a;
    --rf-primary-dark: #0b332f;
    --rf-primary-soft: #eaf3f1;
    --rf-accent: #d4f479;
    --rf-bg: #faf9e3;
    --rf-surface: #ffffff;
    --rf-border: #eceadb;
    --rf-text: #1c1c14;
    --rf-text-muted: #6f6e5f;
    --rf-danger: #dc3545;
    --rf-radius-sm: 10px;
    --rf-radius-md: 16px;
    --rf-radius-lg: 22px;
    --rf-shadow-sm: 0 1px 2px rgba(20,20,10,.05);
    --rf-shadow-md: 0 10px 28px rgba(18,78,74,.10);
    --rf-navbar-h: 64px;
    --rf-bottomnav-h: 66px;
}

/* ---- Base polish ---- */
body{
    -webkit-font-smoothing: antialiased;
    background: var(--rf-bg);
}

/* ---- Buttons ---- */
.btn-green,
._btn{
    border-radius: 999px;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.btn-green{
    background: var(--rf-primary) !important;
    color: var(--rf-accent) !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(18,78,74,.20);
}
.btn-green:active{ transform: translateY(1px); }
._btn{
    background: #fff;
}
._btn:hover{
    background: var(--rf-primary) !important;
    color: var(--rf-accent) !important;
}

/* ---- Forms ---- */
.form-control, .form-select{
    border-radius: var(--rf-radius-sm) !important;
    border-color: var(--rf-border) !important;
    background: #fff;
}
.form-control:focus, .form-select:focus{
    border-color: var(--rf-primary) !important;
    box-shadow: 0 0 0 3px rgba(18,78,74,.12) !important;
}
label{
    font-weight: 600;
    color: var(--rf-text);
}

/* ---- Tables ---- */
.table th{
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12px !important;
    color: var(--rf-text-muted);
    background: var(--rf-surface);
}
.table td{ vertical-align: middle; }
.table tr:hover td{ background: var(--rf-primary-soft); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar.bg-primary{
    background: var(--rf-primary) !important;
    min-height: var(--rf-navbar-h);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.navbar .open-menu{
    border: 0;
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.navbar .open-menu:focus{ box-shadow: none; }
.navbar .open-menu .navbar-toggler-icon{
    width: 1.3em;
    height: 1.3em;
}

/* =====================================================================
   SIDEBAR (desktop ≥992px permanent, <992px slide-in drawer)
   ===================================================================== */
.sidebar{
    background: var(--rf-surface) !important;
    border-inline-end: 1px solid var(--rf-border);
    box-shadow: none !important;
}
.sidebar .nav-item a{
    color: var(--rf-text-muted);
    font-weight: 600;
    border-radius: var(--rf-radius-sm);
    margin-bottom: 4px;
}
.sidebar .nav-item a:hover{
    color: var(--rf-primary) !important;
    background: var(--rf-primary-soft);
    box-shadow: none;
}
.sidebar .nav-item a.active{
    background: var(--rf-primary);
    color: #fff !important;
    border: 0;
    box-shadow: 0 6px 16px rgba(18,78,74,.22);
}
.sidebar .nav-item a.active i{ color: var(--rf-accent); }

/* Mobile / tablet drawer behaviour */
@media (max-width: 991.98px){
    .sidebar{
        transition: transform .25s ease;
        transform: translateX(-105%);
        width: 82%;
        max-width: 340px;
        border-radius: 0 var(--rf-radius-lg) var(--rf-radius-lg) 0;
        z-index: 1045;
    }
    html[dir="rtl"] .sidebar{ transform: translateX(105%); border-radius: var(--rf-radius-lg) 0 0 var(--rf-radius-lg); }
    .sidebar.show{ transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.25); }

    /* leave room for the fixed bottom tab bar so content never hides behind it */
    .main-content{
        padding-bottom: calc(var(--rf-bottomnav-h) + 90px) !important;
    }
}

.sidebar-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,15,10,.45);
    z-index: 1040;
}
.sidebar-overlay.show{ display: block; }

/* =====================================================================
   BOTTOM TAB BAR (mobile & tablet only)
   ===================================================================== */
.bottom-nav{
    display: none;
}
@media (max-width: 991.98px){
    .bottom-nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        height: var(--rf-bottomnav-h);
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--rf-surface);
        border-top: 1px solid var(--rf-border);
        box-shadow: 0 -8px 24px rgba(0,0,0,.06);
        z-index: 1035;
    }
    .bottom-nav-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        color: var(--rf-text-muted);
        font-size: 11px;
        font-weight: 600;
        padding: 6px 2px;
        border-radius: 12px;
    }
    .bottom-nav-item i{ font-size: 1.35rem; }
    .bottom-nav-item.active{ color: var(--rf-primary); }
    .bottom-nav-fab{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--rf-primary);
        color: var(--rf-accent);
        margin-top: -26px;
        box-shadow: 0 8px 20px rgba(18,78,74,.35);
        flex-shrink: 0;
    }
    .bottom-nav-fab i{ font-size: 1.6rem; }
}

/* =====================================================================
   Custom RTL-safe checkbox & switch controls (global)
   Native Bootstrap checkbox/switch rendering breaks under this theme's
   RTL setup (non-RTL bootstrap.min.css + dir=rtl), so these fully custom
   controls are used everywhere instead of .form-check-input directly.
   Usage:
     <label class="cc-checkbox">
        <input type="checkbox" ...>
        <span class="box"><svg viewBox="0 0 16 16"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
     </label>
     <label class="cc-switch">
        <input type="checkbox" ...>
        <span class="track"><span class="thumb"></span></span>
     </label>
   ===================================================================== */
.cc-checkbox{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
    cursor:pointer;
}
.cc-checkbox input{
    position:absolute;
    inset:0;
    opacity:0;
    margin:0;
    cursor:pointer;
}
.cc-checkbox .box{
    width:20px;
    height:20px;
    border:1.5px solid #d3d1c4;
    border-radius:6px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, border-color .15s ease;
}
.cc-checkbox .box svg{
    width:12px;
    height:12px;
    color:#fff;
    opacity:0;
    transform:scale(.5);
    transition:opacity .15s ease, transform .15s ease;
}
.cc-checkbox input:checked + .box{
    background:#124e4a;
    border-color:#124e4a;
}
.cc-checkbox input:checked + .box svg{
    opacity:1;
    transform:scale(1);
}
.cc-checkbox input:focus-visible + .box{
    box-shadow:0 0 0 3px rgba(18,78,74,.18);
}
.cc-checkbox:hover .box{ border-color:#124e4a; }

.cc-switch{
    position:relative;
    display:inline-flex;
    align-items:center;
    width:40px;
    height:23px;
    flex-shrink:0;
    cursor:pointer;
}
.cc-switch input{
    position:absolute;
    inset:0;
    opacity:0;
    margin:0;
    cursor:pointer;
    z-index:1;
}
.cc-switch input:disabled{ cursor:not-allowed; }
.cc-switch .track{
    width:100%;
    height:100%;
    background:#dedcd0;
    border-radius:999px;
    position:relative;
    transition:background .2s ease;
}
.cc-switch .thumb{
    position:absolute;
    top:3px;
    inset-inline-start:3px;
    width:17px;
    height:17px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:inset-inline-start .2s ease;
}
.cc-switch input:checked ~ .track{ background:#1a9e6f; }
.cc-switch input:checked ~ .track .thumb{ inset-inline-start:calc(100% - 20px); }
.cc-switch input:focus-visible ~ .track{ box-shadow:0 0 0 3px rgba(26,158,111,.2); }
.cc-switch input:disabled ~ .track{ opacity:.5; }

/* =====================================================================
   Pattern Lock widget
   ===================================================================== */
.pattern-lock-wrap{ display:inline-block; text-align:center; }
.pattern-lock-svg{ width:180px; height:180px; touch-action:none; background:#fbfbf7; border:1px solid #ecebe3; border-radius:16px; cursor:pointer; }
.pattern-lock-dot{ fill:#fff; stroke:#c9c7b8; stroke-width:2; transition:fill .15s ease, stroke .15s ease; }
.pattern-lock-dot.active{ fill:#124e4a; stroke:#124e4a; }
.pattern-lock-path{ fill:none; stroke:#124e4a; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }

/* =====================================================================
   Numbered pagination (Pagination() in app/core/app.php)
   ===================================================================== */
.pg-numbered .page-item .page-link{
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid #ecebe3;
    color: #6b6a5c;
    font-size: .85rem;
    font-weight: 600;
    padding: 0;
}
.pg-numbered .page-item .page-link:hover{ background:#f3f2ea; color:#1c1c14; }
.pg-numbered .page-item.active .page-link{
    background: #124e4a;
    border-color: #124e4a;
    color: #fff;
}
.pg-numbered .page-item.disabled .pg-ellipsis{
    border: 0; background: transparent; color: #b7b5a4;
}

/* =====================================================================
   Repairs list card: filter pills + client photo
   ===================================================================== */
.filter-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #ecebe3;
    background: #fff;
    color: #6b6a5c;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.filter-pill:hover{ color:#1c1c14; border-color:#d8d6c9; }
.filter-pill .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.filter-pill.active{ background:#124e4a; border-color:#124e4a; color:#fff; }
.filter-pill.active .dot{ background:#fff !important; }

.client-cell{ display:flex; align-items:center; gap:10px; }
.client-photo{
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.client-photo img{ width:100%; height:100%; object-fit:contain; }
.client-photo i{ font-size: 1.8rem; color: #b7b5a4; }

/* =====================================================================
   Accessory / fault-type pill checkboxes
   ===================================================================== */
.cc-checkbox-pill{
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #ecebe3;
    background: #fff;
    color: #6b6a5c;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cc-checkbox-pill:has(input:checked){
    background: #124e4a;
    border-color: #124e4a;
    color: #fff;
}

.status-badge-trigger{ cursor: pointer; text-decoration: none; display: inline-block; }
.status-dropdown .dropdown-menu{ min-width: 160px; }

.header-icon-btn{
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    transition: background .15s ease;
}
.header-icon-btn:hover{ background: rgba(255,255,255,.22); color: #fff; }

/* =====================================================================
   Dashboard themes (Gold-plan perk) - each theme has its own real
   visual identity (colors, card treatment, typography), not just a
   different arrangement of the same white cards.
   ===================================================================== */

/* classic: no overrides needed, this is the current default light layout */

/* =====================================================================
   compact -> "Executive" - a dark, premium stat panel beside the table
   ===================================================================== */
.dash-theme-compact{
    display:grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
}
.dash-theme-compact .dash-table-block{
    grid-column: 1; grid-row: 1;
    border: 1px solid #ecebe3;
    box-shadow: none !important;
}
.dash-theme-compact .dash-kpis-block{
    grid-column: 2; grid-row: 1;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0 !important;
    background: linear-gradient(160deg, #0c322f 0%, #123b35 100%);
    border-radius: 20px;
    padding: 16px;
}
.dash-theme-compact .dash-kpis-block > .col,
.dash-theme-compact .dash-kpis-block > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.dash-theme-compact .home-cards{
    flex-direction: row;
    padding: 12px !important;
    text-align: start;
    background: rgba(255,255,255,.06) !important;
    box-shadow: none !important;
    color: #fff !important;
}
.dash-theme-compact .home-cards:hover{ background: rgba(255,255,255,.11) !important; }
.dash-theme-compact .home-cards h5{ color: #d4f478 !important; font-weight: 800; }
.dash-theme-compact .home-cards span{ color: rgba(255,255,255,.65) !important; }
.dash-theme-compact .home-cards svg,
.dash-theme-compact .home-cards .w-h-60{ width: 38px !important; height: 38px !important; flex-shrink: 0; }
.dash-theme-compact .dash-kpis-block::before{
    content: "";
    display: block;
}
@media (max-width: 991.98px){
    .dash-theme-compact{ grid-template-columns: 1fr; }
    .dash-theme-compact .dash-kpis-block{ flex-direction: row; flex-wrap: wrap; }
    .dash-theme-compact .dash-kpis-block > .col{ flex: 0 0 50% !important; max-width: 50% !important; }
}

/* =====================================================================
   grid -> "Vibrant" - bold colorful gradient KPI cards, modern feel
   ===================================================================== */
.dash-theme-grid .dash-kpis-block{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 22px 0 !important;
}
.dash-theme-grid .dash-kpis-block > .col,
.dash-theme-grid .dash-kpis-block > [class*="col-"]{
    flex: none !important; max-width: none !important; width: auto !important;
}
.dash-theme-grid .home-cards{
    flex-direction: column;
    align-items: flex-start !important;
    box-shadow: 0 8px 20px rgba(20,20,10,.10) !important;
    border: 0 !important;
    padding: 18px !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}
.dash-theme-grid .home-cards h5,
.dash-theme-grid .home-cards span{ color: #fff !important; position: relative; z-index: 1; }
.dash-theme-grid .home-cards h5{ font-size: 1.7rem !important; font-weight: 800; }
.dash-theme-grid .home-cards span{ opacity: .85; }
.dash-theme-grid .home-cards svg{ position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.dash-theme-grid .home-cards::after{
    content: "";
    position: absolute; inset: 0;
    opacity: .18;
    background: radial-gradient(circle at 90% 10%, #fff 0%, transparent 55%);
}
.dash-theme-grid .col:nth-child(1) .home-cards{ background: linear-gradient(135deg, #22a55e, #0f7a41); }
.dash-theme-grid .col:nth-child(2) .home-cards{ background: linear-gradient(135deg, #ff7a6e, #dc3545); }
.dash-theme-grid .col:nth-child(3) .home-cards{ background: linear-gradient(135deg, #8b7ef0, #5b4bce); }
.dash-theme-grid .col:nth-child(4) .home-cards{ background: linear-gradient(135deg, #4fc3e8, #0ea5c9); }
.dash-theme-grid .col:nth-child(5) .home-cards{ background: linear-gradient(135deg, #ffb84f, #f39c12); }
.dash-theme-grid .col:nth-child(6) .home-cards{ background: linear-gradient(135deg, #2dce98, #124e4a); }
.dash-theme-grid .dash-table-block{
    border: 0;
    box-shadow: 0 4px 16px rgba(20,20,10,.08) !important;
    border-radius: 20px;
}
@media (max-width: 767.98px){
    .dash-theme-grid .dash-kpis-block{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   minimal -> fully white, zero shadows, thin divider lines only
   ===================================================================== */
.dash-theme-minimal .home-cards{
    box-shadow: none !important;
    border: 1px solid #e5e3d6;
    border-radius: 10px !important;
}
.dash-theme-minimal .home-cards:hover{ border-color: #1c1c14; }
.dash-theme-minimal .dash-table-block{
    box-shadow: none !important;
    border: 1px solid #e5e3d6;
    border-radius: 10px !important;
}
.dash-theme-minimal .filter-pill{ box-shadow: none; }
.dash-theme-minimal .table th{ border-bottom: 2px solid #1c1c14 !important; }
.dash-theme-minimal .table td{ border-bottom: 1px solid #eeede4 !important; }

/* =====================================================================
   glass -> frosted translucent cards with a soft glowing border, over
   a gentle gradient backdrop so the blur actually reads as "glass"
   ===================================================================== */
.dash-theme-glass{
    background: linear-gradient(135deg, #dfe9ff 0%, #f1e6ff 50%, #e0f7f0 100%);
    border-radius: 24px;
    padding: 20px;
    margin: -8px;
}
.dash-theme-glass .home-cards,
.dash-theme-glass .dash-table-block,
.dash-theme-glass .filter-pill{
    background: rgba(255,255,255,.45) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.6) !important;
    box-shadow: 0 8px 32px rgba(80,60,180,.10), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.dash-theme-glass .home-cards:hover{ background: rgba(255,255,255,.6) !important; }
.dash-theme-glass .table td, .dash-theme-glass .table th{ border-color: rgba(255,255,255,.5) !important; }

/* =====================================================================
   paper -> warm cream tones, soft "lifted paper" shadow, amber accents
   ===================================================================== */
.dash-theme-paper{
    background: #efe8d8;
    border-radius: 24px;
    padding: 20px;
    margin: -8px;
}
.dash-theme-paper .home-cards,
.dash-theme-paper .dash-table-block,
.dash-theme-paper .filter-pill{
    background: #faf6ec !important;
    border: 1px solid #ddceac !important;
    box-shadow: 0 3px 0 #ddceac, 0 6px 14px rgba(120,90,40,.10) !important;
    color: #4a3d24;
}
.dash-theme-paper .home-cards h5{ color: #5c4522 !important; }
.dash-theme-paper .home-cards span{ color: #8a7550 !important; }
.dash-theme-paper .table th{ color: #8a7550 !important; }
.dash-theme-paper .table td{ border-color: #e6dbc0 !important; }
.dash-theme-paper .filter-pill.active{ background: #8a6d3b !important; border-color: #8a6d3b !important; }

/* =====================================================================
   dark -> full dark mode across the whole dashboard, not just a panel
   ===================================================================== */
.dash-theme-dark{
    background: #0b1220;
    border-radius: 24px;
    padding: 20px;
    margin: -8px;
}
.dash-theme-dark .home-cards,
.dash-theme-dark .dash-table-block{
    background: #141b2d !important;
    border: 1px solid #232d47;
    box-shadow: none !important;
    color: #e6e8ee;
}
.dash-theme-dark .home-cards:hover{ border-color: #2dd4a7; }
.dash-theme-dark .home-cards h5{ color: #fff !important; }
.dash-theme-dark .home-cards span{ color: #8891a8 !important; }
.dash-theme-dark .table{ color: #e6e8ee !important; }
.dash-theme-dark .table th{ color: #8891a8 !important; border-color: #232d47 !important; }
.dash-theme-dark .table td{ border-color: #232d47 !important; }
.dash-theme-dark .filter-pill{ background: #141b2d !important; border-color: #232d47 !important; color: #e6e8ee !important; }
.dash-theme-dark .filter-pill.active{ background: #2dd4a7 !important; border-color: #2dd4a7 !important; color: #04231b !important; }
.dash-theme-dark .client-photo i{ color: #8891a8 !important; }