/* =====================================================================
   ZETRIK PANEL — DESIGN SYSTEM
   =====================================================================
   Ye ek file poore panel ka look tay karti hai. Vexel theme ke upar
   lagti hai (layouts/app.blade.php me sabse aakhri CSS).

   Rang / font / gol kone badalne hain?  ->  neeche :root me.
   Baaki sab isi se banta hai.
   ===================================================================== */

:root {
    /* ---- brand ---- */
    --z-primary:        #2a78d6;
    --z-primary-600:    #1c5cab;
    --z-primary-700:    #104281;
    --z-primary-soft:   #e8f1fc;
    --z-primary-rgb:    42, 120, 214;

    /* ---- status (badge, alert, card accent) ---- */
    --z-success:        #16a34a;   --z-success-soft:  #e6f6ec;
    --z-warning:        #d97706;   --z-warning-soft:  #fdf1dc;
    --z-danger:         #dc2626;   --z-danger-soft:   #fdeaea;
    --z-info:           #0284c7;   --z-info-soft:     #e3f3fc;
    --z-purple:         #7c3aed;   --z-purple-soft:   #f0e8fd;
    --z-teal:           #0d9488;   --z-teal-soft:     #e0f4f2;

    /* ---- ink ---- */
    --z-ink:            #0f172a;
    --z-ink-2:          #334155;
    --z-muted:          #64748b;
    --z-faint:          #94a3b8;

    /* ---- surface ---- */
    --z-bg:             #f3f5f9;
    --z-card:           #ffffff;
    --z-line:           #e5e9f0;
    --z-line-2:         #eef1f5;
    --z-head:           #f8fafc;

    /* ---- sidebar ---- */
    /* sidebar — Mac System Settings jaisa halka */
    --z-side-bg:        #eef1f6;
    --z-side-bg-2:      #e3e8f0;
    --z-side-text:      #1e293b;
    --z-side-muted:     #94a3b8;
    --z-side-active:    #ffffff;
    --z-side-line:      #dfe4ec;

    /* ---- shape ---- */
    --z-radius:         14px;
    --z-radius-sm:      9px;
    --z-shadow:         0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
    --z-shadow-lg:      0 12px 40px rgba(15,23,42,.12);

    --z-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   BASE
   ===================================================================== */
body {
    font-family: var(--z-font) !important;
    background: var(--z-bg) !important;
    color: var(--z-ink);
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--z-ink); letter-spacing: -.01em; }
a { color: var(--z-primary); text-decoration: none; }
a:hover { color: var(--z-primary-600); }
.text-muted { color: var(--z-muted) !important; }
code { color: var(--z-primary-700); background: var(--z-primary-soft); padding: .1em .35em; border-radius: 5px; font-size: .8em; }
pre { background: var(--z-head); border: 1px solid var(--z-line); border-radius: var(--z-radius-sm); }
.fs-10 { font-size: .625rem !important; } .fs-11 { font-size: .6875rem !important; }
.fs-12 { font-size: .75rem !important; }  .fs-13 { font-size: .8125rem !important; }

/* =====================================================================
   HEADER (upar ki patti)
   ===================================================================== */
.app-header {
    background: rgba(243,245,249,.85) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--z-line) !important;
    box-shadow: none !important;
}
.app-header .header-link { color: var(--z-ink-2) !important; border-radius: 10px; padding: .45rem .7rem !important; }
.app-header .header-link:hover { background: var(--z-head); }
.app-header .header-logo span { color: var(--z-ink) !important; font-weight: 700; letter-spacing: -.02em; }
.app-header .avatar.bg-primary { background: linear-gradient(135deg, var(--z-primary), var(--z-purple)) !important; font-weight: 700; }

/* site filter — pill jaisa */
.z-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem; border-radius: 999px;
    background: var(--z-primary-soft); color: var(--z-primary-700) !important;
    font-weight: 600; font-size: .78rem; border: 1px solid transparent;
}
.z-pill:hover { border-color: var(--z-primary); }

/* =====================================================================
   SIDEBAR — Mac (System Settings) jaisa
   ===================================================================== */
#sidebar.app-sidebar {
    background: var(--z-side-bg) !important;
    border-right: 1px solid var(--z-side-line) !important;
    box-shadow: none !important;
}
#sidebar.app-sidebar .main-sidebar-header {
    background: var(--z-side-bg) !important;
    border-bottom: 0 !important;
    padding: 0 1.1rem !important;
}
#sidebar.app-sidebar .z-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--z-ink); }
#sidebar.app-sidebar .main-sidebar { display: flex; flex-direction: column; }

/* upar: search + apna naam */
#sidebar .z-side-top { padding: .15rem .8rem .5rem; }
#sidebar .z-search {
    box-sizing: border-box; display: flex; align-items: center; gap: .45rem; width: 100%;
    background: var(--z-side-bg-2); border-radius: 9px; padding: .42rem .7rem; color: var(--z-muted);
    font-size: .82rem; cursor: text; transition: box-shadow .15s, background .15s;
}
#sidebar .z-search:focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(var(--z-primary-rgb), .18); }
#sidebar .z-search input { border: 0; background: transparent; outline: 0; width: 100%; font-size: .82rem; color: var(--z-ink); font-family: inherit; }
#sidebar .z-search input::placeholder { color: var(--z-faint); }
#sidebar .z-me {
    display: flex; align-items: center; gap: .65rem; padding: .7rem .35rem .3rem;
    text-decoration: none; color: var(--z-ink) !important; border-radius: 10px;
}
#sidebar .z-me:hover { background: var(--z-side-bg-2); }
#sidebar .z-me-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--z-primary), var(--z-purple)); color: #fff;
    font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center;
}
#sidebar .z-me b { font-size: .86rem; font-weight: 700; line-height: 1.15; }
#sidebar .z-me small { font-size: .7rem; color: var(--z-muted); }
.z-me-menu { min-width: 220px; border-radius: 12px; border: 1px solid var(--z-line); box-shadow: var(--z-shadow-lg); padding: .35rem; }
.z-me-menu .dropdown-item { border-radius: 8px; font-size: .85rem; padding: .5rem .75rem; }

/* menu */
#sidebar.app-sidebar { overflow: hidden; }
#sidebar.app-sidebar .main-sidebar { overflow-x: hidden; }
#sidebar.app-sidebar .main-menu { padding: .25rem .6rem !important; margin: 0; width: 100%; }
#sidebar.app-sidebar .main-menu > li { width: 100%; }
#sidebar.app-sidebar .slide__category { padding: .9rem .55rem .3rem !important; }
#sidebar.app-sidebar .slide__category .category-name {
    color: var(--z-side-muted) !important;
    font-size: .7rem !important; font-weight: 700 !important;
    letter-spacing: .02em; text-transform: none;
}
#sidebar.app-sidebar .side-menu__item {
    display: flex !important; align-items: center; gap: .6rem; width: 100%; max-width: 100%; box-sizing: border-box;
    color: var(--z-side-text) !important;
    border-radius: 9px !important;
    padding: .36rem .5rem !important;
    margin: 1px 0 !important;
    font-weight: 500; font-size: .84rem;
    transition: background .12s, color .12s;
}
#sidebar.app-sidebar .side-menu__item:hover { background: var(--z-side-bg-2) !important; color: var(--z-ink) !important; }
#sidebar.app-sidebar .side-menu__item.active {
    background: var(--z-primary) !important;
    color: #fff !important; font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--z-primary-rgb), .3);
}
#sidebar.app-sidebar .side-menu__item.active .side-menu__angle,
#sidebar.app-sidebar .side-menu__item.active .z-soon { color: #fff !important; }
#sidebar.app-sidebar .slide.open > .side-menu__item,
#sidebar.app-sidebar .side-menu__item.is-open { color: var(--z-ink) !important; font-weight: 600; }
#sidebar.app-sidebar .side-menu__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar.app-sidebar .side-menu__angle {
    font-size: .62rem !important; color: var(--z-side-muted) !important; margin: 0 !important;
    transition: transform .15s;
}
#sidebar.app-sidebar .slide.open > .side-menu__item .side-menu__angle,
#sidebar.app-sidebar .z-force-open > .side-menu__item .side-menu__angle { transform: rotate(90deg); }
#sidebar.app-sidebar .slide.z-force-open > .slide-menu { display: block !important; }

/* rang wali icon tile — Mac jaisa */
#sidebar .z-tile {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .8rem; background: #64748b;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 1px rgba(15,23,42,.08);
}
#sidebar .z-tile.c-blue    { background: #2a78d6; }  .z-tile.c-teal    { background: #0d9488; }
#sidebar .z-tile.c-purple  { background: #7c3aed; }  .z-tile.c-sky     { background: #0284c7; }
#sidebar .z-tile.c-orange  { background: #ea7a1a; }  .z-tile.c-green   { background: #16a34a; }
#sidebar .z-tile.c-red     { background: #dc2626; }  .z-tile.c-pink    { background: #db2777; }
#sidebar .z-tile.c-rose    { background: #e11d48; }  .z-tile.c-amber   { background: #d97706; }
#sidebar .z-tile.c-cyan    { background: #0891b2; }  .z-tile.c-indigo  { background: #4f46e5; }
#sidebar .z-tile.c-slate   { background: #475569; }  .z-tile.c-gray    { background: #6b7280; }
#sidebar .z-tile.c-emerald { background: #059669; }  .z-tile.c-dark    { background: #1e293b; }
#sidebar.app-sidebar .side-menu__item.active .z-tile { box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }

