/* ── Reset & base ── */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --brand: #6c727e;
            --brand-2: #030f31;
            --brand-light: #EFF6FF;
            --brand-mid: #BFDBFE;


            --sidebar-w: 248px;
            --sidebar-bg: #034C53;
            --sidebar-hover: rgba(255, 255, 255, .08);
            --sidebar-active: #BFC9D1;

            --header-h: 62px;
            --header-bg: #ffffff;

            --bg: #F1F5F9;
            --surface: #ffffff;
            --text: #0F172A;
            --text-2: #475569;
            --text-3: #94A3B8;
            --border: #E2E8F0;

            --green: #10B981;
            --green-bg: #ECFDF5;
            --amber: #F59E0B;
            --amber-bg: #FFFBEB;
            --red: #EF4444;
            --red-bg: #FEF2F2;
            --purple: #8B5CF6;
            --purple-bg: #F5F3FF;

            --radius: 12px;
            --radius-sm: 8px;
            --radius-lg: 16px;
            --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
        }

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
        html,
        body {
            height: 100%;
               font-family: 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text)
        }

        /* ── Layout shell ── */
        .layout {
            display: flex;
            min-height: 100vh
        }

        /* ══════════════════════════════SIDEBAR══════════════════════════════ */
        .sidebar {
            width: var(--sidebar-w);
            background: var(--sidebar-bg);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 200;
            transition: transform .25s ease;
        }

        .sidebar-brand {
            height: var(--header-h);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 20px;
            border-bottom: 1px solid var(--sidebar-border);
            flex-shrink: 0;
        }

        .brand-icon {
      
            border-radius: 9px;
            /* background: var(--brand); */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            flex-shrink: 0;
        }

        .brand-text {
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -.3px;
            line-height: 1.2
        }

        .brand-text small {
            display: block;
            font-size: 10px;
            font-weight: 400;
            color: #64748B;
            letter-spacing: .3px;
            text-transform: uppercase
        }

        /* Nav */
        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 16px 10px
        }

        .sidebar-nav::-webkit-scrollbar {
            width: 0
        }

        .nav-section {
            margin-bottom: 6px
        }

        .nav-label {
            font-size: 10px;
            font-weight: 700;
            color: #334155;
            letter-spacing: .8px;
            text-transform: uppercase;
            padding: 6px 10px 4px;
            margin-bottom: 2px
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--radius-sm);
            color: white;
            font-size: 15px;
            /* font-weight: 500; */
            cursor: pointer;
            text-decoration: none;
            transition: background .15s, color .15s;
            position: relative;
        }

        .nav-item:hover {
            background: var(--sidebar-hover);
            color: #CBD5E1
        }

        .nav-item.active {
            background: var(--sidebar-hover);
            color: #fff;
            font-weight: 600;
        }

        .nav-item.active .nav-icon {
            color: #fff
        }

        .nav-item .nav-icon {
            font-size: 16px;
            flex-shrink: 0;
            width: 20px;
            text-align: center
        }

        .nav-item .badge {
            margin-left: auto;
            background: var(--brand);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 100px
        }

        /* Submenu */
        .has-sub .sub-arrow {
            margin-left: auto;
            font-size: 11px;
            transition: transform .2s;
            color: #fff
        }

        .has-sub.open .sub-arrow {
            transform: rotate(180deg)
        }

        .submenu {
            display: none;
            padding-left: 20px
        }

        .submenu.open {
            display: block
        }

        .submenu .nav-item {
            margin-bottom: 2px;
            /* padding: 7px 12px; */
            font-size: 13px;
            color: #fff
        }

        .submenu .nav-item::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            flex-shrink: 0
        }

        .submenu .nav-item:hover::before,
        .submenu .nav-item.active::before {
            background: var(--brand-mid)
        }

        .sidebar-divider {
            height: 1px;
            background: var(--sidebar-border);
            margin: 8px 10px
        }

        /* Sidebar footer */
        .sidebar-footer {
            padding: 14px 12px;
            border-top: 1px solid var(--sidebar-border);
            flex-shrink: 0;
        }

        .user-chip {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background .15s;
        }

        .user-chip:hover {
            background: var(--sidebar-hover)
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--brand);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .user-info .uname {
            color: #E2E8F0;
            font-size: 13px;
            font-weight: 600
        }

        .user-info .urole {
            color: #fff;
            font-size: 11px
        }

        /* ══════════════════════════════MAIN══════════════════════════════ */
        .main {
            margin-left: var(--sidebar-w);
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh
        }

        /* ── Header ── */
        .header {
            height: var(--header-h);
            background: var(--header-bg);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 14px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-2);
            cursor: pointer;
            padding: 4px;
        }

        .page-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -.3px;
        }

        .page-breadcrumb {
            font-size: 12px;
            color: var(--text-3);
            margin-top: 1px
        }

        .header-spacer {
            flex: 1
        }

        /* Year pill */
        .year-pill {
            display: flex;
            align-items: center;
            gap: 7px;
            background: var(--brand-light);
            border: 1px solid var(--brand-mid);
            border-radius: 100px;
            padding: 6px 14px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--brand);
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s;
        }

        .year-pill:hover {
            background: var(--brand-mid)
        }

        .year-pill i {
            font-size: 13px
        }

        /* Logout btn */
        .btn-logout {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 16px;
            background: #FEF2F2;
            border: 1px solid #FECACA;
            border-radius: 100px;
            color: #EF4444;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background .15s, border-color .15s;
            white-space: nowrap;
        }

        .btn-logout:hover {
            background: #FEE2E2;
            border-color: #FCA5A5
        }

        .btn-logout i {
            font-size: 14px
        }

        /* ── Page content ── */
        .content {
            padding: 28px 28px 40px;
            flex: 1
        }

      

    
        .swal-btn-small{
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 5px;
    border: none;
    margin: 0 4px;
}

