/* ============================================================
   Warming Up Kids — Admin CSS
   Layout: Solarix-style slim icon sidebar + h-menu topbar
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary:        #378add;
    --primary-h:      #1d4ed8;
    --primary-light:  rgba(37,99,235,0.10);
    --sb-bg:          #181824;
    --sb-width:       60px;
    --topbar-h:       52px;
    --text-1:         #1e293b;
    --text-2:         #64748b;
    --text-3:         #94a3b8;
    --border:         #e2e8f0;
    --bg:             #f1f5f9;
    --white:          #ffffff;
    --success:        #16a34a;
    --warning:        #d97706;
    --danger:         #dc2626;
    --radius:         4px;
    --shadow:         0 1px 3px rgba(0,0,0,0.07);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: "Inter", sans-serif;;
    background: var(--bg);
    color: var(--text-1);
    font-size: 13px;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }

#branchMap { width: 100%; height: 220px; border-radius: var(--radius); margin-top: 8px; border: 1.5px solid var(--border); }
#mapSearchBox {}
.full {width:100%!important;}
/* In admin.css */
gmp-place-autocomplete {
    --gmp-input-border: 1px solid var(--border-color);
    --gmp-input-border-radius: 6px;
    --gmp-input-padding: 8px 12px;
    --gmp-input-background: var(--input-bg);
    --gmp-input-color: var(--text-1);
    --gmp-input-font-family: 'Plus Jakarta Sans', sans-serif;
    --gmp-input-font-size: 14px;
    --gmp-input-placeholder-color: var(--text-3);
    width: 100%;
    display: block;
}
gmp-place-autocomplete .input-container div.autocomplete-icon, gmp-place-autocomplete .input-container button.clear-button {height: auto!important;}