/* submenu */
#sidebar.app-sidebar .slide-menu.child1 { padding: .1rem 0 .3rem 2.1rem !important; margin: 0 !important; width: 100%; }
#sidebar.app-sidebar .slide-menu.child1 li { width: 100%; padding: 0 !important; }
#sidebar.app-sidebar .slide-menu.child1 .side-menu__item {
    padding: .3rem .55rem !important; font-size: .8rem; font-weight: 400;
    color: var(--z-ink-2) !important; border-radius: 7px !important; box-shadow: none;
}
#sidebar.app-sidebar .slide-menu.child1 .side-menu__item::before { display: none; }
#sidebar.app-sidebar .slide-menu.child1 .side-menu__item.active {
    background: rgba(var(--z-primary-rgb), .14) !important; color: var(--z-primary-700) !important; font-weight: 600;
}
#sidebar.app-sidebar .side-menu__item.is-soon { color: var(--z-faint) !important; }
#sidebar .z-soon, #sidebar .z-soon {
    margin-left: auto; flex: none; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: none;
    background: #d9dfe8; color: #5b6b80; border-radius: 999px; padding: .1rem .42rem; line-height: 1.4;
}

/* neeche */
#sidebar .z-side-bottom {
    margin-top: auto; padding: .7rem 1.1rem; border-top: 1px solid var(--z-side-line);
    font-size: .7rem; color: var(--z-muted); display: flex; justify-content: space-between;
}

/* =====================================================================
   PAGE HEADER
   ===================================================================== */
.page-header {
    padding: 1.1rem 0 .9rem !important;
    border-bottom: 0 !important;
    margin-bottom: .75rem !important;
}
.page-header .page-title { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--z-ink); }
.page-header .breadcrumb { font-size: .75rem; }
.page-header .btn-light { background: var(--z-card); border: 1px solid var(--z-line); }

/* =====================================================================
   CARDS
   ===================================================================== */
.card, .custom-card {
    background: var(--z-card) !important;
    border: 1px solid var(--z-line) !important;
    border-radius: var(--z-radius) !important;
    box-shadow: var(--z-shadow) !important;
    margin-bottom: 1.25rem;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--z-line-2) !important;
    padding: .9rem 1.25rem !important;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.card-title { font-size: .95rem !important; font-weight: 600 !important; color: var(--z-ink); margin: 0; }
.card-body { padding: 1.25rem; }
.card-footer { background: var(--z-head) !important; border-top: 1px solid var(--z-line-2) !important; border-radius: 0 0 var(--z-radius) var(--z-radius) !important; }

/* jo card abhi khaali hai (baad me bharega) */
.card-waiting {
    border-style: dashed !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .8;
}
.card-waiting:hover { opacity: 1; }

/* =====================================================================
   STAT CARD  (dashboard + list ke upar ke counter)
   ===================================================================== */
.z-stat { position: relative; overflow: hidden; }
.z-stat .card-body { padding: 1rem 1.1rem; }
.z-stat .z-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex: 0 0 44px;
}
.z-stat .z-stat-label { font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--z-muted); }
.z-stat .z-stat-value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; color: var(--z-ink); letter-spacing: -.02em; }
.z-stat .z-stat-sub { font-size: .7rem; color: var(--z-faint); margin-top: .15rem; }
.z-stat::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
    border-radius: 50%; background: currentColor; opacity: .05;
}
.z-stat.z-primary { color: var(--z-primary); } .z-stat.z-success { color: var(--z-success); }
.z-stat.z-warning { color: var(--z-warning); } .z-stat.z-danger  { color: var(--z-danger); }
.z-stat.z-info    { color: var(--z-info); }    .z-stat.z-purple  { color: var(--z-purple); }
.z-stat.z-teal    { color: var(--z-teal); }
.z-stat .z-stat-icon { background: color-mix(in srgb, currentColor 12%, white); color: inherit; }
a.z-stat { text-decoration: none; display: block; color: inherit; }
a.z-stat:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-lg) !important; transition: .15s; }

/* purani avatar-based cards (compat) */
.avatar { border-radius: 12px; }
.bg-primary-transparent { background: var(--z-primary-soft) !important; color: var(--z-primary-700) !important; }
.bg-success-transparent { background: var(--z-success-soft) !important; color: var(--z-success) !important; }
.bg-warning-transparent { background: var(--z-warning-soft) !important; color: var(--z-warning) !important; }
.bg-danger-transparent  { background: var(--z-danger-soft) !important;  color: var(--z-danger) !important; }
.bg-info-transparent    { background: var(--z-info-soft) !important;    color: var(--z-info) !important; }
.bg-teal-transparent    { background: var(--z-teal-soft) !important;    color: var(--z-teal) !important; }
.bg-purple-transparent  { background: var(--z-purple-soft) !important;  color: var(--z-purple) !important; }
.bg-secondary-transparent { background: var(--z-line-2) !important; color: var(--z-muted) !important; }

/* =====================================================================
   BADGES — pill, soft
   ===================================================================== */