.swal-delete-btn{
    background: #dc3545;
    color: #fff;
}

.swal-delete-btn:hover{
    background: #bb2d3b;
}

.swal-cancel-btn{
    background: #6c757d;
    color: #fff;
}

.swal-cancel-btn:hover{
    background: #5c636a;
}

/* dashboard css */.dash-page {
  background: #f0f4f8;
  min-height: calc(100vh - 60px);
}

/* Header */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dash-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  margin-left: 10px;
}

.dash-header .dash-sub {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 2px;
}

.dash-date-badge {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-weight: 500;
  white-space: nowrap;
}

/* Stat Grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.stat-card {
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card .card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}

.stat-card .card-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-card .card-footer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: rgba(0,0,0,0.07);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  width: fit-content;
}

.stat-card .card-icon-bg {
  position: absolute;
  right: -4px;
  bottom: -8px;
  font-size: 60px;
  opacity: 0.15;
  line-height: 1;
}

/* Card Colors */
.blue-card {
  background: #e3f2fd;
  color: #0d47a1;
}
.blue-card .card-footer { color: #0d47a1; }

.teal-card {
  background: #e0f2f1;
  color: #004d40;
}
.teal-card .card-footer { color: #004d40; }

.purple-card {
  background: #f3e5f5;
  color: #4a148c;
}
.purple-card .card-footer { color: #4a148c; }

.red-card {
  background: #fce4ec;
  color: #880e4f;
}
.red-card .card-footer { color: #880e4f; }

/* Bottom Panels */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .panel-grid { grid-template-columns: 1fr; }
}

.dash-panel {
  background: #fff;
  border-radius: 8px;
  padding: 15px 15px;
  border: 1px solid #e9ecef;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
}

.panel-count-badge {
  font-size: 11px;
  background: #f1f5f9;
  color: #64748b;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

/* Birthday List */
.bday-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f8fafc;
}

.bday-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.bday-item > div:last-child {
  flex: 1;
  min-width: 0;
}
.bday-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.bday-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bday-sub {
  font-size: 11px;
  color: #94a3b8;
}

.bday-empty {
  text-align: center;
  padding: 28px 0;
  font-size: 13px;
  color: #94a3b8;
}
.bday-class {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  margin-left: 8px;
  border-radius: 5px;

}
/* Quick Actions */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform 0.15s;
}

.action-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.act-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
}

.act-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.action-btn.a2 { background: #fff1f2; border-color: #fecdd3; }
.action-btn.a2 .act-icon { background: #e11d48; }
.action-btn.a2 .act-label { color: #be123c; }

.action-btn.a3 { background: #f0fdf4; border-color: #bbf7d0; }
.action-btn.a3 .act-icon { background: #16a34a; }
.action-btn.a3 .act-label { color: #15803d; }



.action-btn.a4 { background: #ecfdf5; border-color: #a7f3d0; }
.action-btn.a4 .act-icon { background: #059669; }
.action-btn.a4 .act-label { color: #047857; }


.action-btn.a1 { background: #ecfeff; border-color: #a5f3fc; }
.action-btn.a1 .act-icon { background: #0891b2; }
.action-btn.a1 .act-label { color: #0e7490; }

.readonly1{
    background-color: #E3F4F4 !important;
}
 .doc-preview {
        width: 150px;
        /* Set desired width */
        height: 150px;
        /* Set desired height */
        object-fit: cover;
        /* Makes sure the image covers the box without distortion */
    }

    /* Loader Overlay */
.page-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner */
.loader-spinner {
    width: 55px;
    height: 55px;
    border: 5px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.dash-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}
.strength-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.legend-dot.male   { background: #3b82f6; }
.legend-dot.female { background: #f472b6; }

.dash-panel-body { padding: 8px 16px; }

.strength-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f8f8f8;
}
.strength-row:last-child { border-bottom: none; }

.strength-label {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  width: 78px;
  flex-shrink: 0;
}
.strength-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bar-gender {
  font-size: 11px;
  font-weight: 501;
  width: 12px;
  flex-shrink: 0;
}
.bar-row:first-child .bar-gender { color: #3b82f6; }
.bar-row:last-child  .bar-gender { color: #f472b6; }

.bar-bg {
  flex: 1;
  height: 6px;
  background: #dee7f0;
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.bar-fill.male   { background: #3b82f6; }
.bar-fill.female { background: #f472b6; }

.bar-val {
  font-size: 11px;
  color: #1e293b;
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}
.strength-total {
  font-size: 12px;
  color: #1e293b;
  width: 55px;
  text-align: right;
  flex-shrink: 0;
}

 /* Simple Internet-off Icon */
        .icon-internet {
          width: 80px;
          margin-bottom: 20px;
          opacity: 0.9;
        }

        .body-internet {

          margin: 0;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-family: "Segoe UI", Arial, sans-serif;
          /* background: #f4f7fb; */
          color: #333;
          text-align: center;

        }

        .btn-internet {
          padding: 10px 24px;
          background: #0A2742;
          color: #fff;
          border-radius: 8px;
          text-decoration: none;
          font-size: 15px;
          transition: 0.3s;
        }

        .btn-internet:hover {
          background: #093357;
          color: white;
        }

        .p-internet {
          font-size: 16px;
          color: #555;
          margin-bottom: 25px;
          max-width: 320px;
          line-height: 1.5;
        }

        .h2-internet {
          font-size: 30px;
          color: #0A2742;
          margin-bottom: 10px;
          font-weight: 600;
        }

        .text-dark-blue {
          color: #0A2742;
        }
        /* Cancel button */
.swal-cancel-btn{
    background:#0d6efd;
    color:white;
    border:none;
    padding:5px 14px;
    font-size:13px;
    border-radius:4px;
}

/* Cancel hover */
.swal-cancel-btn:hover{
    background:#0b5ed7;
}

/* Delete button */
.swal-delete-btn{
    background:#dc3545;
    color:white;
    border:none;
    padding:5px 14px;
    font-size:13px;
    border-radius:4px;
    margin-right:8px;
}

/* Delete hover */
.swal-delete-btn:hover{
    background:#bb2d3b;
}

/* space between buttons */
.swal2-actions{
    gap:8px;
}