:root {
  --bg: #0d0f1a;
  --s1: #141628;
  --s2: #1a1e35;
  --bdr: rgba(255,255,255,0.07);
  --ac: #6c63ff;
  --ac2: #00d4aa;
  --warn: #ffa94d;
  --fail: #ff6b6b;
  --txt: #eef0f8;
  --txt2: #8890b5;
  --r: 14px;
  --r2: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wrap {
  max-width: 100%;
  width: 100%;
  flex: 1;
  background-color: #c2e6e5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 1px 1px -2px rgb(178, 180, 223);
}

.hdr { display: flex; justify-content: space-between; align-items: center; background: #100958; border: 1px solid var(--bdr); border-radius: var(--r); padding: 13px 18px; margin-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.logo-ic { width: 34px; height: 34px; background: linear-gradient(135deg, var(--ac), var(--ac2)); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 16px; }
.logo-em { color: var(--ac); }
.btn-back { background: #11948f; border: 1px solid var(--bdr); color: #ffffff; padding: 7px 14px; border-radius: var(--r2); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-block; }
.btn-back:hover { border-color: var(--ac); color: var(--txt); opacity: 0.9; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.sc { border: none; border-radius: 12px; padding: 16px; text-align: center; color: white; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; }
.sc:hover { transform: translateY(-3px); }
.sc-glow { position: absolute; top: -20px; right: -20px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.sv { font-size: 22px; font-weight: 700; letter-spacing: -1px; margin-bottom: 3px; position: relative; z-index: 1; }
.sl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.9; position: relative; z-index: 1; }

.acts { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--r2); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
.btn:active { transform: scale(.97); }
.btn-g { background: linear-gradient(135deg, #00d4aa, #00b894); color: #fff; }
.btn-g:hover { opacity: .9; }
.btn-v { background: linear-gradient(135deg, #6c63ff, #4f46e5); color: #fff; }
.btn-v:hover { opacity: .9; }
.btn-o { background: #100958; border: 1px solid var(--bdr); color: #ffffff; }
.btn-o:hover { border-color: var(--ac); }

.fbox { background: #100958; border: 1px solid var(--bdr); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.flabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #ffffff; margin-bottom: 11px; }
.frow { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 9px; align-items: end; }
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #ffffff; }
.fc { background: #11948f; border: 1px solid var(--bdr); border-radius: var(--r2); padding: 8px 11px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #fff; outline: none; width: 100%; transition: border-color .2s, box-shadow .2s; }
.fc::placeholder { color: #ffffff; opacity: 0.7; }
.fc:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(108,99,255,.15); }
.fc option { background: #11948f; color: var(--txt); }
.fbts { display: flex; gap: 7px; }

.tbox { background: #100958; border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; }
.thdr { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--bdr); }
.ttitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #ffffff; }
.tcnt { font-size: 11px; color: #ffffff; background: #11948f; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--bdr); }
.twrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 700px; }
thead th { background: #11948f; padding: 10px 13px; text-align: left; font-size: 0.75rem; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; user-select: none; white-space: nowrap; border-bottom: 1px solid var(--bdr); transition: color .2s; }
thead th:hover { color: #fff; background: #0d7a75; }
thead th.sa { color: #b8f5ef; }
.si { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .4; transition: opacity .2s, transform .3s; }
thead th.sa .si { opacity: 1; }
thead th.sd .si { transform: rotate(180deg); }
tbody tr { border-bottom: 1px solid var(--bdr); transition: background .15s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(108,99,255,.05); }
tbody td { padding: 11px 13px; font-size: 0.78rem; color: var(--txt); vertical-align: middle; }
.tid { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: var(--ac); letter-spacing: .4px; }
.amt { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ac2); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.bd { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.badge.success { background: rgba(0,212,170,.12); color: var(--ac2); border: 1px solid rgba(0,212,170,.2); }
.badge.success .bd { background: var(--ac2); box-shadow: 0 0 5px var(--ac2); }
.badge.pending { background: rgba(255,169,77,.12); color: var(--warn); border: 1px solid rgba(255,169,77,.2); }
.badge.pending .bd { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
.badge.failed { background: rgba(255,107,107,.12); color: var(--fail); border: 1px solid rgba(255,107,107,.2); }
.badge.failed .bd { background: var(--fail); box-shadow: 0 0 5px var(--fail); }

.mth { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #ffffff; }
.mic { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.mic.card { background: rgba(108,99,255,.2); color: var(--ac); }
.mic.bank { background: rgba(0,212,170,.2); color: var(--ac2); }
.mic.wallet { background: rgba(255,169,77,.2); color: var(--warn); }
.mic.other { background: rgba(136,144,181,.2); color: #ffffff; }

/* ACTIONS */
.axs { display: flex; gap: 4px; }
.bic { width: 28px; height: 28px; border: 1px solid var(--bdr); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all .2s; background: rgba(255,255,255,0.06); color: #ffffff; }
.bic:hover { border-color: var(--ac); background: rgba(108,99,255,.15); }
.bic.view-btn:hover { border-color: #4facfe; background: rgba(79,172,254,0.15); color: #4facfe; }
.bic.dl-btn:hover { border-color: var(--ac2); background: rgba(0,212,170,0.15); color: var(--ac2); }
.bic.del-btn:hover { border-color: var(--fail); background: rgba(255,107,107,0.15); color: var(--fail); }

.empty { text-align: center; padding: 60px 20px; color: #ffffff; }
.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .3; }
.empty p { font-size: 14px; margin-bottom: 6px; }
.empty small { font-size: 12px; opacity: .6; }

/* PAGINATION */
.pagination-container { background: #100958; border-top: 1px solid var(--bdr); padding: 12px 16px; }
.pagination-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #11948f; border: 1px solid var(--bdr); color: #ffffff; font-size: 12px; cursor: pointer; transition: all 0.3s ease; }
.pagination-btn:hover:not(:disabled) { border-color: var(--ac); background: rgba(108,99,255,0.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(108,99,255,0.2); }
.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-number-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #11948f; border: 2px solid var(--bdr); color: #ffffff; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; }
.page-number-btn:hover { border-color: var(--ac); background: rgba(108,99,255,0.1); transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(108,99,255,0.3); }
.page-number-btn.active { background: linear-gradient(135deg, #6c63ff, #4f46e5); border-color: var(--ac); color: #fff; transform: translateY(-2px) scale(1.1); box-shadow: 0 8px 20px rgba(108,99,255,0.4); }
.page-ellipsis { color: #ffffff; font-size: 12px; padding: 0 4px; user-select: none; display: flex; align-items: center; opacity: 0.6; }

/* TXN MODAL (dark, inside-page) */
.txn-mov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); z-index: 50000; align-items: center; justify-content: center; }
.txn-mov.show { display: flex; }
.txn-mbox { background: #100958; border: 1px solid var(--bdr); border-radius: var(--r); padding: 22px; max-width: 480px; width: 92%; max-height: 85vh; overflow-y: auto; }
.txn-mhd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.txn-mhd h3 { font-size: 15px; font-weight: 500; color: #fff; }
.txn-mcl { width: 28px; height: 28px; background: #11948f; border: 1px solid var(--bdr); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: #ffffff; transition: all .2s; }
.txn-mcl:hover { border-color: var(--fail); color: var(--fail); }
.dr { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--bdr); font-size: 12px; gap: 10px; }
.dr:last-child { border-bottom: none; }
.dk { color: rgba(255,255,255,0.65); font-weight: 500; flex-shrink: 0; }
.dv { color: var(--txt); font-weight: 600; text-align: right; word-break: break-all; }
.txn-macts { display: flex; gap: 8px; margin-top: 18px; }

/* CONFIRM DELETE MODAL */
.confirm-mov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(5px); z-index: 60000; align-items: center; justify-content: center; }
.confirm-mov.show { display: flex; }
.confirm-mbox { background: #100958; border: 1px solid var(--bdr); border-radius: var(--r); padding: 28px; max-width: 360px; width: 92%; text-align: center; }

/* TOAST */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }
.toast-msg { background: white; padding: 12px 18px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 360px; font-size: 13px; font-weight: 500; color: #1f2937; }
.toast-msg.success { border-left: 4px solid #10b981; }
.toast-msg.error { border-left: 4px solid #ef4444; }
.toast-msg.info { border-left: 4px solid #3b82f6; }
.toast-msg.warning { border-left: 4px solid #f59e0b; }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-msg.success .toast-icon { color: #10b981; }
.toast-msg.error .toast-icon { color: #ef4444; }
.toast-msg.info .toast-icon { color: #3b82f6; }
.toast-msg.warning .toast-icon { color: #f59e0b; }

/* PROFILE PHOTO MODAL (white, same as wallet) */
.modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,0.6) !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 15px !important; }
.modal-box { background: white !important; border-radius: 12px !important; max-width: 400px !important; width: 100% !important; max-height: 85vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; animation: slideInUp 0.3s ease !important; }
.modal-header-bar { padding: 16px 20px !important; border-bottom: 1px solid #e5e7eb !important; display: flex !important; justify-content: space-between !important; align-items: center !important; background: linear-gradient(135deg, #100958 0%, #1a1a6e 100%) !important; color: white !important; }
.modal-header-bar h5 { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: white !important; }
.modal-close-btn { background: rgba(255,255,255,0.2) !important; border: none !important; color: white !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; cursor: pointer !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.2s !important; }
.modal-close-btn:hover { background: rgba(255,255,255,0.35) !important; }
.modal-body-content { padding: 16px 20px !important; overflow-y: auto !important; flex: 1 !important; color: #1f2937 !important; }

@keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ─── NOTIFICATION OFFCANVAS STYLES ─── */
.notif-offcanvas-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10050;
    backdrop-filter: blur(2px);
}
.notif-offcanvas-backdrop.active { display: block; }

.notif-offcanvas {
    position: fixed;
    top: 0; right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10051;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 40px rgba(16,9,88,0.18);
}
.notif-offcanvas.active { transform: translateX(0); }

.notif-oc-header {
    background: linear-gradient(135deg, #100958 0%, #11948f 100%);
    padding: 18px 20px 14px;
    flex-shrink: 0;
}
.notif-oc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.notif-oc-title { color: white; font-size: 16px; font-weight: 700; margin: 0; }
.notif-oc-close {
    background: rgba(255,255,255,0.18);
    border: none;
    color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.notif-oc-close:hover { background: rgba(255,255,255,0.32); }

/* Stats strip */
.notif-oc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.notif-stat-pill {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    backdrop-filter: blur(8px);
}
.notif-stat-num { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }
.notif-stat-lbl { font-size: 10px; color: rgba(255,255,255,0.75); margin-top: 2px; }

/* Tabs */
.notif-oc-tabs {
    display: flex;
    background: #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.notif-tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.notif-tab.active { color: #100958; border-bottom-color: #11948f; background: white; }
.notif-tab-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 18px;
}
.notif-tab.active .notif-tab-badge { background: #11948f; }

/* Body scroll area */
.notif-oc-body {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.notif-oc-body::-webkit-scrollbar { width: 4px; }
.notif-oc-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Tab panels */
.notif-panel { display: none; }
.notif-panel.active { display: block; }

/* Section header */
.notif-section-hdr {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Notification item */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: #f0f9ff; }
.notif-item.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #11948f; }

.notif-item-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12px; font-weight: 600; color: #1f2937; margin-bottom: 2px; line-height: 1.4; }
.notif-item-desc { font-size: 11px; color: #6b7280; line-height: 1.4; margin-bottom: 3px; }
.notif-item-time { font-size: 10px; color: #9ca3af; }
.notif-item-amount { font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* Bill / Transaction card */
.bill-card {
    margin: 8px 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.bill-card-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bill-card-title { font-size: 12px; font-weight: 500; color: white; }
.bill-card-badge { font-size: 10px; font-weight: 400; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.25); color: white; }
.bill-card-body { background: white; padding: 10px 14px; }
.bill-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.bill-row:last-child { border-bottom: none; }
.bill-row-left { display: flex; align-items: center; gap: 8px; }
.bill-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.bill-label { font-size: 11px; font-weight: 600; color: #374151; }
.bill-sub { font-size: 10px; color: #9ca3af; }
.bill-amount { font-size: 12px; font-weight: 700; }
.bill-due { font-size: 10px; color: #ef4444; font-weight: 500; }
.bill-pay-btn {
    font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: none; cursor: pointer; transition: all 0.2s;
}
.bill-pay-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Mark all read bar */
.notif-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.notif-count-txt { font-size: 12px; color: #6b7280; }
.mark-all-btn { font-size: 11px; color: #11948f; font-weight: 500; border: none; background: transparent; cursor: pointer; padding: 0; }
.mark-all-btn:hover { text-decoration: underline; }

/* Footer of offcanvas */
.notif-oc-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fb;
    flex-shrink: 0;
}
.notif-view-all {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #100958, #11948f);
    color: white;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.notif-view-all:hover { opacity: 0.9; color: white; }

/* Shaking animation for bell */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}
.shaking-animation {
    animation: shake 2s infinite;
}

/* SIDEBAR */
#sidebarOverlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; cursor: pointer; }
/* #sidebarOverlay.active { display: block !important; } */
.dashboard-slidebar { background: white; width: 260px; min-width: 260px; flex-shrink: 0; }
@media (max-width: 1199px) {
  .dashboard-slidebar { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 320px !important; 
    min-width: 325px !important; 
    height: 100dvh !important; 
    overflow-y: auto !important; 
    z-index: 10001 !important; 
    box-shadow: 6px 0 30px rgba(0,0,0,0.25) !important; 
    transform: translateX(-100%) !important; 
    transition: transform 0.3s ease !important; 
  }
  .dashboard-slidebar.sidebar-open { transform: translateX(0) !important; }
}
#sidebarToggle { display: none; }
@media (max-width: 1199px) { #sidebarToggle { display: block; } }
#sidebarCloseBtn { display: none; }
@media (max-width: 1199px) { #sidebarCloseBtn { display: flex; } }
@media (min-width: 1200px) { #sidebarCloseBtn { display: none !important; } }

/* PROFILE PHOTO */
.profile-photo-wrap { position: relative; width: 90px; height: 90px; margin: 0 auto 4px; }
.photo-circle { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #11948f; overflow: hidden; background: #f3f4f6; }
.photo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hover-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.profile-photo-wrap:hover .photo-hover-overlay { background: rgba(0,0,0,0.38); }
.photo-hover-overlay i { color: white; font-size: 20px; opacity: 0; transition: opacity 0.2s; }
.profile-photo-wrap:hover .photo-hover-overlay i { opacity: 1; }
.photo-actions { display: flex; justify-content: center; gap: 8px; margin-top: 7px; }
.photo-action-btn { width: 30px; height: 30px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: white; transition: transform 0.2s, box-shadow 0.2s; }
.photo-action-btn:hover { transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.btn-cam-photo { background: #11948f; }
.btn-edit-photo { background: #6B46C1; }
.btn-del-photo { background: #ef4444; }
#cameraVideoEl { width: 100%; border-radius: 12px; display: none; background: #000; }
#cameraCanvas { display: none; }
.cam-snap-btn { width: 40px; height: 40px; border-radius: 50%; border: 3px solid white; background: #ef4444; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 16px; box-shadow: 0 3px 10px rgba(239,68,68,0.4); transition: transform 0.15s; }
.cam-snap-btn:hover { transform: scale(1.08); }

/* FLATPICKR DARK */
.flatpickr-calendar { background: #1a1e35 !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; }
.flatpickr-months, .flatpickr-month, .dayContainer { background: transparent !important; }
.flatpickr-month { color: #eef0f8 !important; fill: #eef0f8 !important; }
.flatpickr-current-month { color: #eef0f8 !important; }
.flatpickr-current-month input.cur-year { color: #eef0f8 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: #1a1e35 !important; color: #eef0f8 !important; }
.flatpickr-weekday { background: transparent !important; color: #8890b5 !important; }
.flatpickr-day { color: #eef0f8 !important; border-radius: 6px !important; background: transparent !important; border-color: transparent !important; }
.flatpickr-day:hover, .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #6c63ff !important; border-color: #6c63ff !important; color: #fff !important; }
.flatpickr-day.today { border-color: #00d4aa !important; }
.flatpickr-day.disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #8890b5 !important; opacity: .35 !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: #8890b5 !important; fill: #8890b5 !important; }
.numInputWrapper span svg { fill: #8890b5 !important; }

/* RESPONSIVE */
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .frow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr 1fr; } .frow { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .stats { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .pagination-info { flex-direction: column; gap: 12px; align-items: flex-start !important; }
  .pagination-controls { width: 100%; justify-content: center; flex-wrap: wrap; }
  .page-numbers { order: 3; width: 100%; justify-content: center; margin-top: 8px; }
}
@media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1450px; } }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #11948f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ac); }

/* PRINT STYLES */
@media print {
  .header, #sidebarOverlay, .dashboard-slidebar, .acts, .fbox, .hdr, .thdr .tcnt, #paginationContainer, footer, .tw-py-6 { display: none !important; }
  body, .wrap, section, .main-content { background: white !important; color: black !important; }
  .tbox { border: 1px solid #ddd !important; border-radius: 0 !important; }
  thead th { background: #f0f0f0 !important; color: black !important; }
  tbody td { color: black !important; }
  .badge.success { background: #d4edda !important; color: #155724 !important; border-color: #c3e6cb !important; }
  .badge.pending { background: #fff3cd !important; color: #856404 !important; border-color: #ffeaa7 !important; }
  .badge.failed { background: #f8d7da !important; color: #721c24 !important; border-color: #f5c6cb !important; }
  .amt { color: #007a5e !important; }
  .tid { color: #5c3fbe !important; }
  .axs { display: none !important; }
  .sc { border: 1px solid #ddd !important; }
  .sv { color: black !important; }
}