.badge {
    border-radius: 999px !important;
    padding: .3em .65em !important;
    font-weight: 600 !important;
    font-size: .68rem !important;
    letter-spacing: .02em;
}
.badge.bg-success   { background: var(--z-success-soft) !important; color: var(--z-success) !important; }
.badge.bg-danger    { background: var(--z-danger-soft) !important;  color: var(--z-danger) !important; }
.badge.bg-warning   { background: var(--z-warning-soft) !important; color: var(--z-warning) !important; }
.badge.bg-info      { background: var(--z-info-soft) !important;    color: var(--z-info) !important; }
.badge.bg-primary   { background: var(--z-primary-soft) !important; color: var(--z-primary-700) !important; }
.badge.bg-secondary { background: var(--z-line-2) !important;       color: var(--z-muted) !important; }
.badge.bg-dark      { background: var(--z-ink) !important;          color: #fff !important; }
.badge.bg-light     { background: var(--z-head) !important; color: var(--z-ink-2) !important; border: 1px solid var(--z-line); }
.badge.text-dark    { color: inherit !important; }
/* status dot */
.badge.bg-success::before, .badge.bg-danger::before, .badge.bg-warning::before, .badge.bg-info::before, .badge.bg-primary::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: .4em; vertical-align: 1px;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn { border-radius: var(--z-radius-sm) !important; font-weight: 600; letter-spacing: -.005em; }
.btn-sm { padding: .38rem .75rem; font-size: .78rem; }
.btn-primary { background: var(--z-primary) !important; border-color: var(--z-primary) !important; box-shadow: 0 1px 2px rgba(var(--z-primary-rgb), .3); }
.btn-primary:hover { background: var(--z-primary-600) !important; border-color: var(--z-primary-600) !important; }
.btn-light { background: var(--z-card) !important; border: 1px solid var(--z-line) !important; color: var(--z-ink-2) !important; }
.btn-light:hover { background: var(--z-head) !important; border-color: #d7dde6 !important; }
.btn-info { background: var(--z-info) !important; border-color: var(--z-info) !important; color: #fff !important; }
.btn-warning { background: var(--z-warning) !important; border-color: var(--z-warning) !important; color: #fff !important; }
.btn-success { background: var(--z-success) !important; border-color: var(--z-success) !important; }
.btn-danger { background: var(--z-danger) !important; border-color: var(--z-danger) !important; }
.btn-outline-danger { border-color: var(--z-danger) !important; color: var(--z-danger) !important; }
.btn-outline-danger:hover { background: var(--z-danger) !important; color: #fff !important; }
.btn:disabled { opacity: .5; }

/* =====================================================================
   TABLES
   ===================================================================== */
.table { --bs-table-hover-bg: #f7f9fc; color: var(--z-ink-2); }
.table > thead.table-light th, .table > thead th {
    background: var(--z-head) !important;
    color: var(--z-muted) !important;
    font-size: .76rem; font-weight: 700; letter-spacing: 0; text-transform: none;
    border-bottom: 1px solid var(--z-line) !important;
    padding: .7rem 1rem;
    white-space: nowrap;
}
.table > thead th a { color: var(--z-muted) !important; }
.table > thead th a:hover { color: var(--z-ink) !important; }
.table > tbody > tr > td { padding: .75rem 1rem; border-color: var(--z-line-2) !important; vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-sm > tbody > tr > td { padding: .5rem .75rem; }
.table-borderless > tbody > tr > td { padding: .35rem .5rem; }
.row-link { color: var(--z-ink) !important; font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--z-primary) !important; }
.table tr.table-secondary > td { background: #f8fafc !important; color: var(--z-faint); }

/* list ka toolbar */
.z-toolbar { background: var(--z-head); }
.card-body.border-bottom.py-2 { background: var(--z-head); padding: .75rem 1.25rem !important; border-color: var(--z-line-2) !important; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-label { font-size: .75rem; font-weight: 600; color: var(--z-ink-2); margin-bottom: .3rem; }
.form-control, .form-select {
    border-radius: var(--z-radius-sm) !important;
    border: 1px solid var(--z-line) !important;
    color: var(--z-ink);
    font-size: .85rem;
    padding: .5rem .8rem;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .8rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--z-primary-rgb), .15) !important;
}
.form-control::placeholder { color: var(--z-faint); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--z-danger) !important; }
.invalid-feedback { font-size: .74rem; }
.form-check-input { border-color: #cbd5e1; }
.form-check-input:checked { background-color: var(--z-primary); border-color: var(--z-primary); }
.form-switch .form-check-input { width: 2.2em; height: 1.2em; }
.form-switch .form-check-input:checked { background-color: var(--z-success); border-color: var(--z-success); }
.form-check-label { font-size: .82rem; }
.input-group .btn { border-radius: 0 var(--z-radius-sm) var(--z-radius-sm) 0 !important; }
.input-group .form-control { border-radius: var(--z-radius-sm) 0 0 var(--z-radius-sm) !important; }
hr { border-color: var(--z-line); opacity: 1; }
h6.text-primary { color: var(--z-primary-700) !important; font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* form ke andar ke chhote box (checkbox grid) */
.border.rounded { border-color: var(--z-line) !important; border-radius: var(--z-radius-sm) !important; }
label.border.rounded:hover { background: var(--z-head); }

/* =====================================================================
   TABS — Mac segmented control (gol slider wala)
   ===================================================================== */
.nav-tabs {
    border: 0 !important; background: var(--z-side-bg-2); border-radius: 11px;
    padding: 4px; gap: 2px; display: inline-flex; flex-wrap: wrap; margin: .75rem 1rem;
    width: auto !important;
}
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link {
    border: 0 !important; border-radius: 8px !important; color: var(--z-ink-2); font-weight: 600; font-size: .8rem;
    padding: .42rem .85rem; margin: 0; background: transparent !important; transition: background .15s, color .15s, box-shadow .15s;
}
.nav-tabs .nav-link:hover { color: var(--z-ink); }
.nav-tabs .nav-link.active {
    background: #fff !important; color: var(--z-ink) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 0 0 .5px rgba(15,23,42,.04);
}
.card-header.p-0 .nav-tabs { margin: .6rem .9rem; }

/* =====================================================================
   ALERTS / FLASH
   ===================================================================== */
.alert { border-radius: var(--z-radius-sm); border: 1px solid transparent; font-size: .84rem; }
.alert-success { background: var(--z-success-soft); color: #14532d; border-color: #bbf7d0; }
.alert-danger  { background: var(--z-danger-soft);  color: #7f1d1d; border-color: #fecaca; }
.alert-warning { background: var(--z-warning-soft); color: #78350f; border-color: #fde68a; }
.alert-info    { background: var(--z-info-soft);    color: #0c4a6e; border-color: #bae6fd; }
.alert-light   { background: var(--z-head); color: var(--z-ink-2); border-color: var(--z-line) !important; }

/* =====================================================================
   DROPDOWN / MODAL
   ===================================================================== */
.dropdown-menu { border: 1px solid var(--z-line) !important; border-radius: 12px !important; box-shadow: var(--z-shadow-lg) !important; padding: .4rem; font-size: .83rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; color: var(--z-ink-2); }
.dropdown-item:hover { background: var(--z-head); color: var(--z-ink); }
.dropdown-divider { border-color: var(--z-line-2); }
.modal-content { border: 0 !important; border-radius: var(--z-radius) !important; box-shadow: var(--z-shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--z-line-2); padding: 1rem 1.25rem; }
.modal-title { font-weight: 700; font-size: .95rem; }
.modal-footer { border-top: 1px solid var(--z-line-2); background: var(--z-head); border-radius: 0 0 var(--z-radius) var(--z-radius); }

/* =====================================================================
   PAGINATION
   ===================================================================== */
.pagination { gap: 3px; margin: 0; background: var(--z-side-bg-2); border-radius: 10px; padding: 3px; }
.page-link { border-radius: 7px !important; border: 0 !important; background: transparent !important; color: var(--z-ink-2) !important; font-size: .78rem; font-weight: 600; padding: .32rem .6rem; min-width: 30px; text-align: center; box-shadow: none !important; }
.page-link:hover { background: rgba(255,255,255,.7) !important; color: var(--z-ink) !important; }
.page-item.active .page-link { background: #fff !important; color: var(--z-ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.12) !important; }
.page-item.disabled .page-link { color: var(--z-faint) !important; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: transparent !important; font-size: .75rem; color: var(--z-faint); }

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.z-empty { text-align: center; padding: 3rem 1rem; color: var(--z-muted); }
.z-empty i { font-size: 2.2rem; color: var(--z-faint); display: block; margin-bottom: .5rem; }
.z-empty h6 { color: var(--z-ink-2); font-weight: 600; }

/* =====================================================================
   TIMELINE (audit)
   ===================================================================== */
.z-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--z-line); }
.z-timeline li { position: relative; padding: 0 0 1rem 1rem; }
.z-timeline li::before {
    content: ""; position: absolute; left: -1.55rem; top: .3rem; width: 10px; height: 10px;
    border-radius: 50%; background: var(--z-primary); box-shadow: 0 0 0 3px var(--z-primary-soft);
}
.z-timeline li.reject::before { background: var(--z-danger); box-shadow: 0 0 0 3px var(--z-danger-soft); }
.z-timeline .z-tl-msg { font-weight: 500; color: var(--z-ink); }
.z-timeline .z-tl-meta { font-size: .72rem; color: var(--z-faint); }

/* =====================================================================
   KYC / DOC chips
   ===================================================================== */
.z-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--z-head); border: 1px solid var(--z-line); color: var(--z-ink-2); }

/* =====================================================================
   CHART box
   ===================================================================== */
.z-chart { position: relative; height: 240px; }
.z-chart-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .75rem; color: var(--z-ink-2); }
.z-chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.z-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.z-login-side {
    background: radial-gradient(1200px 600px at 20% 10%, #1e3a8a 0%, transparent 60%),
                radial-gradient(800px 500px at 90% 90%, #4c1d95 0%, transparent 55%),
                #0f172a;
    color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.z-login-side h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.z-login-side p { color: #b6c2d6; max-width: 34ch; }
.z-login-side .z-feature { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; color: #cbd5e1; font-size: .9rem; }
.z-login-side .z-feature i { color: #93c5fd; font-size: 1.1rem; }
.z-login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--z-bg); }
.z-login-form .card { width: 100%; max-width: 420px; }
@media (max-width: 900px) { .z-login { grid-template-columns: 1fr; } .z-login-side { display: none; } }

/* =====================================================================
   SMALL HELPERS
   ===================================================================== */
.z-kv td:first-child { color: var(--z-muted); font-size: .78rem; width: 42%; }
.z-kv td:last-child { color: var(--z-ink); font-weight: 500; }
.secret-box .btn-xs, .btn-xs { padding: 0 .4rem; font-size: .7rem; line-height: 1.6; }
.z-avatar-lg { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--z-primary), var(--z-purple)); color: #fff; font-weight: 700; font-size: 1.4rem; }

/* =====================================================================
   CLOCK (header) + BELL + GREETING TOAST
   ===================================================================== */
.z-clock { display: inline-flex !important; align-items: center; gap: .5rem; }
.z-clock .z-clock-time { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--z-ink); }
.z-clock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--z-success); box-shadow: 0 0 0 3px var(--z-success-soft); }
.z-clock-dot.bad { background: var(--z-danger); box-shadow: 0 0 0 3px var(--z-danger-soft); }
.z-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--z-danger); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.z-toast {
    position: fixed; right: 20px; top: 76px; z-index: 1079; width: 360px; max-width: calc(100vw - 32px);
    background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius);
    box-shadow: var(--z-shadow-lg); padding: 1rem 1rem 1rem .9rem; display: flex; gap: .75rem; align-items: flex-start;
    animation: z-toast-in .35s ease-out;
}
.z-toast-emoji { font-size: 1.6rem; line-height: 1; }
@keyframes z-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   BACK BUTTON — page ke upar, saaf dikhe
   ===================================================================== */
.z-back {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem .45rem .7rem; border-radius: 999px;
    background: var(--z-card); border: 1px solid var(--z-line); color: var(--z-ink-2);
    font-size: .82rem; font-weight: 600; text-decoration: none; box-shadow: var(--z-shadow);
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.z-back i { font-size: 1.05rem; line-height: 1; }
.z-back:hover { background: var(--z-primary-soft); border-color: var(--z-primary); color: var(--z-primary-700); transform: translateX(-2px); }

/* =====================================================================
   FORMS — create / edit page ka ek jaisa look (Staff, Subscriber, Package ...)
   ===================================================================== */
/* section ke naam ke aage chhota icon */
.z-sec-icon { color: var(--z-primary); margin-right: .35rem; font-size: .95rem; }

/* neeche chipki hui action patti — Back aur Create/Update hamesha dikhe */
.z-form-actions {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: .5rem; padding: .75rem 1rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border: 1px solid var(--z-line); border-radius: var(--z-radius);
    box-shadow: 0 -6px 24px rgba(15,23,42,.06);
}
/* purane form (Subscriber, Package, Site, NAS) — unka aakhri "card-footer" bhi neeche chipka rahe.
   Unka code nahi badalna pada: ye rule apne aap lag jata hai. */
form > .card:last-child:has(> .card-footer:only-child) {
    position: sticky; bottom: 0; z-index: 20; margin-bottom: 0;
    box-shadow: 0 -6px 24px rgba(15,23,42,.06) !important;
}
form > .card:last-child:has(> .card-footer:only-child) > .card-footer {
    background: rgba(255,255,255,.92) !important; backdrop-filter: blur(6px);
    border-radius: var(--z-radius) !important; padding: .75rem 1rem;
}
.z-form-actions .btn-primary, form .card-footer .btn-primary { min-width: 150px; }
.z-form-actions .btn, form .card-footer .btn { font-weight: 600; }

/* textarea bhi baaki input jaisa */
textarea.form-control { min-height: 66px; resize: vertical; }

/* required ka tara thoda saaf */
.form-label .text-danger { font-weight: 700; }

/* site / checkbox list — chuna hua halka neela */
.z-site-list label { cursor: pointer; transition: background .15s, border-color .15s; }
.z-site-list label.is-on { background: var(--z-primary-soft); border-color: rgba(var(--z-primary-rgb), .45) !important; }

/* form ke andar file input */
.form-control[type=file] { padding: .35rem .6rem; }
.form-control[type=file]::file-selector-button {
    border: 0; border-radius: 6px; padding: .25rem .6rem; margin-right: .6rem;
    background: var(--z-primary-soft); color: var(--z-primary-700); font-weight: 600; font-size: .75rem;
}

/* =====================================================================
   APPLE-STYLE POLISH — poore panel pe (Mac System Settings jaisa)
   ===================================================================== */
:root { --z-radius: 16px; --z-radius-sm: 10px; }

/* page title thoda bada, saaf */
.page-title { font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -.025em !important; }

/* buttons — gol, halka uthaav */
.btn { border-radius: 10px !important; font-weight: 600; letter-spacing: -.005em; padding: .5rem .95rem; }
.btn-sm { padding: .32rem .7rem; border-radius: 8px !important; }
.btn-primary {
    background: linear-gradient(180deg, #3585e3, var(--z-primary)) !important; border-color: var(--z-primary-600) !important;
    box-shadow: 0 1px 2px rgba(var(--z-primary-rgb), .35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { background: var(--z-primary-600) !important; }
.btn-light { background: #fff !important; border: 1px solid var(--z-line) !important; color: var(--z-ink-2) !important; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.btn-light:hover { background: var(--z-head) !important; border-color: #cbd5e1 !important; }

/* card — Mac ke grouped box jaisa */
.card, .custom-card { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.02) !important; }
.card-header { padding: 1rem 1.25rem !important; }

/* Mac "grouped list" — table ki row alag box jaisi na lage, halki line, hover halka */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--z-line-2) !important; padding: .7rem .9rem; vertical-align: middle; }
.table thead th { background: var(--z-head) !important; color: var(--z-muted); font-size: .76rem; font-weight: 700; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--z-line) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(var(--z-primary-rgb), .04) !important; }
.table tbody tr:last-child > * { border-bottom: 0 !important; }

/* form control — Mac ke text field jaise andar halki chhaya */
.form-control, .form-select { box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }
.form-select { background-color: #fff; }

/* switch — Apple green */
.form-switch .form-check-input { width: 2.4em; height: 1.35em; border: 0; background-color: #d1d5db; margin-left: -2.9em; }
.form-switch { padding-left: 2.9em; }
.form-switch .form-check-label { margin-left: .35em; }
.form-switch .form-check-input:checked { background-color: #34c759 !important; }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(52,199,89,.25); }

/* badges — pill */
.badge { border-radius: 999px; font-weight: 600; padding: .32em .7em; letter-spacing: .01em; }

/* dropdown — gol, halki chhaya */
.dropdown-menu { border-radius: 12px !important; border: 1px solid var(--z-line) !important; box-shadow: var(--z-shadow-lg) !important; padding: .35rem !important; }
.dropdown-item { border-radius: 8px; font-size: .85rem; }
.dropdown-item:hover { background: var(--z-primary-soft); color: var(--z-primary-700); }

/* modal */
.modal-content { border-radius: 18px !important; border: 0 !important; box-shadow: var(--z-shadow-lg) !important; }

/* alert — halka, gol */
.alert { border-radius: 12px !important; border-width: 1px !important; }

/* header ke link — pill */
.app-header .header-link { border-radius: 10px; }
.app-header .badge.bg-primary-transparent { background: rgba(var(--z-primary-rgb), .1) !important; color: var(--z-primary-700) !important; }

/* scrollbar — patla, Mac jaisa */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* sidebar band (collapsed) ho to tile hi dikhe */
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .side-menu__label,
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .side-menu__angle,
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .z-soon,
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .z-side-top,
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .z-side-bottom,
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .slide__category { display: none !important; }
[data-toggled="icon-overlay-close"] .app-sidebar:not(:hover) .side-menu__item { justify-content: center; padding: .4rem !important; }

/* search pill — list toolbar me bhi (sidebar wala #sidebar ke andar hai) */
.z-search { display: flex; align-items: center; gap: .45rem; background: var(--z-side-bg-2); border-radius: 9px; padding: .42rem .7rem; color: var(--z-muted); font-size: .82rem; cursor: text; box-sizing: border-box; }
.z-search input { border: 0; background: transparent; outline: 0; width: 100%; font-size: .82rem; color: var(--z-ink); font-family: inherit; }
.z-search input::placeholder { color: var(--z-faint); }

/* =====================================================================
   LIST TOOLBAR — search pill · Show N segmented · Columns / Export
   ===================================================================== */
.z-toolbar { padding: .7rem 1.25rem; border-bottom: 1px solid var(--z-line-2); background: var(--z-head); }
.z-search-list { width: 300px; max-width: 100%; background: #fff; border: 1px solid var(--z-line); position: relative; }
.z-search-list:focus-within { border-color: var(--z-primary); }
.z-search-clear { color: var(--z-faint); font-size: .85rem; line-height: 1; }
.z-search-clear:hover { color: var(--z-danger); }
.z-seg { display: inline-flex; background: var(--z-side-bg-2); border-radius: 9px; padding: 3px; gap: 2px; }
.z-seg label {
    cursor: pointer; margin: 0; padding: .28rem .65rem; border-radius: 7px; font-size: .76rem; font-weight: 600; color: var(--z-ink-2);
    transition: background .15s, box-shadow .15s;
}
.z-seg label:hover { color: var(--z-ink); }
.z-seg label.on { background: #fff; color: var(--z-ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.z-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.row-link { color: var(--z-primary-700); font-weight: 600; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.table thead th a { color: inherit !important; }

/* =====================================================================
   NOTICE — Mac notification jaisa (upar dayein)
   ===================================================================== */
#z-notices { position: fixed; right: 20px; top: 76px; z-index: 1080; width: 360px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
.z-notice {
    pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start;
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--z-line); border-radius: 14px; box-shadow: var(--z-shadow-lg); padding: .8rem .85rem .8rem .8rem;
    animation: z-toast-in .3s ease-out;
}
.z-notice.bye { opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s; }
.z-notice-icon { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.z-notice.ok .z-notice-icon { background: #34c759; } .z-notice.bad .z-notice-icon { background: var(--z-danger); }
.z-notice-title { font-weight: 700; font-size: .82rem; color: var(--z-ink); line-height: 1.2; }
.z-notice-text { font-size: .8rem; color: var(--z-ink-2); margin-top: .1rem; }
.z-notice .btn-close { font-size: .6rem; margin-top: .2rem; }
/* greeting card notice ke neeche aaye (jab dono ek saath hon) */
.main-content:has(.z-notice) .z-toast { top: 170px; }

/* =====================================================================
   LOGIN / FORGOT / RESET — Mac jaisa: halka, beech me card
   ===================================================================== */
.z-auth {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; background: var(--z-bg);
    background-image: radial-gradient(circle at 20% 10%, rgba(var(--z-primary-rgb), .10), transparent 45%),
                      radial-gradient(circle at 85% 90%, rgba(124,58,237,.08), transparent 45%);
}
.z-auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--z-line); border-radius: 20px; box-shadow: var(--z-shadow-lg); padding: 2rem 1.75rem 1.5rem; }
.z-auth-logo {
    width: 64px; height: 64px; border-radius: 18px; margin: 0 auto .9rem;
    background: linear-gradient(135deg, var(--z-primary), var(--z-purple)); color: #fff; font-weight: 800; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(var(--z-primary-rgb), .3);
}
.z-auth-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--z-ink); text-align: center; }
.z-auth-sub { font-size: .78rem; color: var(--z-muted); text-align: center; margin-bottom: 1.4rem; }
.z-auth .form-control { padding: .65rem .85rem; font-size: .9rem; }
.z-auth .btn-primary { padding: .65rem 1rem; font-size: .9rem; border-radius: 11px !important; }
.z-auth-foot { font-size: .72rem; color: var(--z-faint); text-align: center; margin-top: 1.5rem; }
.z-auth-feats { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.z-auth-feats span { font-size: .72rem; color: var(--z-muted); display: inline-flex; align-items: center; gap: .35rem; }
.z-auth-feats i { color: var(--z-primary); }

/* =====================================================================
   MOBILE — phone / tablet pe sab aaram se
   ===================================================================== */
@media (max-width: 991.98px) {
    .main-content.app-content { padding-left: .9rem !important; padding-right: .9rem !important; }
    .page-header { margin-bottom: 1rem !important; }
    .page-title { font-size: 1.15rem !important; }
    .z-back span { display: none; }                     /* sirf teer */
    .z-back { padding: .45rem .6rem; }
    .app-header .z-clock .z-clock-date { display: none; }
    .card-body { padding: 1rem; }
    .card-header { padding: .8rem 1rem !important; }
    .z-stat .z-stat-value { font-size: 1.3rem; }
    .z-stat .card-body { padding: .8rem .9rem; gap: .6rem !important; }
    .z-form-actions { position: sticky; bottom: 0; padding: .6rem .75rem; border-radius: 12px; }
    .z-form-actions .btn-primary { min-width: 0; }
    .z-toolbar { padding: .6rem .9rem; }
    .z-search-list { width: 100%; }
    .z-toolbar form > .btn-primary { flex: 1; }
    .z-toolbar .ms-auto { margin-left: 0 !important; width: 100%; }
    .z-toolbar .ms-auto .btn { flex: 1; }
    .nav-tabs { margin: .6rem .75rem; display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    #z-notices, .z-toast { right: 10px; left: 10px; width: auto; top: 66px; }
    .z-auth-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 16px; }
    .z-auth-feats { gap: .6rem 1rem; }
}
@media (max-width: 575.98px) {
    .app-header .z-clock { display: none !important; }   /* chhote phone pe ghadi nahi (jagah nahi) */
    .z-chip { font-size: .68rem; }
    .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .z-stat .z-stat-icon { width: 36px; height: 36px; font-size: 1rem; }
    .z-form-actions { flex-wrap: wrap; }
    .z-form-actions > .d-flex { width: 100%; }
    .z-form-actions .btn-primary { width: 100%; }
    .dropdown-menu { max-width: calc(100vw - 20px); }
}
/* mobile pe sidebar khule to page ke upar overlay (Vexel ka apna hai; ye sirf chhaya) */
@media (max-width: 991.98px) {
    #sidebar.app-sidebar { box-shadow: 0 0 40px rgba(15,23,42,.25) !important; }
}

/* =====================================================================
   TITLE CASE — har jagah har word ka pehla akshar bada, koi ALL-CAPS nahi
   ===================================================================== */
.text-uppercase, .fs-11.text-uppercase, .z-stat-label, .table thead th, .category-name, .form-label, .card-title, .z-notice-title { text-transform: none !important; letter-spacing: 0 !important; }

/* =====================================================================
   SITE FILTER dropdown — Mac ki list jaisa, click = lagu
   ===================================================================== */
.z-site-menu { padding: .35rem; max-height: 320px; overflow: auto; }
.z-site-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; margin: 0; cursor: pointer; font-size: .84rem; color: var(--z-ink); }
.z-site-row:hover { background: var(--z-side-bg-2); }
.z-site-row.on { background: var(--z-primary-soft); color: var(--z-primary-700); font-weight: 600; }
.z-site-row .form-check-input { flex: none; }
.z-site-sep { height: 1px; background: var(--z-line-2); margin: .3rem .4rem; }

/* =====================================================================
   HEADER — baayin: menu + company ka poora naam · daayin: site · ghadi · ghanti
   ===================================================================== */
.main-header-container { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.z-head-left { display: flex; align-items: center; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.z-head-right { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.z-head-right .header-element { display: flex; align-items: center; }
.z-menu-btn {
    display: inline-flex;  /* d-lg-none: desktop pe gayab */ align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
    background: transparent; color: var(--z-ink) !important; font-size: 1.4rem; line-height: 1;
    margin-right: .35rem; transition: background .15s, color .15s, transform .15s;
}
.z-menu-btn:hover { background: var(--z-primary-soft); color: var(--z-primary-700) !important; transform: scale(1.04); }

/* page ka naam (Dashboard, Subscribers ...) — kinare se chipke nahi */
.page-header { padding: .9rem 1.5rem .8rem !important; margin: 0 0 1rem !important; }
@media (max-width: 991.98px) { .page-header { padding: .7rem 1rem .6rem !important; } }
.z-company { min-width: 0; display: flex; align-items: center; }
.z-company-name {
    display: block; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; color: var(--z-ink) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.z-company-name:hover { color: var(--z-primary-700) !important; }

/* site mode — "Admin" + khuli site ek group me */
.z-site-group { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; border: 1px solid rgba(var(--z-primary-rgb), .35); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.z-admin-back {
    display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .8rem;
    background: var(--z-primary); color: #fff !important; font-weight: 700; font-size: .82rem; text-decoration: none;
}
.z-admin-back:hover { background: var(--z-primary-600); }
.z-site-now {
    display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .85rem;
    background: var(--z-primary-soft); color: var(--z-primary-700); font-weight: 700; font-size: .82rem;
    max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.z-site-now-name { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767.98px) {
    .z-company-name { font-size: .9rem; }
    .z-site-now { max-width: 120px; padding: .42rem .6rem; }
    .z-admin-back { padding: .42rem .6rem; }
    .app-header .z-pill { padding: .35rem .6rem; }
}
@media (max-width: 575.98px) {
    .z-company-name { font-size: .84rem; }
    .z-site-now { max-width: 90px; }
    .app-header .z-pill span:not(.z-site-now-name) { display: none; }   /* All Sites pill: sirf icon */
}

/* =====================================================================
   LIST me ginti wale link (Sites: online / active / NAS) — click = list
   ===================================================================== */
.z-count { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-weight: 700; color: var(--z-ink) !important; background: var(--z-side-bg-2); font-variant-numeric: tabular-nums; }
.z-count:hover { background: var(--z-primary-soft); color: var(--z-primary-700) !important; }
.z-count.is-on { background: var(--z-success-soft); color: var(--z-success) !important; }
.z-dot-live { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.z-dot-live.on { background: var(--z-success); box-shadow: 0 0 0 3px var(--z-success-soft); }

/* =====================================================================
   CALENDAR (Litepicker) — panel ke look me
   Kaam: public/assets/js/zetrik-date.js  (apne aap har date field pe)
   ===================================================================== */
.litepicker {
    font-family: var(--z-font) !important;
    --litepicker-container-months-color-bg: #fff;
    --litepicker-container-months-box-shadow-color: transparent;
    --litepicker-month-header-color: var(--z-ink);
    --litepicker-button-prev-month-color: var(--z-muted);
    --litepicker-button-next-month-color: var(--z-muted);
    --litepicker-button-prev-month-color-hover: var(--z-primary);
    --litepicker-button-next-month-color-hover: var(--z-primary);
    --litepicker-month-weekday-color: var(--z-faint);
    --litepicker-day-color: var(--z-ink-2);
    --litepicker-day-color-hover: var(--z-primary);
    --litepicker-is-today-color: var(--z-danger);
    --litepicker-is-in-range-color: var(--z-primary-soft);
    --litepicker-is-start-color: #fff;
    --litepicker-is-start-color-bg: var(--z-primary);
    --litepicker-is-end-color: #fff;
    --litepicker-is-end-color-bg: var(--z-primary);
    --litepicker-is-locked-color: #cbd5e1;
}
.litepicker .container__main {
    border: 1px solid var(--z-line); border-radius: 14px; overflow: hidden;
    box-shadow: var(--z-shadow-lg); background: #fff;
}
.litepicker .container__months { border-radius: 0; box-shadow: none !important; padding: .5rem; }
.litepicker .container__months .month-item-header { font-weight: 700; font-size: .85rem; padding: .5rem 0; }
.litepicker .container__months .month-item-header .month-item-name,
.litepicker .container__months .month-item-header .month-item-year { font-weight: 700; }
.litepicker .container__months .month-item-weekdays-row > div { font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.litepicker .container__days > div, .litepicker .container__days > a { font-size: .8rem; border-radius: 8px; }
.litepicker .container__days .day-item { font-weight: 500; }
.litepicker .container__days .day-item:hover { box-shadow: inset 0 0 0 1px var(--z-primary) !important; color: var(--z-primary) !important; border-radius: 8px; }
.litepicker .container__days .day-item.is-today { font-weight: 700; }
.litepicker .container__days .day-item.is-start-date { border-radius: 8px 0 0 8px; }
.litepicker .container__days .day-item.is-end-date { border-radius: 0 8px 8px 0; }
.litepicker .container__days .day-item.is-start-date.is-end-date { border-radius: 8px; }
.litepicker .container__footer { border-radius: 0; box-shadow: none; }

/* baayin taraf ready ranges */
.litepicker .container__predefined-ranges {
    background: var(--z-head); border-right: 1px solid var(--z-line-2);
    padding: .4rem; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
}
.litepicker .container__predefined-ranges button {
    background: transparent; border: 0; text-align: left; width: 100%;
    padding: .45rem .7rem; border-radius: 8px; font-size: .8rem; font-weight: 600; color: var(--z-ink-2); cursor: pointer;
}
.litepicker .container__predefined-ranges button:hover { background: var(--z-side-bg-2); color: var(--z-ink); }
.litepicker .container__predefined-ranges button.is-active,
.litepicker .container__predefined-ranges button:focus { background: var(--z-primary); color: #fff; }

/* jis input pe calendar laga hai */
.z-has-picker { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right .7rem center !important; padding-right: 2rem !important; }
.z-has-picker:focus { cursor: pointer; }

@media (max-width: 767.98px) {
    .litepicker .container__predefined-ranges { min-width: 0; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--z-line-2); }
    .litepicker .container__predefined-ranges button { width: auto; font-size: .74rem; padding: .3rem .55rem; }
}

/* =====================================================================
   GHADI (zetrik-time.js) — date+time aur sirf time wale field
   ===================================================================== */
.z-clock {
    background: #fff; padding: .75rem .9rem 1rem; border-left: 1px solid var(--z-line-2);
    display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 250px;
}

/* upar ka 17 : 52 AM */
.z-clock-head { display: flex; align-items: baseline; gap: 2px; }
.z-clock-num {
    background: var(--z-head); border: 0; border-radius: 10px; cursor: pointer;
    font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--z-muted);
    padding: .3rem .5rem; font-variant-numeric: tabular-nums;
}
.z-clock-num.is-on { background: var(--z-primary-soft); color: var(--z-primary); }
.z-clock-sep { font-size: 1.4rem; font-weight: 700; color: var(--z-muted); padding: 0 1px; }
.z-clock-ampm { font-size: .72rem; font-weight: 700; color: var(--z-faint); letter-spacing: .06em; margin-left: .35rem; }

/* gol ghadi */
.z-dial {
    position: relative; width: 216px; height: 216px; border-radius: 50%;
    background: var(--z-head); touch-action: none; user-select: none; cursor: pointer;
}
.z-nums { position: absolute; inset: 0; }
.z-num {
    position: absolute; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 600; color: var(--z-ink-2);
    font-variant-numeric: tabular-nums; z-index: 2;
}
.z-num.z-num-in { font-size: .68rem; color: var(--z-muted); width: 24px; height: 24px; }
.z-num.is-on { background: var(--z-primary); color: #fff; font-weight: 700; }
.z-hand {
    position: absolute; left: 50%; bottom: 50%; width: 2px; height: 88px;
    background: var(--z-primary); transform-origin: bottom center; margin-left: -1px; z-index: 1;
}
.z-knob {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 50%; background: var(--z-primary); opacity: .22;
}
.z-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--z-primary); z-index: 3;
}

/* turant wale button */
.z-clock-quick { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.z-clock-qbtn {
    background: transparent; border: 1px solid var(--z-line); border-radius: 8px;
    font-size: .72rem; font-weight: 600; color: var(--z-ink-2); padding: .25rem .55rem; cursor: pointer;
}
.z-clock-qbtn:hover { background: var(--z-primary); border-color: var(--z-primary); color: #fff; }

/* calendar ke saath ghadi -> dono ek line me */
.litepicker.z-with-clock .container__main { display: flex; flex-direction: row; align-items: stretch; }

/* sirf time wala popup */
.z-clock-pop {
    position: absolute; z-index: 3000; display: none; background: #fff;
    border: 1px solid var(--z-line); border-radius: 14px; box-shadow: var(--z-shadow-lg); overflow: hidden;
}
.z-clock-pop .z-clock { border-left: 0; }
.z-clock-foot { display: flex; gap: .4rem; justify-content: flex-end; padding: .55rem .8rem; border-top: 1px solid var(--z-line-2); background: var(--z-head); }
.z-clock-btn {
    border: 1px solid var(--z-line); background: #fff; border-radius: 8px;
    font-size: .78rem; font-weight: 600; color: var(--z-ink-2); padding: .3rem .8rem; cursor: pointer;
}
.z-clock-btn.is-main { background: var(--z-primary); border-color: var(--z-primary); color: #fff; }

/* Day Of Month — 1 … 28 ka grid popup (zetrik-date.js) */
.z-day-pop {
    position: absolute; z-index: 3000; display: none; background: #fff;
    border: 1px solid var(--z-line); border-radius: 14px; box-shadow: var(--z-shadow-lg);
    padding: .7rem; width: 268px;
}
.z-day-head { font-size: .72rem; font-weight: 700; color: var(--z-faint); letter-spacing: .04em; padding: 0 .15rem .5rem; }
.z-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.z-day-btn {
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
    height: 32px; font-size: .8rem; font-weight: 600; color: var(--z-ink-2);
    font-variant-numeric: tabular-nums;
}
.z-day-btn:hover { box-shadow: inset 0 0 0 1px var(--z-primary); color: var(--z-primary); }
.z-day-btn.is-on { background: var(--z-primary); color: #fff; font-weight: 700; }
.z-day-note { font-size: .7rem; color: var(--z-faint); padding: .5rem .15rem 0; }

/* jis input pe ghadi lagi hai — icon bhi ghadi ka */
.z-has-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 14.5A6.5 6.5 0 1 1 8 1.5a6.5 6.5 0 0 1 0 13zM8.5 4H7.5v4.3l3.5 2.1.5-.85-3-1.8V4z'/%3E%3C/svg%3E") !important; }

@media (max-width: 767.98px) {
    .litepicker.z-with-clock .container__main { flex-direction: column; }
    .z-clock { border-left: 0; border-top: 1px solid var(--z-line-2); min-width: 0; }
    .z-dial { width: 190px; height: 190px; }
}

/* =====================================================================
   AVATAR — photo ya naam ke akshar (resources/views/components/avatar)
   Photo KYC ke "Passport Size Photo" se aati hai
   ===================================================================== */
.z-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: var(--z-head); border: 1px solid var(--z-line);
    vertical-align: middle; text-decoration: none;
}
.z-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-avatar-text {
    background: var(--z-primary-soft); color: var(--z-primary);
    font-weight: 700; letter-spacing: .02em; border-color: transparent;
}
a.z-avatar:hover { box-shadow: 0 0 0 2px var(--z-primary); }

/* form ke upar badi photo */
.z-photo-box { display: flex; align-items: center; gap: .9rem; }
.z-photo-box .z-photo-note { font-size: .72rem; color: var(--z-faint); line-height: 1.5; }

/* =====================================================================
   INFO (i) BUTTON — field ki baat popover me
   (resources/views/components/info.blade.php)
   Isse har box ki height barabar rehti hai — neeche lambi line nahi
   ===================================================================== */
.z-info {
    border: 0; background: transparent; padding: 0 0 0 .25rem; cursor: pointer;
    color: var(--z-faint); font-size: .82rem; line-height: 1; vertical-align: baseline;
}
.z-info:hover, .z-info:focus { color: var(--z-primary); outline: none; }

.popover.z-info-pop { max-width: 320px; border: 1px solid var(--z-line); border-radius: 12px; box-shadow: var(--z-shadow-lg); }
.popover.z-info-pop .popover-header {
    background: var(--z-head); border-bottom: 1px solid var(--z-line-2);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--z-faint);
    border-radius: 12px 12px 0 0;
}
.popover.z-info-pop .popover-body { font-size: .8rem; color: var(--z-ink-2); padding: .6rem .8rem; }
.popover.z-info-pop .z-info-en { font-weight: 600; color: var(--z-ink); }
.popover.z-info-pop .z-info-hi { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--z-line-2); color: var(--z-muted); }

/* ---- Billing Name: bhar jaane ke baad lock, pencil se khulta hai ---- */
.z-locked { background: var(--z-head) !important; color: var(--z-ink-2); }
.z-lock-btn { border: 1px solid var(--z-line); background: #fff; }
.z-lock-btn:hover { background: var(--z-primary); border-color: var(--z-primary); color: #fff; }

/* =====================================================================
   ADDRESS ke teen dabbe — Address / Installation / Billing
   ---------------------------------------------------------------------
   Har address apni boundary ke andar rehta hai, apne City / State /
   Pincode ke saath. Isse dekhte hi pata chal jata hai ki kaunsa
   pincode kis address ka hai — aur bill print me bhi wahi jodna hai.
   ===================================================================== */
.z-addr-box {
    border: 1px solid var(--z-line);
    border-radius: 10px;
    padding: .85rem .9rem .95rem;
    background: var(--z-card);
}
.z-addr-head {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .8125rem; letter-spacing: .01em;
    color: var(--z-ink); margin-bottom: .65rem;
    padding-bottom: .5rem; border-bottom: 1px dashed var(--z-line);
}
.z-addr-head i { color: var(--z-primary); font-size: .95rem; }
/* chhota pill — "Same As Address", "Locked", "Custom" */
.z-addr-tag {
    display: inline-block; font-weight: 500; font-size: .6875rem; line-height: 1.5;
    color: var(--z-ink-2); background: var(--z-head);
    border: 1px solid var(--z-line); border-radius: 999px; padding: .1rem .5rem;
    vertical-align: middle;
}
.z-addr-head > .z-addr-tag { margin-left: auto; }
/* Billing wala dabba halka highlight — bill isi se chhapta hai */
.z-addr-box.z-addr-bill { border-color: rgba(var(--z-primary-rgb), .38); background: rgba(var(--z-primary-rgb), .025); }
.z-addr-box.z-addr-bill .z-addr-head { border-bottom-color: rgba(var(--z-primary-rgb), .28); }

/* =====================================================================
   KYC — ek hi table me Upload + Preview + Status + Action
   ===================================================================== */
.z-kyc-table > :not(caption) > * > * { padding: .7rem .75rem; vertical-align: middle; }
.z-kyc-table thead th { font-size: .75rem; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.z-kyc-name { font-weight: 600; font-size: .8125rem; }

/* Upload column — sab label ek chaudai ke, isliye box ek line me lagte hain */
.z-kyc-up { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: .45rem .6rem; }
.z-kyc-up > label { font-size: .75rem; color: var(--z-ink-2); margin: 0; text-align: right; white-space: nowrap; }
.z-kyc-up > .z-kyc-in { min-width: 0; }
.z-kyc-up input[type="file"] { min-width: 0; flex: 1 1 auto; }
.z-kyc-hint { grid-column: 2; font-size: .6875rem; color: var(--z-ink-2); margin-top: -.15rem; }
/* "Upload" ka header neeche wale box ki seedh me — label (84px) + gap ke baad */
.z-kyc-table thead th.z-kyc-th-up { padding-left: calc(.75rem + 84px + .6rem); }

/* ---- Signature draw window (kyc::signature-pad) ---- */
.z-sign-pad {
    position: relative; height: 380px;
    border: 1px dashed var(--z-line); border-radius: 12px; background: #fff;
    overflow: hidden;
}
.z-sign-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 2; }
.z-sign-line {
    position: absolute; left: 32px; right: 32px; bottom: 70px; z-index: 1;
    border-bottom: 1px solid var(--z-line); pointer-events: none;
}
.z-sign-line span { position: absolute; left: 0; top: 6px; font-size: .6875rem; color: var(--z-ink-2); }
.z-sign-empty {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: .8125rem; color: var(--z-ink-2);
}
/* mobile / tablet pe window poori screen — sign ka dabba bacha hua poora hissa */
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .z-sign-pad { height: calc(100dvh - 150px); min-height: 260px; }
}

/* ---------------------------------------------------------------------
   Preview — PHOTO aur PDF dono yahin dikhte hain
   ---------------------------------------------------------------------
   • Photo lambi ho (poora scan) to dabba scroll ho jata hai — mouse le
     jao aur pahiya ghumao, neeche ka hissa dikh jayega
   • PDF ke kai page ho to bhi wahi — PDF apne andar scroll ho jata hai
   • Upar left ka button poori file naye tab me kholta hai
   • Upar right ka (x) file hata deta hai
   --------------------------------------------------------------------- */
.z-kyc-thumbs {
    display: flex; flex-wrap: wrap; gap: .4rem;
    --z-kyc-thumb:   116px;      /* preview ka dabba — chaudai */
    --z-kyc-thumb-h: 148px;      /* preview ka dabba — unchai  */
}
.z-kyc-thumb {
    position: relative;
    width: var(--z-kyc-thumb); height: var(--z-kyc-thumb-h);
    border: 1px solid var(--z-line); border-radius: 8px;
    background: var(--z-head);
    overflow: auto;                     /* lambi photo yahin scroll hoti hai */
    overscroll-behavior: contain;       /* andar khatam ho to page na khiske */
}
.z-kyc-thumb img { width: 100%; height: auto; display: block; }
.z-kyc-thumb iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.z-kyc-thumb .z-kyc-file {
    font-size: 1.6rem; color: var(--z-ink-2);
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
/* Upar ki patti — height 0, isliye jagah nahi ghera; sticky, isliye
   scroll karte waqt bhi dikhti rehti hai */
.z-kyc-tools {
    position: sticky; top: 0; z-index: 3; height: 0; padding: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
}
.z-kyc-btn {
    width: 20px; height: 20px; padding: 0; margin: 3px; flex: 0 0 auto;
    line-height: 1; border-radius: 50%; border: 0; background: rgba(15,23,42,.6);
    color: #fff; font-size: .65rem; text-decoration: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.z-kyc-btn:hover           { background: var(--z-primary); color: #fff; }
.z-kyc-btn.z-kyc-x:hover   { background: #dc2626; color: #fff; }
/* Signature — chauda safed dabba, sign apne aap beech me fit (3:1) */
.z-kyc-thumb.is-sign {
    width: 180px; height: 64px; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.z-kyc-thumb.is-sign img { width: 100%; height: 100%; object-fit: contain; }
.z-kyc-thumb.is-sign .z-kyc-tools { position: absolute; left: 0; right: 0; top: 0; }
/* PDF ka dabba khud scroll karta hai, isliye uspe container scroll band */
.z-kyc-thumb.is-pdf { overflow: hidden; }

/* scrollbar patla rahe, warna chhote dabbe me bhadda lagta hai */
.z-kyc-thumb { scrollbar-width: thin; }
.z-kyc-thumb::-webkit-scrollbar { width: 6px; height: 6px; }
.z-kyc-thumb::-webkit-scrollbar-thumb { background: rgba(15,23,42,.25); border-radius: 6px; }
.z-kyc-thumb::-webkit-scrollbar-track { background: transparent; }
.z-kyc-empty { color: var(--z-ink-2); font-size: .75rem; }
.z-kyc-act { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.z-kyc-act .btn { white-space: nowrap; }
.z-kyc-badges { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }

@media (max-width: 767.98px) {
    .z-kyc-up { grid-template-columns: 1fr; }
    .z-kyc-up > label { text-align: left; }
    .z-kyc-hint { grid-column: 1; }
    .z-kyc-table thead th.z-kyc-th-up { padding-left: .75rem; }
}

/* KYC ka kaam karne ke baad wapas isi jagah — sticky header ke neeche na chhupe */
#kyc { display: block; scroll-margin-top: 90px; }

/* Pool dashboard — list page pe jo card khula hai wo halka chamke */
a.z-stat.z-stat-active { box-shadow: 0 0 0 2px currentColor inset, var(--z-shadow-lg) !important; }
.z-pool-dash .z-stat-sub { max-width: 100%; }

/* Pool NAS / Sites — None · All · Multiple, chuna hua dabba halka rang */
.z-target-choice { cursor: pointer; transition: border-color .15s, background-color .15s; }
.z-target-choice.z-target-on { border-color: var(--bs-primary) !important; background: rgba(var(--bs-primary-rgb), .06); }

/* =====================================================================
   IP CALCULATOR (app/Modules/IpCalc, public/assets/js/zetrik-ipcalc.js)
   Panel ke apne card / table / tab hi use hote hain — yahan sirf chhota sa
   ===================================================================== */
[data-tool] [data-out] .table th, [data-tool] [data-out] .table td { white-space: normal; }
[data-pool-pick] .btn { font-size: .72rem; }

/* =====================================================================
   EK HI FONT — poore panel me (Kiki, 21 Sep)
   Pehle IP / code / range .font-monospace (alag font) me dikhte the.
   Ab har jagah wahi panel ka font; ank barabar chaudai ke (tabular) taaki
   IP ki list seedhi line me rahe.
   ===================================================================== */
.font-monospace { font-family: var(--z-font) !important; font-variant-numeric: tabular-nums; }

/* Router command ka dabba (NAS -> Speed Profiles) — theme ke kisi purane style se na bigde */
pre.z-cmd {
    display: block; height: auto !important; max-height: 320px; overflow: auto;
    white-space: pre; line-height: 1.5; font-size: .78rem;
    background: var(--z-card) !important; border: 1px solid var(--z-line) !important;
    border-radius: var(--z-radius-sm) !important; padding: .6rem .8rem !important; margin: 0;
}

/* =====================================================================
   INPUT GROUP — "50 [Mbps]", "[₹] 590", "1 [Months]" ek jaisa
   (box ka font aur kona baaki input jaisa — Package sub-plan se shuru)
   ===================================================================== */
.input-group-text { font-size: .85rem; color: var(--z-ink-2); background: var(--z-head); border-color: var(--z-line); }
.input-group > .input-group-text:first-child { border-radius: var(--z-radius-sm) 0 0 var(--z-radius-sm); }
.input-group > .input-group-text:last-child  { border-radius: 0 var(--z-radius-sm) var(--z-radius-sm) 0; }
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .form-select:not(:first-child):not(:last-child)  { border-radius: 0 !important; }
.input-group > .form-control:last-child:not(:first-child),
.input-group > .form-select:last-child:not(:first-child)        { border-radius: 0 var(--z-radius-sm) var(--z-radius-sm) 0 !important; }
.input-group > .form-select:first-child:not(:last-child)        { border-radius: var(--z-radius-sm) 0 0 var(--z-radius-sm) !important; }

/* Package ka sub-plan dabba */
.z-plan { background: var(--z-card); }
.z-plan + .z-plan { margin-top: .25rem; }

/* =====================================================================
   CUSTOMER PAGE — Apple jaisa (Kiki 21 Sep: apni theme, kisi ki copy nahi)
   hero · ek nazar (ring) · segment · grouped list
   ===================================================================== */
.z-hero .card-body { padding: 1.25rem 1.4rem; }
.z-hero-photo { box-shadow: 0 0 0 4px var(--z-card), 0 6px 18px rgba(15,23,42,.12); }
.z-hero-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--z-ink); line-height: 1.25; }
.z-hero-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .75rem; color: var(--z-muted); }
.z-hero-meta i { margin-right: .2rem; }

/* ek nazar — ring + 3 cheez */
.z-glance { display: flex; align-items: center; gap: 1.5rem; }
.z-glance-ring { position: relative; width: 112px; height: 112px; flex: 0 0 112px; }
.z-glance-ring svg { transform: rotate(-90deg); }
.z-ring-track { fill: none; stroke: var(--z-head); stroke-width: 11; }
.z-ring-bar   { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.z-ring-success { stroke: var(--z-success); } .z-ring-warning { stroke: var(--z-warning); }
.z-ring-danger  { stroke: var(--z-danger); }  .z-ring-muted   { stroke: var(--z-line); }
.z-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.z-ring-num  { font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--z-ink); letter-spacing: -.02em; }
.z-ring-cap  { font-size: .7rem; color: var(--z-muted); margin-top: .2rem; }
.z-glance-items { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-width: 0; }
.z-glance-item { padding: .15rem 1.1rem; min-width: 0; }
.z-glance-item + .z-glance-item { border-left: 1px solid var(--z-line); }
.z-glance-label { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 600; color: var(--z-muted); }
.z-glance-value { font-size: 1.25rem; font-weight: 700; color: var(--z-ink); letter-spacing: -.02em; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-glance-sub   { font-size: .7rem; color: var(--z-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-glance-empty { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 1px dashed var(--z-line); border-radius: var(--z-radius); }
.z-glance-empty > i { font-size: 1.6rem; color: var(--z-muted); }
.progress.z-thin { height: 5px; border-radius: 99px; background: var(--z-head); }
@media (max-width: 767.98px) {
    .z-glance { flex-direction: column; align-items: stretch; }
    .z-glance-ring { margin: 0 auto; }
    .z-glance-items { grid-template-columns: 1fr; }
    .z-glance-item + .z-glance-item { border-left: 0; border-top: 1px solid var(--z-line); padding-top: .6rem; margin-top: .6rem; }
}

/* rang wali chhoti icon tile (menu jaisi) */
.z-tile { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
          font-size: .78rem; color: #fff; flex: 0 0 24px; }
.z-tile-blue   { background: #3b82f6; } .z-tile-purple { background: #8b5cf6; } .z-tile-green { background: #22c55e; }
.z-tile-red    { background: #ef4444; } .z-tile-orange { background: #f59e0b; } .z-tile-teal  { background: #14b8a6; }
.z-tile-indigo { background: #6366f1; } .z-tile-gray   { background: #94a3b8; }

/* connection chunne ka segment (Apple segmented control) */
.z-conn-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--z-head); border: 1px solid var(--z-line); }
.z-conn-seg button { border: 0; background: transparent; border-radius: 8px; padding: .3rem .8rem; font-size: .78rem; font-weight: 600;
                     color: var(--z-ink-2); display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.z-conn-seg button.on { background: var(--z-card); color: var(--z-ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.z-seg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* grouped list (Apple Settings) */
.z-glist { background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius); overflow: hidden; }
.z-glist-head { padding: .7rem 1rem .5rem; font-size: .8125rem; font-weight: 700; color: var(--z-ink); }
.z-glist-row { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; min-height: 42px; border-top: 1px solid var(--z-line); min-width: 0; }
.z-glist-label { font-size: .8125rem; color: var(--z-ink-2); white-space: nowrap; }
.z-glist-value { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--z-ink); text-align: right; min-width: 0; }
.z-glist-empty { padding: 1rem; border-top: 1px solid var(--z-line); font-size: .75rem; color: var(--z-muted); text-align: center; }
.z-glist-note  { padding: .6rem 1rem; border-top: 1px solid var(--z-line); font-size: .75rem; color: var(--z-muted); }
@media (min-width: 768px) { .z-glist .row > [class*="col-md-"] + [class*="col-md-"] .z-glist-row { border-left: 1px solid var(--z-line); } }
@media (min-width: 992px) { .z-glist .row > [class*="col-lg-"] + [class*="col-lg-"] .z-glist-row { border-left: 1px solid var(--z-line); } }

/* online ka dhadakta dot */
.z-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--z-success); }
.z-live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: z-pulse 1.8s infinite; }
.z-live-off { color: var(--z-muted); } .z-live-off .z-live-dot { animation: none; }
@keyframes z-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* fiber signal ke 4 danda */
.z-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.z-signal i { width: 4px; border-radius: 1px; background: var(--z-line); }
.z-signal i:nth-child(1) { height: 25%; } .z-signal i:nth-child(2) { height: 50%; }
.z-signal i:nth-child(3) { height: 75%; } .z-signal i:nth-child(4) { height: 100%; }
.z-signal-4 i { background: var(--z-success); }
.z-signal-3 i:nth-child(-n+3) { background: var(--z-success); }
.z-signal-2 i:nth-child(-n+2) { background: var(--z-warning); }
.z-signal-1 i:nth-child(1)    { background: var(--z-danger); }

/* customer page ke tab — phone pe side me na bhaage */
#sub-tabs { flex-wrap: wrap; max-width: 100%; }

/* =====================================================================
   ADD SUBSCRIBER (22 Sep) — Subscriber Type ka segment, address ki line
   ===================================================================== */
.z-seg-radio { display: flex; }
.z-seg-radio label { flex: 1; justify-content: center; border-radius: 8px; padding: .45rem .6rem; font-size: .8125rem; font-weight: 600;
                     color: var(--z-ink-2); display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0; white-space: nowrap; }
.z-seg-radio label input { position: absolute; opacity: 0; pointer-events: none; }
.z-seg-radio label.on { background: var(--z-card); color: var(--z-primary-700); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.z-addr-one .z-addr-line { margin: 1rem -.9rem .85rem; border-color: var(--z-line); opacity: 1; }
.z-q-sub { font-size: .8125rem; font-weight: 700; color: var(--z-ink); padding-top: .75rem; border-top: 1px solid var(--z-line); }
.z-q-sub i { color: var(--z-primary); margin-right: .3rem; }


/* =====================================================================
   PERSONAL INFORMATION — har hissa ek dabba, apne pencil se khulta hai
   (Kiki, 23 Sep — _fields.blade.php)
   ===================================================================== */
.z-sec .z-sec-body { transition: opacity .15s ease; }
.z-sec.is-lock .z-sec-body { pointer-events: none; opacity: .85; }
.z-sec.is-lock .z-sec-body .form-control,
.z-sec.is-lock .z-sec-body .form-select,
.z-sec.is-lock .z-sec-body .input-group-text { background: #eef1f6 !important; color: var(--z-ink-2); box-shadow: none; }
.z-sec.is-lock .z-sec-body .z-info { pointer-events: auto; }   /* (i) locked me bhi padh sakein */
.z-sec:not(.is-lock) .z-sec-tag { display: none; }
.z-sec:not(.is-lock) .z-addr-head > .z-lock-btn { margin-left: auto; }
.z-sec.is-lock .z-addr-head > .z-lock-btn { margin-left: .4rem; }

/* =====================================================================
   MAP WINDOW — Locate On Map (partials/map-picker, zetrik-map.js)
   ===================================================================== */
.z-map-canvas { width: 100%; height: 480px; background: var(--z-head); }
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .z-map-canvas { height: calc(100dvh - 190px); min-height: 280px; }
}
#z-map-modal .modal-body { overflow: hidden; border-radius: 0; }

/* =====================================================================
   z-backdrop-fix : modal ka kaala parda poori screen pe
   =====================================================================
   Theme ki style.css me parda 100vw x 100vh pe chalta hai. Panel bade
   screen pe html{zoom:.8} se chhota hota hai, aur zoom ke saath vw/vh
   bhi 80% ho jate hain - isliye parda poori screen nahi dhakta tha.

   100% aisa nahi karta: fixed dabbe ka 100% hamesha poori screen hi
   rehta hai. Bootstrap ka .modal bhi 100% pe hi chalta hai aur wo
   hamesha theek tha.

   DHYAN: aage koi hissa poori screen pe chahiye to 100vh/100vw ki
   jagah 100% likhna.
   ===================================================================== */
.modal-backdrop,
.offcanvas-backdrop {
    width:  100% !important;
    height: 100% !important;
    top:    0 !important;
    left:   0 !important;
}

/* =====================================================================
   z-side-fit : sidebar poora dikhe, phone pe band ho, sikud bhi jaye
   ===================================================================== */

/* ---- 1. menu poora, scrollbar kabhi nahi ---- */
#sidebar.app-sidebar .main-sidebar { height: 100%; }
#sidebar.app-sidebar .main-menu {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
#sidebar.app-sidebar .main-menu::-webkit-scrollbar { width: 0; height: 0; }

/* ---- 2. chhoti screen pe apne aap sikudna ---- */
@media (max-height: 900px) {
    #sidebar .z-side-top  { padding: .1rem .75rem .35rem; }
    #sidebar .z-search    { padding: .34rem .6rem; }
    #sidebar .z-me        { padding: .45rem .35rem .2rem; gap: .5rem; }
    #sidebar .z-me-avatar { width: 32px; height: 32px; font-size: .75rem; }
    #sidebar .z-tile      { width: 24px; height: 24px; font-size: .74rem; }
    #sidebar.app-sidebar .side-menu__item   { padding: .3rem .5rem !important; font-size: .82rem; }
    #sidebar.app-sidebar .slide__category   { padding: .55rem .55rem .15rem !important; }
}
@media (max-height: 760px) {
    #sidebar .z-me-avatar { width: 28px; height: 28px; }
    #sidebar .z-me small  { display: none; }
    #sidebar .z-tile      { width: 22px; height: 22px; font-size: .7rem; }
    #sidebar .z-side-bottom { display: none; }
    #sidebar.app-sidebar .side-menu__item   { padding: .24rem .45rem !important; font-size: .79rem; margin: 0 !important; }
    #sidebar.app-sidebar .slide__category   { padding: .4rem .55rem .1rem !important; }
    #sidebar.app-sidebar .slide-menu.child1 li a { padding: .2rem .5rem !important; font-size: .76rem; }
}

/* ---- 3. brand ke bagal me 3-line ka button ---- */
#sidebar.app-sidebar .main-sidebar-header { display: flex; align-items: center; gap: .4rem; }
#sidebar.app-sidebar .main-sidebar-header .header-logo { flex: 1; min-width: 0; }
.z-side-mini-btn {
    border: 0; background: transparent; color: var(--z-side-muted);
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    cursor: pointer;
}
.z-side-mini-btn:hover { background: var(--z-side-bg-2); color: var(--z-ink); }

/* ---- 4. sikuda hua sidebar (sirf bade screen pe) ---- */
@media (min-width: 992px) {
    html[data-zmini="1"] { --z-side-w: 74px; }

    html[data-zmini="1"] #sidebar.app-sidebar { width: var(--z-side-w) !important; }
    html[data-zmini="1"] .main-content,
    html[data-zmini="1"] .app-content  { margin-inline-start: var(--z-side-w) !important; }
    html[data-zmini="1"] .app-header   { inset-inline-start: var(--z-side-w) !important; }

    html[data-zmini="1"] #sidebar .z-brand,
    html[data-zmini="1"] #sidebar .z-side-top,
    html[data-zmini="1"] #sidebar .z-side-bottom,
    html[data-zmini="1"] #sidebar .side-menu__label,
    html[data-zmini="1"] #sidebar .side-menu__angle,
    html[data-zmini="1"] #sidebar .z-soon,
    html[data-zmini="1"] #sidebar .slide-menu,
    html[data-zmini="1"] #sidebar .slide__category { display: none !important; }

    html[data-zmini="1"] #sidebar.app-sidebar .main-menu      { padding: .4rem .5rem !important; }
    html[data-zmini="1"] #sidebar.app-sidebar .side-menu__item{ justify-content: center; padding: .45rem !important; }
    html[data-zmini="1"] #sidebar.app-sidebar .main-sidebar-header { justify-content: center; padding: 0 !important; }
}