/* Table */
.table_view.data_table {background: transparent;border:0;border-radius:0px;font-family: 'Inter';font-size: 13px;}
.table_view.data_table .list_table {background:var(--surface);border-bottom:0px solid #d9d9d9;overflow:hidden;margin-bottom:0px;border-collapse: separate;border-spacing: 0;width: 100%;}
.table_head, table.dataTable thead th, table.dataTable tfoot th {border-bottom:1px solid #cfcfcf;background:#cadff7;font-size: 12px;font-family: 'Inter';color:#0c314e;font-weight: 500!important;}
.table_view .list_table .table_head .col {padding: 10px 15px;border-left:1px solid #a6c4e6;border-top: 1px solid #a6c4e6;border-bottom: 1px solid #a6c4e6;font-weight: 500;}
.table_view .list_table .table_body .col {padding: 7px 15px;border-left: 1px solid #ced0d1;}
.table_view .list_table .col {}
.table_view .list_table .col1 {border-left: 0;}
.table_view .list_table .col.col1 {border-left: 0px solid #ced0d1;}
.table-panel {background: #fff;border: 0px solid #ced0d1;border-radius: 0px;overflow: hidden;box-shadow: none;margin-bottom:0px;}
.table-panel.no_border {background: transparent;border: 0;border-radius: 0;overflow: hidden;box-shadow: none;margin-bottom: 0;}
.table-toolbar {
  padding: 14px 20px; border-bottom: 1px solid #ced0d1;
  display: flex; align-items: center; gap: 10px; background: var(--surface);
}
.table-body { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead tr { background: var(--surface2); border-bottom: 1px solid #ced0d1; }
.data-table th {
  padding: 10px 16px; text-align: left;
  font-family: 'Inter'; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t4); white-space: nowrap;
}
.data-table td { padding: 5px 10px; color: var(--t2); border-bottom: 1px solid #ced0d1; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface2); }
.td-bold { font-weight: 600; color: var(--t); }
.td-code {min-width: 34px;height: 34px;font-family: 'Inter';font-size: 12px;font-weight: 600;padding: 0 5px;line-height: 34px;color: #5a433b;background: rgb(255 193 7 / 25%);text-align: center;border-radius: 4px;border: 1px solid #FFC107;display: inline-block;}
.td-actions { display: flex; gap: 6px; }

.table-search { position: relative; flex: 1;margin-right: 0px;min-width:250px;max-width:250px;flex:1}
.table-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #111; pointer-events: none;margin-right: 10px; }
.table-search-icon i {}
.table-search input {height: 38px; padding: 0 10px 0 35px;background: #fff; border: 1px solid #96a5ad;font-size: 12px; color: var(--t); outline: none; width: 100%;transition: var(--transition);}
.table-search input:focus {border-color: #dbdbdb!important;box-shadow: none !important;}
.dataTables_wrapper .dataTables_info {font-size: 12px;opacity: .8;font-size: 12px;opacity: .6;padding-top:15px!important;padding: 15px;}
.dataTables_wrapper .dataTables_paginate {padding-top: 15px!important;padding: 15px;}
.dt-layout-row {margin:0!important;}
.dt-layout-row.dt-layout-table {margin: 0 0 10px!important;}
.dt-layout-row.data_table_footer {margin:0; padding:0 15px;font-size: 12px;}
.dt-layout-row.data_table_footer .dt-info {font-size: 12px;}
.dt-layout-row.data_table_footer .dt-layout-cell {}
.dt-layout-row.data_table_footer .dt-layout-cell .dt-paging {}
.dt-layout-row.data_table_footer .dt-layout-cell .dt-paging .dt-paging-button {background: #fff !important;color: #111 !important;border-color: #999 !important;border-radius: 6px !important;min-width: 36px !important;height: 36px;line-height: 36px;font-size: 12px;display: inline-block !important;padding: 0 10px !important;text-align: center !important;opacity: .5;margin: 0 2.5px !important;}

/* ── TAGS / BADGES ──────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-family: 'Inter'; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; border: 1px solid transparent; white-space: nowrap;
}
.tag-green  {background: #16a34a;color: #fff;}
.tag-red    { background: var(--danger-light);  color: var(--danger-h);  border-color: rgba(239,68,68,.2);  }
.tag-amber  { background: var(--warning-light); color: var(--warning-h); border-color: rgba(245,158,11,.2); }
.tag-blue   { background: rgba(59,130,246,.2); color: #2449e0; border-color: rgba(59,130,246,.2); }
.tag-purple { background: var(--purple-light);  color: var(--purple);    border-color: rgba(139,92,246,.2); }
.tag-gray   { background: var(--surface3);      color: var(--t3);        border-color: var(--border); }
.tag-pink   { background: var(--pink-light);    color: var(--pink);      border-color: rgba(236,72,153,.2); }
.tag-orange { color: #F44336; }

.status.tag-green {color: #16a34a;font-size: 12px;font-weight: 600;background:transparent;}

/* ── FLASH MESSAGES ─────────────────────────────────────── */
.flash {padding: 15px; border-radius: 8px;font-size: 14px;margin-bottom: 10px; border: 1px solid transparent;display:grid; grid-template-columns: 1fr 350px;align-items:center;justify-content:space-between;gap: 20px;}
.flash.full {display:block;}
.flash .content_section {display:flex;align-items:center;flex:1;gap: 5px;align-items:flex-start;}
.flash .button_section {display:flex;align-items:center;justify-content:flex-end;gap:0px;}

.flash .title {font-weight: 600;font-size: 12px;width: calc(100% - 25px);float: right;font-family: 'Inter';margin: 0;}
.flash .title .sub {display:block;font-weight: 400;color: #111;font-size: 12px;line-height: 18px;margin-top: 5px;opacity: .6;}
.flash i.alert_icon {font-size: 14px;width: 25px;text-align: left;position: relative;top: 3px;}

.flash.success {background: #e7fff3;color: #065f46;border-color: #b3f3d3;}
.flash.success .title {color:#00a28b;}
.flash.success .title > a {color:#08463d;text-decoration:none;display: block;}
.flash.success .title > .sub {color:#08463d;opacity: .8;margin-top: 0;}
.flash.success i.alert_icon {color:#00a28b;}

.flash.white_success {background: #fff;color: #065f46;border-color: #b3f3d3;}

.flash.error   { background: #fffcf1;  color: #111;  border-color:#ffcd84; }
.flash.error .title {color:#FF9800;}
.flash.error i.alert_icon {color:#FF9800;}
.flash.error .btn.primary {background: #FF9800;color: #fff;border: 1px solid #ff9800;}

.flash.info    { background: #e4f3ff;  color:#3c739e; border-color: #c5e5ff; }
.flash.info .title {color:#2774cc;}
.flash.info i.alert_icon {color:#2774cc;}

.flash.warning { background: #fff6f7; color: #111; border-color: #ffc9cf; }
.flash.warning .title {color:#dd4343;}
.flash.warning i.alert_icon {color:#dd4343;}

.flash.warning.enabled {display: flex;align-items:flex-start; gap: 10px;padding: 15px;background: #f8fafc;border-radius: 6px;border: 1px solid #ced0d1;margin-bottom: 0px;}
.flash.warning.enabled .title {color:#111;}
.flash.warning.enabled i {color:#4caf79;}

.flash.close   { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 18px; line-height: 1; opacity: .6; }
.flash.close .title {}
.flash.close i.alert_icon {color:#FF9800;}
.flash.close:hover { opacity: 1; }

/* ── FORMS ──────────────────────────────────────────────── */
.form-group { margin-bottom: 10px; }
.form-group.flex {gap:10px;}
.form-group.grid {gap:10px;margin: 0;display: grid;grid-template-columns: 1fr auto;}
.form-group .input_sub {font-size: 11px;opacity: .6;display: block;margin-top: 5px;}
.form-label.flex {justify-content: space-between;gap: 5px;}
.form-label.flex a.right_micro_link {font-size: 11px;text-decoration: none;font-weight: 400;opacity: .6;color: #111;}
.form-label.flex a i {}
.small-form-label {}
.form-label {display:flex;font-size:12px;font-weight:500;margin-bottom:10px;color:#111;align-items: center;gap: 5px;}
.form-label.red {color: #dd4343;}
.form-label.full {display:block;}
.form-label .sub {display:block;font-weight:400;opacity:.6;}
.form-input:focus{}
.form-label input[type=checkbox] {}
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-hint   { display: block; font-size: 11.5px; color: var(--t4); margin-top: 4px; }
.form-input {width: 100%; padding:10px 15px;background: #fff; border:1px solid #ccc;border-radius: 4px; font-family: 'Inter';font-size: 12px;line-height: 16px; color: var(--t);transition: var(--transition); outline: none; appearance: none;}
.form-input.zero_radius {border-radius:0;}
.form-group.icon_form {}
.form-group.icon_form i {position: absolute;margin: 12px;color: #111;}
.form-group.icon_form .form-input {padding: 10px 15px 10px 40px;}
.form-input:hover { border-color: var(--border2); }
.form-input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.form-input::placeholder { color: var(--t5); }

select.form-input,.search_container .dt-length select {height:38px;min-width: 200px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat: no-repeat; background-position: right 12px center;padding-right: 36px; cursor: pointer;}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;margin-bottom: 10px;}
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;margin-bottom: 10px;}

.form-grid-flex {display: flex;flex-wrap: wrap;gap: 10px;}
.form-grid-flex > * {flex: 0 0 calc((100% - 40px) / 5);}
.form-grid-2 .form-group, .form-grid-3 .form-group {margin-bottom: 0;}
.form-grid-2 .form-group .form-input, .form-grid-3 .form-group .form-input {width:100%;min-width: unset;}
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.input-error   { border-color: var(--danger) !important; }
.input-err-msg { display: block; font-size: 11.5px; color: var(--danger); margin-top: 4px; }


/* ── App Shell ───────────────────────────────────────────── */

.app-shell {
    display: flex;
    height: 100vh;background: #181824;
    overflow: hidden;
}

/* ── Slim Sidebar ────────────────────────────────────────── */

.slim-sidebar {width: 60px;min-width: 60px;
    width: var(--sb-width);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
    z-index: 200;
    overflow: visible;
}

.sb-logo {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sb-logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.slim-nav {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: visible;
}

.slim-nav-item {
    position: relative;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border: none;
    background: none;
    text-decoration: none;
    
}

.slim-nav-item i {width: 40px;font-size: 22px;height: 40px;border-radius:6px;display: flex;justify-content: center;align-items: center;color: #666;}
.slim-nav-item:hover {

}

.slim-nav-item.active {

}

.slim-nav-item.active i {color: #fff;background: var(--primary);}
.slim-nav-item:hover i {color: #fff;}

.slim-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}

/* Tooltip */
.slim-nav-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.slim-nav-item[data-tooltip]::before {
    content: '';
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1e293b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}

.slim-nav-item[data-tooltip]:hover::after,
.slim-nav-item[data-tooltip]:hover::before {
    opacity: 1;
}

.slim-nav-spacer {
    flex: 1;
}

.slim-nav-sep {
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px auto;
}

/* ── Main Wrap ───────────────────────────────────────────── */

.main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Tabs ──────────────────────────────────────────────── */
.tab_container {display:flex;flex-wrap:wrap;background:transparent;border: 1px solid #ced0d1;border-radius: 4px;overflow: hidden;height: 38px;gap: 0px;align-items: center;}
.tab_container .tab_btn {display: flex;align-items: center;gap: 5px;font-family: 'Inter';color: #273042;font-size: 12px;line-height: 18px;font-weight: 500;height: 38px;min-width: 40px;padding: 10px 15px;border:0;border-left: 1px solid #ced0d1;background:#fff;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.tab_container .tab_btn:nth-child(1) {border-left: 0;}
.tab_container .tab_btn i {font-size: 14px;font-weight: 500;}
.tab_container .tab_btn.active, .tab_container .tab_btn:hover {background:rgb(36 73 224 / 15%);cursor:pointer;color: #2449e0;}
.tab_container .btn {font-family: 'Inter';font-size: 12px;line-height: 18px;font-weight: 400;height: 38px;min-width: 40px;padding: 10px 15px;}
.tab_container .btn .btn_content {width:calc(100% - 23px);/*float:left;*/line-height:18px;}
.tab_container .btn .rc-tab-badge {font-size: 10px;line-height: 18px;font-weight: 700;border-radius: 50%;background: #ff3527;color: #fff;width: 18px;height:18px;text-align: center;display:inline-block;float:right;margin-left: 5px;}
.tab_container a.btn {font-family: 'Inter';font-size: 12px;line-height: 12px;font-weight: 400;height: 42px;min-width: 40px;padding: 10px 15px;}
.tab_container .btn i {margin-right:5px;line-height:18px;float:left;}
.tab_container .btn.btn-primary, .tab_container .btn.active, .tab_container .btn:hover, .tab_container .btn.btn-outline.active, .tab_container .btn.btn-outline:hover {background: #111;font-size: 12px;line-height: 12px;color:#fff;box-shadow: none;border-radius: 0;height: 42px;gap: unset;padding: 10px 15px;border-top: 0;border-right: 0;border-left: 1px solid #111;opacity: 1;}
.tab_container .btn:hover i, .tab_container .btn.active i {color:#fff!important;}
.tab_container .btn.btn-outline {background: transparent;color: #111;gap: 0;font-family: 'Inter';font-weight: 400;letter-spacing: 0;border-left: 1px solid #ced0d1;border-radius: 0;}
.tab_container .btn:nth-child(1).btn-outline {border-left:0;}

/* ── Topbar ──────────────────────────────────────────────── */

.topbar {height: 40px;max-height: 40px;
    height: var(--topbar-h);
    background: #181824;
    border-bottom: 0px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

/* H-Menu */
.h-menu {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.h-menu::-webkit-scrollbar { display: none; }

.h-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #777c88;
    cursor: pointer;

    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
    text-decoration: none;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: 1px solid #323240;
    height: 100%;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;
}
.h-menu-item i {display:none;}
.h-menu-item:hover {
    color: #fff;
    
}

.h-menu-item.h-active {
    color: #fff;
    
}

.h-menu-chevron {
    font-size: 10px;
    opacity: 0.5;
    margin-left: 2px;
}

/* H-Menu Dropdown portal */
.portal-dropdown {
    position: fixed;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 9999;
    min-width: 180px;
    display: none;
    padding: 4px 0;
}

.portal-dropdown.dd-open { display: block; }

.h-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    cursor: pointer;
    transition: background 0.12s;
}

.h-dropdown-item:hover { background: var(--bg); }

.h-dropdown-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Topbar right */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    flex-shrink: 0;
}

.tb-date {
    font-size: 11px;
    color: var(--text-3);
    padding: 0 8px;
    white-space: nowrap;
}

.tb-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: none;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    color: var(--text-2);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
}

.tb-icon-btn:hover {
    background: var(--bg);
    border-color: var(--border);
}

.tb-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.tb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-1);
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-logout {
    padding: 5px 12px;
    background: #fef2f2;
    color: var(--danger);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #fecaca;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-logout:hover { background: #fee2e2; }

/* ── Page Content ────────────────────────────────────────── */

.page-content {flex: 1; overflow-y: auto; padding:0px;scrollbar-width: thin; scrollbar-color: var(--border2) transparent;z-index: 20;border-radius: 12px 0 0 0;background: #fff; }

/* ── Flash ───────────────────────────────────────────────── */

.flash-bar { padding: 0 24px; }

.flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    margin-top: 10px;
}

.flash-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.flash-error   { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }
.flash-warning { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }

.flash-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
}



/* ── STAT CARDS ─────────────────────────────────────────── */
.stat-grid {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap: 10px;overflow: hidden;border-radius: 0;}
.page_left .stat-grid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.stat-grid > li {-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card {list-style: none;border-radius: 0px;padding: 15px;box-shadow: none;position: relative;overflow: hidden;background: #fff;align-items: center;border: 1px solid #ced0d1;border-radius: 6px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card a {text-decoration:none;}
.stat-grid > li.stat-card img {height: 40px;width: 40px;float: right;border: 1px solid #999;;border-radius: 10px;padding: 10px;}
.stat-grid > li.stat-card .context {display:flex;gap: 10px;}
.stat-grid > li.stat-card .stat-lbl { font-size: 12px; font-weight: 400; color: #111; margin: 0;font-family: 'Inter'; opacity: .6;margin-bottom: 10px;}
.stat-grid > li.stat-card .context .stat-val {font-weight: 600;font-size: 20px;line-height:20px;margin-bottom: 0px;font-family: "Montserrat", sans-serif;color: #111;}
.stat-grid > li.stat-card .context .compare {display: inline-block;font-size: 10px;line-height: 10px;background: #f5f5f5;padding: 5px;border-radius: 4px;color: #555;font-family: 'Inter';border: 1px solid #dcdcdc;}
.stat-grid > li.stat-card .context a.card_view_link {display:flex;align-items: center;font-size:12px;line-height: 12px;color:#2449e0;text-decoration: none;margin-top: 5px;}
.stat-grid > li.stat-card .context a.card_view_link i {margin:0 0 0 2px;position: relative;top: 1px;}
.stat-grid > li.stat-card .kpi-icon {height: 38px;width: 38px;text-align: center;/*float: right;*/border: 1px solid #ced0d1;border-radius: 6px;padding: 0;font-size: 18px;line-height: 38px;position: relative;top: 1px;background:#fff;color: #111;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card .kpi-icon i {font-size: 18px;line-height: 38px;}
.stat-grid > li.stat-card .kpi-icon a {display:block;color: unset;}
.stat-grid > li.stat-card .kpi-icon a i {text-decoration:none;}
.stat-grid > li.stat-card:hover .kpi-icon {background: #111!important;color: #fff!important;border: 1px solid #111!important;cursor:pointer;}
.stat-grid > li.stat-card .blue::after   { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.stat-grid > li.stat-card .green::after  { background: linear-gradient(90deg,#22c55e,#10b981); }
.stat-grid > li.stat-card .amber::after  { background: linear-gradient(90deg,#f59e0b,#f97316); }
.stat-grid > li.stat-card .red::after    { background: linear-gradient(90deg,#ef4444,#ec4899); }
.stat-grid > li.stat-card .purple::after { background: linear-gradient(90deg,#8b5cf6,#6366f1); }
.stat-grid > li.stat-card .gray::after   { background: var(--border2); }
.stat-grid > li.stat-card:hover {cursor:pointer;border:1px solid #2449e0;}

.stat-val {  }
.stat-lbl {}
.stat-lbl .stat-chg { font-size: 12px;line-height: 12px;font-weight: 400; display:none;}

/* ── Cards ───────────────────────────────────────────────── */

.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.card-body { padding: 18px; }

/* ── Badges ──────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef9c3; color: #a16207; }
.badge-danger  { background: #fee2e2; color: var(--danger); }
.badge-info    { background: #dbeafe; color: #1d4ed8; }
.badge-gray    { background: #f1f5f9; color: #475569; }
.badge-purple  { background: #f5f3ff; color: #6d28d9; }


/* ── BUTTONS ────────────────────────────────────────────── */
.btn {display: flex;align-items: center;text-align: center;justify-content: center;border: 1px solid #378ADD;background: #e8f2fc;padding: 10px;border-radius: 6px;font-family: 'Inter';font-size: 12px;line-height: 16px;font-weight: 500;cursor: pointer;text-decoration: none;width: auto;color: #1a5fa0;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.btn.purple {background: rgb(192 202 242 / 15%);cursor: pointer;color: #378add;border: 1px solid #bfc9f2;}
.btn_count {display:inline-flex;align-items:center;justify-content:center;min-width: 16px;line-height: 10px;padding: 3px 5px;border-radius: 8px;background: #F44336;color: #fff;font-size: 10px;font-weight: 500;font-family: 'Plus Jakarta Sans';}
.btn i {margin-right:5px;float: left;font-size: 12px;line-height: 16px;}
.btn i.hgi {font-size: 16px;}
.btn i.right_icon {margin-left:5px;float: right;}
.btn:hover {background:#378add;color:#fff;border:1px solid #378add;color:#fff;}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn.primary { background: #378add; color: #fff;border:1px solid #378add;}
.btn-primary:hover { background: var(--primary-h); box-shadow: 0 4px 14px rgba(59,130,246,0.4); transform: translateY(-1px); }

.btn.green {background: #36bd60;color: #fff;border: 1px solid #36bd60;}
.btn-green:hover { background: #2ea453!important;border: 1px solid #2ea453; color:#fff!important; }

.btn.orange {background: #ff5726;color: #fff;border: 1px solid #ff5726;}
.btn-orange:hover { background: #ff5726;border: 1px solid #ff5726; color:#fff; }

.view_small_btn {display: inline-flex;gap: 5px;align-items: center;padding: 8px 10px;border-radius: 4px;border: 1px solid #ccc;background: #f1f5f9;font-size: 12px;line-height: 12px;font-family: 'Inter';font-weight: 400;color: #111;text-decoration: none;transition: all .15s;cursor:pointer;}
.view_small_btn.red, .btn.red {background:#ef4444;border:1px solid #ef4444;color:#fff;}
.view_small_btn.green {background: #36bd60;color: #fff;border: 1px solid #36bd60;}
.view_small_btn.amber {background: #FF9800;border: 1px solid #FF9800;color: #fff;}
.view_small_btn.purple {background: #c251d5;border: 1px solid #c251d5;color: #fff;}
.view_small_btn.red:hover, .btn.red:hover {background:#ef4444;color:#fff!important;border:1px solid #ef4444;}
.view_small_btn i {position: relative;font-size: 14px!important;}
.view_small_btn:hover {background: #2449e0;border:1px solid #2449e0;color:#fff;}
.view_small_btn:hover i {}


.section_card {background: #fff;padding: 0px;border-bottom: 1px solid #ced0d1;border-radius: 0px;margin-bottom:0px;}
.section_card.small_section {}
.section_card.small_section form {padding:15px;}
.section_card.small_section .inner_section {margin-bottom: 15px;}
.section_card.small_section .inner_section .title {font-size: 12px;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #cccc;color: #378add;font-weight: 600;}
.section_card.small_section .flash {padding:15px;border-radius: 6px;font-size: 12px;}
.section_card.small_section .heading_button_section {display: flex;justify-content: space-between;border-bottom: 1px solid #ced0d1;padding-bottom: 15px;margin-bottom: 15px;}
.section_card.small_section .heading_button_section .section_title {border-bottom: 0px solid #dbdbdb;padding-bottom: 0px;}
.section_card.small_section .heading_button_section .small_right_button_section {display: flex;gap: 5px;}
.section_card.small_section .heading_button_section .small_right_button_section .btn {height: 36px;width: 36px;border: 1px solid #999;background: #fff;color: #111;border-radius: 4px;font-weight: 300;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.section_card.small_section .heading_button_section .small_right_button_section .btn i {margin: 0;}
.section_card.small_section .section_title {border-bottom: 1px solid #ced0d1;padding: 15px;margin-bottom: 0px;font-size: 14px;line-height: 14px;}
.section_card.small_section .section_title .sub {display:block;font-size: 12px;font-weight:400;opacity:.6;margin-top: 5px;}
.section_card.small_section .section_title.full {display:block;}
.notesDisplay {font-size: 12px;line-height: 20px;padding: 10px 15px;background: rgb(255 249 229);margin-bottom: 15px;border-radius: 4px;border: 1px dashed #f1bd22;}

.search_container {padding:15px;display: flex;gap: 10px;border-radius:0px;overflow:hidden;    align-items:center;flex-wrap:wrap;}
.search_container > *{flex:0 0 auto;width:auto;min-width:unset;}
.search_container .label_form_group {display:flex;gap:5px;align-items:center;}
.search_container .dt-length {flex: 0 0 auto;}
.search_container .dt-length label, .small-form-label {font-size: 12px;opacity: .8;display: flex;align-items: center;gap: 10px;}
.search_container .dt-length label {margin: 0;}
.search_container .dt-length select {min-width:auto!important;padding: 10px 15px;background: #fff;border: 1px solid #96a5ad;border-radius: 4px;font-family: 'Inter';font-size: 12px;line-height: 16px;color: var(--t);transition: var(--transition);outline: none;appearance: none;}
.search_container .dataTables_filter {}
.search_container .dataTables_filter label {}
.search_container .dataTables_filter label input {}
.search_container .form-input {width: auto;}
.search_container .dt-search {}
.search_container .table-search {}
.search_container .table-search .form-input {width: 100%;}
.search_container .btn {border-radius:4px;}
.inline-form-label {font-size:11px; color:#64748b;margin-bottom:5px;display:block;}

/* Progress Bar */
.progress_bar {border-radius:20px;height:10px;background:#ecf0f1;transition:width .4s ease;overflow:hidden;margin: 10px 0;}
.progress_bar .progress_bar_fill {border-radius:20px;height:10px;transition:width .4s ease;background: #10B981; background: linear-gradient(90deg, rgba(16, 185, 129, 1) 0%, rgba(81, 207, 165, 1) 35%, rgba(106, 222, 183, 1) 100%);transform:scaleX(0);transform-origin:left center;animation:growProgress 2.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;animation-delay:1.5s;}
.progress_bar.blue {background:#fff;}
.progress_bar.blue .progress_bar_fill {background: #2449e0;background: #10B981; background:linear-gradient(90deg, rgb(36 73 224) 0%, rgb(83 113 235) 35%, rgb(156 176 255) 100%);}
@keyframes growProgress{
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}

/* ── Login page ──────────────────────────────────────────── */

.login-outer {
    min-height: 100vh;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logomark {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 14px;
}

.login-logo h1 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
}

.login-logo p {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 10px 13px;
    font-size: 12px;
    color: var(--danger);
    margin-bottom: 16px;
}

.login-btn {
    width: 100%;
    padding: 11px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    margin-top: 4px;
}

.login-btn:hover { background: var(--primary-h); }
.center {text-align:center!important;}


/* ── Quick action cards ──────────────────────────────────── */

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ============================================================
   WUK — Branches feature styles
   Append this block into public/css/wuk.css (or @import it)
   ============================================================ */

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.wuk-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 10px;
    padding: 14px 16px;
}

.wuk-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wuk-stat-primary .wuk-stat-icon  { background: #ede9fe; color: #7c3aed; }
.wuk-stat-success .wuk-stat-icon  { background: #dcfce7; color: #16a34a; }
.wuk-stat-info .wuk-stat-icon     { background: #dbeafe; color: #2563eb; }
.wuk-stat-warning .wuk-stat-icon  { background: #fef9c3; color: #ca8a04; }

.wuk-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color);
}
.wuk-stat-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: 2px;
}

/* ── Branch avatar (initials badge) ─────────────────────────────────────── */
.wuk-branch-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary, #7c3aed) 0%, #a855f7 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.wuk-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}
.wuk-status-active   { background: #dcfce7; color: #15803d; }
.wuk-status-inactive { background: #f3f4f6; color: #6b7280; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.wuk-empty-state {
    text-align: center;
    color: var(--bs-secondary-color, #9ca3af);
}
.wuk-empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
    opacity: .4;
}

/* ── Danger zone card ────────────────────────────────────────────────────── */
.card.border-danger {
    border-color: #fca5a5 !important;
}

.page_left {width:calc(100% - 450px);float:left;}
.page_right {width:450px;float:right;min-height: 100vh;border-left:1px solid #ced0d1;background:#fff;}
.section, .inner_card {padding: 15px;}
/* ── Page header ─────────────────────────────────────────── */
.page-header {display: flex;align-items: center;justify-content: space-between;gap: 10px;flex-wrap: wrap;margin-bottom: 0px;padding: 15px;border-bottom: 0px solid #d1d5db;}
.page-header .page_title_section {}
.page-header .page_title_section h1 {font-size: 16px;color: #111;line-height: normal;font-weight:600;}
.page-header .page_title_section h1 .status-pill, .page-header .page_title_section h1 .type-pill {display: inline-block;font-size: 9px;font-weight: 500;opacity: 1;padding:3px 10px;margin: 0 0 0 3px;border-radius: 20px;font-family: 'Inter';letter-spacing: 0;position: relative;top: -2px;}

/* ── Status Pill ─────────────────────────────────────────── */
.status-pill {display: inline-flex;gap: 5px;align-items: center;font-size: 10px;line-height: 12px;font-weight: 500;opacity: 1;padding: 3px 10px;margin: 0 0 0 3px;border-radius: 20px;font-family: 'Inter';letter-spacing: 0;}
.status-pill i {}
.status-pill.grey {background: #efefef;color: #999;border: 1px solid #d0d0d0;}
.status-pill.grey i {}
.status-pill.green {background: #36bd60;border: 1px solid #36bd60;color: #fff!important;}
.status-pill.green i {}
.status-pill.lg_green {background: #e0fbf1;color: #247c27;border: 1px solid #9be3c8;}
.status-pill.red {background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D;}
.status-pill.blue {background: #eff6ff;color: #1d4ed8;border: 1px solid #bcceff;}
.status-pill.amber {background: #FAEEDA; border: 1px solid #EF9F27; color: #633806;}
.status-pill.purple {background: #f2ebff;color: #673AB7;border: 1px solid #ddcff7;}
.page-header .page_title_section h1 > span, .section-title > .sub { display:block; font-size: 13px; color: #111; margin-top: 5px;font-weight: 400;letter-spacing: 0px;opacity:.6;} 
.inner_container .button_section { display: block; gap: 8px; align-items: center;width: 50%;float: right;text-align: right;padding: 0px;}
.page-header .page-header-actions {display: grid;grid-template-columns: 1fr auto; align-items: center;text-align: right;padding: 0px;gap: 0px;}
.page-header .page-header-actions .btn {display:inline-block;margin-left: 10px;}
.page-header .page-header-actions .btn:nth-child(1) {margin-left: 0;}
.inner_container .button_section .btn {float:right;}
.title_section {display: grid;grid-template-columns: 1fr auto;gap: revert-layer;overflow: hidden;border-radius: 0;align-items: center;padding: 15px;}
.breadcrumb {font-size: 12px;line-height: 12px;display: flex;align-items: center;gap: 5px;}
.breadcrumb i {}
.breadcrumb a {color: #378add;text-decoration:none;}
.section_card.small_section {}
.section_card {background: #fff;padding: 0px;border-bottom: 1px solid #ced0d1;border-radius: 0px;margin-bottom: 0px;}
.section_title {
    font-family: 'Inter';
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ced0d1;
    padding: 15px;
    margin-bottom: 0px;
}

.section_card.small_section .section_title {
    border-bottom: 1px solid #ced0d1;
    padding: 15px;
    margin-bottom: 0px;
    font-size: 13px;
    line-height: 13px;
}

#branchesTable_wrapper .dt-length select,
#branchesTable_wrapper .dataTables_filter input {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
#branchesTable_wrapper .dataTables_filter input:focus { border-color: var(--primary); }
#branchesTable_wrapper .dataTables_info,
#branchesTable_wrapper .dt-length label,
#branchesTable_wrapper .dataTables_filter label {
    font-size: 12px;
    color: var(--text-2);
}
#branchesTable_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius) !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    border: 1px solid var(--border) !important;
    margin-left: 3px !important;
}
#branchesTable_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
#branchesTable_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; }
.dt-loading { text-align:center; padding: 40px; color: var(--text-2); font-size: 13px; }

.contact_list {list-style:none;padding:0;margin:0;}
.contact_list > li:first-child {margin-top:0;}
.contact_list > li {display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:10px;}
.contact_list > li i {width:16px;font-size: 16px;}
.contact_list > li .content {display:flex;flex:1;}
.contact_list > li .heading {margin:0;font-weight:400;opacity:.8;}
.contact_list > li .value {word-break:break-word;}
.contact_list > li .value.flex {display: flex;justify-content: space-between;align-items: center;}
.contact_list > li .value.flex .view_button {text-decoration: none;font-weight: 400;color: #111;opacity: .6;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.contact_list > li .value.flex .view_button:hover {opacity: 1;}

/* ── Chip selectors ─────────────────────────────────────────────── */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.sel-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #bccde2;
    background: #e5f1ff;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    user-select: none;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;
}
.sel-chip:hover, .sel-chip.active {background: #3574ff;border-color: #3574ff;color: #fff;}

.chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: .5; flex-shrink: 0;
}
.sel-chip.active .chip-dot { opacity: 1; }

.sched-chip-group .sel-chip {}

/* ── Coach avatar chips ─────────────────────────────────────────── */
.coach-chip-group { gap: 12px; }
.coach-chip {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; cursor: pointer; padding: 4px;
}
.coach-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 500;
    border: 2px solid transparent; transition: all .15s;
}
.coach-name {
    font-size: 11px; color: var(--text-3);
    max-width: 52px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.coach-chip.active .coach-avatar { border-color: var(--primary); }
.coach-chip.active .coach-name { color: var(--primary); }
.avatarPreviewWrap {width:80px;height:80px;border-radius:50%;overflow:hidden;background:#f5f5f5;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}
.avatarPreviewWrap img {width:100%;height:100%;object-fit:cover;display:none;border-radius:50%;}
.cropModal {position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);align-items:center;justify-content:center;}
.cropModal .crop_bg {background:var(--bg-1,#fff);border-radius:12px;width:380px;max-width:94vw;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.18);}
.cropModal .crop_bg .crop_img_container {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-1);}
.cropModal .crop_bg .crop_img_container .title {font-size:14px;font-weight:500;color:var(--text-1);}
.cropModal .crop_bg .cropper {background:#111;position:relative;height:280px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cropModal .crop_bg .cropper img {max-height:280px;max-width:100%;display:block;}
.cropModal .crop_bg .zoom_container {padding:10px 16px;border-top:1px solid var(--border-1);display:flex;align-items:center;gap:10px;}
.cropModal .crop_bg .zoom_container .size_sub {font-size:11px;color:var(--text-3);min-width:50px;text-align:right;}

/* ── Day pills ──────────────────────────────────────────────────── */
.day-pill {
    width: 40px; height: 34px; display: flex; align-items: center;
    justify-content: center; border-radius: 6px;
    border: 1px solid #bccde2;
    background: #e5f1ff;
    color: var(--text-2); cursor: pointer; transition: all .15s;
    user-select: none;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;
}
.day-pill:hover, .day-pill.active {background: #3574ff;border-color: #3574ff;color: #fff;}

/* ── Time picker ────────────────────────────────────────────────── */
.time-row { display: flex; gap: 10px; align-items: flex-start; }
.time-box { flex: 1; position: relative; }
.time-arrow { padding-top: 22px; color: var(--text-3); font-size: 13px; flex-shrink: 0; }

.time-display {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-radius: var(--radius);
    border:1px solid #ccc; background: var(--card-bg);
    cursor: pointer; transition: border-color .15s;
}
.time-display:hover { border-color: var(--primary); }
.time-sublabel { font-size: 10px; color: var(--text-3); margin-bottom: 2px; }
.time-val { font-size: 15px; font-weight: 500; color: var(--text-1); }

.time-picker-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border:1px solid #ccc;
    border-radius: 4px; padding: 10px; z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.time-picker-panel.open { display: block; }

.time-slots {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 5px; max-height: 180px; overflow-y: auto;
}
.time-slot {
    padding: 5px 4px; text-align: center; font-size: 12px;
    border-radius: 4px; border: 1px solid #bccde2;
    background: #e5f1ff; color: var(--text-2);
    cursor: pointer; transition: all .12s;
}
.time-slot.selected, .time-slot:hover { background: #3574ff; color: #fff;border-color: #3574ff; }

.time-slot.disabled { opacity: .3; pointer-events: none; }

/* ── Attendance module ──────────────────────────────── */
.att-table-card,
.att-chart-card {
    background: var(--card-bg, #fff);
    border: 0.5px solid var(--border-color, #e5e5e5);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.att-table-title  { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.att-chart-label  { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: .5rem; }

/* Take attendance wrapper */
.att-take-wrap    { max-width: 680px; padding: 1.5rem 0; }
.att-take-title   { font-size: 17px; font-weight: 500; }
.att-take-sub     { font-size: 12px; color: var(--text-muted); }

/* Live pill */
.att-live-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(29,158,117,.12); color: #0F6E56;
    font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: 20px; margin-bottom: 1rem;
}
.att-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: #1D9E75;
    animation: attPulse 1.4s ease-in-out infinite;
}
@keyframes attPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.att-section-label {
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    letter-spacing: .04em; margin: 1rem 0 6px;
}

/* Class selector cards */
.att-class-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--card-bg, #fff);
    border: 0.5px solid var(--border-color, #e5e5e5);
    border-radius: 10px; padding: 12px 14px;
    margin-bottom: 8px; cursor: pointer;
    transition: border-color .15s;
}
.att-class-card:hover    { border-color: #378ADD; }
.att-class-card.selected { border: 2px solid #378ADD; background: rgba(55,138,221,.06); }
.att-class-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(29,158,117,.12); color: #0F6E56;
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.att-class-meta    { flex: 1; min-width: 0; }
.att-class-name    { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.att-class-detail  { font-size: 11px; color: var(--text-muted); }
.att-class-right   { text-align: right; flex-shrink: 0; }
.att-student-count { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.att-marked-hint   { font-size: 10px; color: #0F6E56; }
.att-badge-live    { background: rgba(29,158,117,.15); color: #0F6E56; font-size: 11px; }
.att-badge-soon    { background: rgba(239,159,39,.15);  color: #854F0B; font-size: 11px; }
.att-empty         { font-size: 13px; color: var(--text-muted); padding: 1rem 0; }
.att-loading       { font-size: 13px; color: var(--text-muted); padding: .5rem 0; }

/* Counters */
.att-counter-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 1rem;
}
.att-counter        { background: var(--surface-1, #f7f7f5); border-radius: 8px; padding: 10px 12px; text-align: center; }
.att-counter-num    { font-size: 22px; font-weight: 500; }
.att-counter-label  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.att-c-present      { color: #1D9E75; }
.att-c-absent       { color: #E24B4A; }
.att-c-makeup       { color: #EF9F27; }

/* Toolbar */
.att-toolbar        { display: flex; gap: 8px; margin-bottom: .75rem; align-items: center; }
.att-search-icon    { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; }
.att-search-input   { padding-left: 28px !important; }

/* Legend */
.att-legend {
    display: flex; gap: 12px; font-size: 11px;
    color: var(--text-muted); margin-bottom: .75rem; flex-wrap: wrap;
}
.att-leg-dot      { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; vertical-align: middle; }
.att-dot-present  { background: #1D9E75; }
.att-dot-absent   { background: #E24B4A; }
.att-dot-makeup   { background: #EF9F27; }

/* Student grid */
.att-student-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 1.25rem;
}
.att-stu-card {
    background: var(--card-bg, #fff);
    border: 0.5px solid var(--border-color, #e5e5e5);
    border-radius: 12px; padding: 14px 10px 12px;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; cursor: pointer; user-select: none;
    transition: border-color .12s, background .12s;
}
.att-stu-card:hover           { border-color: #B4B2A9; }
.att-stu-card.att-stu-present { background: rgba(29,158,117,.08); border-color: #5DCAA5; }
.att-stu-card.att-stu-absent  { background: rgba(226,75,74,.08);  border-color: #F09595; }
.att-stu-card.att-stu-makeup  { background: rgba(239,159,39,.08); border-color: #FAC775; }

/* Avatar */
.att-stu-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 500; position: relative;
    background: var(--surface-0, #f1efe8); color: var(--text-secondary);
    border: 0.5px solid var(--border-color, #e5e5e5);
}
.att-av-present { background: #1D9E75 !important; color: #fff !important; border-color: transparent !important; }
.att-av-absent  { background: #E24B4A !important; color: #fff !important; border-color: transparent !important; }
.att-av-makeup  { background: #EF9F27 !important; color: #000 !important; border-color: transparent !important; }

.att-check-icon {
    position: absolute; bottom: -2px; right: -2px;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; border: 1.5px solid #fff;
}
.att-check-present { background: #1D9E75; color: #fff; }
.att-check-absent  { background: #E24B4A; color: #fff; }
.att-check-makeup  { background: #EF9F27; color: #000; }

.att-stu-name  { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.3; }
.att-stu-age   { font-size: 11px; color: var(--text-muted); }
.att-stu-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; }
.att-badge-none    { background: var(--surface-1, #f1efe8); color: var(--text-muted); border: 0.5px solid var(--border-color); }
.att-badge-present { background: #1D9E75; color: #fff; }
.att-badge-absent  { background: #E24B4A; color: #fff; }
.att-badge-makeup  { background: #EF9F27; color: #000; }

.att-face-btn { opacity: .5; }

/* Submit bar */
.att-submit-bar   { border-top: 0.5px solid var(--border-color, #e5e5e5); padding-top: 1rem; margin-top: .5rem; }
.att-prog-label   { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.att-progress     { height: 4px; background: var(--surface-0, #f1efe8); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.att-progress-fill { height: 4px; background: #378ADD; border-radius: 2px; transition: width .3s; }

/* ============================================================
   ACTIVITIES MODULE
   ============================================================ */

/* Page header */
.act-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.act-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

.act-page-title i {
    font-size: 17px;
    color: #888;
}

.act-page-title small {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* Two-panel shell */
.act-shell {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1px;
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    min-height: 520px;
}

/* Left panel */
.act-left {
    background: #ffffff;
}

.act-left-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #ebebeb;
}

.act-left-head h3 {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.act-count-badge {
    font-size: 12px;
    font-weight: 400;
    color: #888;
    margin-left: 4px;
}

/* Card grid */
.act-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    padding: 16px;
}

.act-loading,
.act-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 13px;
}

/* Activity card */
.act-card {
    border: 1px solid #ebebeb;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    cursor: default;
    transition: border-color 0.15s;
}

.act-card:hover {
    border-color: #c0c0c0;
}

.act-card-banner {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.act-card-banner i {
    font-size: 30px;
}

.act-card-body {
    padding: 10px 12px 12px;
}

.act-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.act-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.act-card-desc {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
    min-height: 16px;
    line-height: 1.5;
}

.act-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.act-card-view-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: none;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}

.act-card-view-btn:hover {
    background: #f5f5f5;
    color: #378ADD;
}

/* Badges */
.act-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
}

.act-badge-active {
    background: #e6f4ee;
    color: #1a7a4a;
}

.act-badge-inactive {
    background: #f2f2f2;
    color: #888;
}

/* Buttons */
.act-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid #378ADD;
    background: #e8f2fc;
    color: #1a5fa0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.act-btn-primary:hover {
    background: #378ADD;
    color: #ffffff;
}

.act-btn-cancel {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid #e0e0e0;
    background: none;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.act-btn-cancel:hover {
    background: #f5f5f5;
}

.act-btn-save {
    flex: 1;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #378ADD;
    background: #e8f2fc;
    color: #1a5fa0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.act-btn-save:hover {
    background: #378ADD;
    color: #ffffff;
}

.act-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    color: #333;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}

.act-btn-sm:hover {
    background: #f5f5f5;
}

/* Icon button */
.act-ico-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    flex-shrink: 0;
}

.act-ico-btn:hover {
    background: #f5f5f5;
    color: #333;
}

/* Right form panel */
.act-right {
    background: #fafafa;
    display: flex;
    flex-direction: column;
}

.act-right-head {
    padding: 14px 18px;
    border-bottom: 1px solid #ebebeb;
}

.act-right-title {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.act-right-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.act-right-body {
    padding: 16px 18px;
    flex: 1;
    overflow-y: auto;
}

.act-right-footer {
    padding: 12px 18px;
    border-top: 1px solid #ebebeb;
    display: flex;
    gap: 8px;
}

/* Form fields */
.act-field {
    margin-bottom: 14px;
}

.act-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    margin-bottom: 5px;
}

.act-field input[type="text"],
.act-field textarea,
.act-field select {
    width: 100%;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.act-field input[type="text"]:focus,
.act-field textarea:focus,
.act-field select:focus {
    outline: none;
    border-color: #378ADD;
}

.act-field textarea {
    resize: vertical;
}

.act-field-note {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.act-field-error {
    display: block;
    font-size: 11px;
    color: #c0392b;
    margin-top: 3px;
    min-height: 14px;
}

/* Icon picker */
.act-icon-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}

.act-icon-opt {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #555;
}

.act-icon-opt:hover {
    background: #eef4fb;
    border-color: #378ADD;
}

.act-icon-opt.selected {
    border: 2px solid #378ADD;
    background: #e8f2fc;
    color: #1a5fa0;
}

/* Color picker */
.act-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.act-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    box-sizing: border-box;
}

.act-color-dot.selected {
    border: 3px solid #1a1a1a;
}

/* ── Activity Show Page ── */

.act-show-hero {
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.act-show-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.act-show-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.act-show-hero-icon i {
    font-size: 28px;
    color: #ffffff;
}

.act-show-hero-name {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 4px;
}

.act-show-hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    align-items: center;
}

.act-show-hero-meta i {
    font-size: 11px;
    margin-right: 3px;
}

.act-show-status-pill {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: #ffffff;
}

.act-show-hero-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.act-show-hero-btn {
    padding: 7px 13px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.act-show-hero-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Stat strip */
.act-show-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.act-show-stat-card {
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 12px 14px;
}

.act-show-stat-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.act-show-stat-val {
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
}

.act-show-stat-sub {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* Tabs */
.act-show-tabs {
    display: flex;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 14px;
    gap: 0;
}

.act-show-tab {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.act-show-tab:hover {
    color: #333;
}

.act-show-tab.active {
    color: #378ADD;
    border-bottom: 2px solid #378ADD;
}

/* Tab panels */
.act-hidden {
    display: none;
}

/* Section card */
.act-show-section {
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.act-show-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid #ebebeb;
    background: #fafafa;
}

.act-show-section-head h4 {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.act-show-section-head h4 i {
    font-size: 14px;
    color: #888;
}

.act-show-bio {
    padding: 14px 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    border-bottom: 1px solid #ebebeb;
}

.act-show-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.act-show-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
}

.act-show-info-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.act-show-info-lbl {
    color: #888;
}

.act-show-info-val {
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.act-show-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

.act-show-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: #aaa;
}

/* ============================================================
   END ACTIVITIES MODULE
   ============================================================ */

/* ── Scrollbar ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }