/* =========================================================
   A&B HUB — Design System
   Brand: A&B Homecare Services Inc. / A&B Cleaner Janitorial
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ab-primary:      #174890;
  --ab-primary-600:  #123a75;
  --ab-primary-100:  #E7EEF8;
  --ab-secondary:    #4274B9;
  --ab-secondary-100:#EAF1FA;
  --ab-accent:       #D2242A;
  --ab-accent-100:   #FBE7E8;
  --ab-ink:          #0B0F19;
  --ab-black:        #000000;

  --ab-canvas:       #F6F8FB;
  --ab-surface:      #FFFFFF;
  --ab-border:       #E7ECF3;
  --ab-border-strong:#D7DEE9;
  --ab-text:         #1B2333;
  --ab-text-muted:   #667085;
  --ab-text-faint:   #98A2B3;

  --ab-success:      #12805C;
  --ab-success-100:  #E4F5EF;
  --ab-warning:      #B7791F;
  --ab-warning-100:  #FBF0DD;
  --ab-danger:       var(--ab-accent);
  --ab-danger-100:   var(--ab-accent-100);
  --ab-info:         var(--ab-secondary);
  --ab-info-100:     var(--ab-secondary-100);

  --ab-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --ab-shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --ab-shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  --ab-radius-sm: 8px;
  --ab-radius-md: 12px;
  --ab-radius-lg: 18px;

  --ab-sidebar-w: 264px;
  --ab-sidebar-w-collapsed: 76px;
  --ab-topbar-h: 68px;

  --ab-font-display: 'Sora', sans-serif;
  --ab-font-body: 'Inter', sans-serif;
  --ab-font-mono: 'IBM Plex Mono', monospace;

  --ab-context-accent: var(--ab-primary);
  --ab-context-accent-100: var(--ab-primary-100);
}

body.ctx-cleaner{
  --ab-context-accent: var(--ab-accent);
  --ab-context-accent-100: var(--ab-accent-100);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  font-family: var(--ab-font-body);
  background: var(--ab-canvas);
  color: var(--ab-text);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6, .ab-display{
  font-family: var(--ab-font-display);
  color: var(--ab-ink);
  letter-spacing: -0.01em;
}
.ab-mono{ font-family: var(--ab-font-mono); }
a{ color: var(--ab-primary); text-decoration: none; }
a:hover{ color: var(--ab-primary-600); }
::selection{ background: var(--ab-primary-100); color: var(--ab-primary-600); }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--ab-border-strong); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--ab-secondary);
  outline-offset: 2px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--ab-secondary);
  box-shadow: 0 0 0 3px rgba(66,116,185,.15);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ================= APP SHELL ================= */
.ab-shell{ display:flex; min-height:100vh; }

.ab-sidebar{
  width: var(--ab-sidebar-w);
  flex-shrink:0;
  background: linear-gradient(180deg, var(--ab-primary) 0%, var(--ab-primary-600) 100%);
  color:#fff;
  position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  transition: width .25s ease;
  z-index: 1030;
}
.ab-shell.collapsed .ab-sidebar{ width: var(--ab-sidebar-w-collapsed); }

.ab-sidebar-brand{
  height: var(--ab-topbar-h); display:flex; align-items:center; gap:.65rem;
  padding: 0 1.25rem; flex-shrink:0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.ab-sidebar-brand .ab-logo-mark{
  width:34px; height:34px; border-radius:9px; background:#fff; color: var(--ab-primary);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ab-font-display); font-weight:800; font-size:.95rem; flex-shrink:0;
}
.ab-sidebar-brand .ab-logo-text{ font-family: var(--ab-font-display); font-weight:700; font-size:1.02rem; color:#fff; white-space:nowrap; overflow:hidden; }
.ab-sidebar-brand .ab-logo-text small{ display:block; font-family: var(--ab-font-body); font-weight:500; font-size:.68rem; color: rgba(255,255,255,.65); }
.ab-shell.collapsed .ab-sidebar-brand .ab-logo-text{ display:none; }

.ab-sidebar-scroll{ overflow-y:auto; overflow-x:hidden; flex:1; padding: 1rem .75rem 1.25rem; }
.ab-nav-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.45); font-weight:600; padding: 1rem .6rem .4rem; }
.ab-shell.collapsed .ab-nav-label{ text-align:center; padding: 1rem 0 .35rem; }

.ab-nav-link{
  display:flex; align-items:center; gap:.75rem; padding:.6rem .65rem; margin-bottom:.15rem;
  border-radius: var(--ab-radius-sm); color: rgba(255,255,255,.82); font-size:.875rem; font-weight:500;
  white-space:nowrap; transition: background .15s ease, color .15s ease; position:relative;
}
.ab-nav-link i{ font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }
.ab-nav-link:hover{ background: rgba(255,255,255,.10); color:#fff; }
.ab-nav-link.active{ background: rgba(255,255,255,.16); color:#fff; }
.ab-nav-link.active::before{ content:""; position:absolute; left:-.75rem; top:8%; bottom:8%; width:3px; background: #fff; border-radius:2px; }
.ab-nav-link .ab-nav-chevron{ margin-left:auto; font-size:.7rem; transition: transform .2s; }
.ab-nav-link[aria-expanded="true"] .ab-nav-chevron{ transform: rotate(90deg); }
.ab-shell.collapsed .ab-nav-link span, .ab-shell.collapsed .ab-nav-link .ab-nav-chevron{ display:none; }
.ab-shell.collapsed .ab-nav-link{ justify-content:center; }

.ab-subnav{ padding-left: 2.15rem; }
.ab-shell.collapsed .ab-subnav{ display:none; }
.ab-subnav .ab-nav-link{ font-size:.82rem; padding:.45rem .65rem; }

.ab-sidebar-footer{ padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size:.75rem; color: rgba(255,255,255,.55); flex-shrink:0; }
.ab-shell.collapsed .ab-sidebar-footer{ text-align:center; }
.ab-shell.collapsed .ab-sidebar-footer .ab-footer-full{ display:none; }

.ab-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.ab-topbar{
  height: var(--ab-topbar-h); background: var(--ab-surface); border-bottom: 1px solid var(--ab-border);
  display:flex; align-items:center; gap:1rem; padding: 0 1.25rem; position: sticky; top:0; z-index:1020;
}
.ab-burger{ border:none; background: var(--ab-canvas); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color: var(--ab-text); flex-shrink:0; }
.ab-burger:hover{ background: var(--ab-border); }

.ab-search{ position:relative; flex:1; max-width:420px; }
.ab-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--ab-text-faint); }
.ab-search input{ width:100%; height:40px; border-radius:10px; border:1px solid var(--ab-border); background: var(--ab-canvas); padding: 0 .9rem 0 2.4rem; font-size:.875rem; }
.ab-search input:focus{ background:#fff; }
.ab-search kbd{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:.68rem; color: var(--ab-text-faint); background:#fff; border:1px solid var(--ab-border); padding:.1rem .35rem; border-radius:5px; }

.ab-context-switch{ display:flex; align-items:center; background: var(--ab-canvas); border-radius:999px; padding:3px; border:1px solid var(--ab-border); flex-shrink:0; }
.ab-context-switch button{ border:none; background:transparent; font-size:.76rem; font-weight:600; padding:.4rem .8rem; border-radius:999px; color: var(--ab-text-muted); display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.ab-context-switch button.active{ background:#fff; color: var(--ab-ink); box-shadow: var(--ab-shadow-sm); }
.ab-context-switch button .ab-dot{ width:7px; height:7px; border-radius:50%; }
.ab-context-switch button:nth-child(1) .ab-dot{ background: var(--ab-primary); }
.ab-context-switch button:nth-child(2) .ab-dot{ background: var(--ab-accent); }

.ab-topbar-actions{ display:flex; align-items:center; gap:.4rem; margin-left:auto; flex-shrink:0; }
.ab-icon-btn{ position:relative; width:40px; height:40px; border-radius:10px; border:1px solid transparent; background:transparent; display:flex; align-items:center; justify-content:center; color: var(--ab-text); font-size:1.05rem; }
.ab-icon-btn:hover{ background: var(--ab-canvas); }
.ab-icon-btn .ab-badge-dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background: var(--ab-accent); border:2px solid #fff; }
.ab-icon-btn .ab-badge-count{ position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background: var(--ab-accent); color:#fff; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

.ab-profile-btn{ display:flex; align-items:center; gap:.55rem; border:none; background:transparent; padding:.25rem .5rem .25rem .25rem; border-radius:10px; }
.ab-profile-btn:hover{ background: var(--ab-canvas); }
.ab-avatar{ width:34px; height:34px; border-radius:9px; background: var(--ab-secondary-100); color: var(--ab-primary); display:flex; align-items:center; justify-content:center; font-family: var(--ab-font-display); font-weight:700; font-size:.8rem; flex-shrink:0; overflow:hidden; }
.ab-profile-btn .ab-profile-meta{ text-align:left; line-height:1.15; }
.ab-profile-btn .ab-profile-meta strong{ display:block; font-size:.82rem; color: var(--ab-ink); }
.ab-profile-btn .ab-profile-meta span{ font-size:.72rem; color: var(--ab-text-muted); }

.ab-breadcrumb-strip{ padding: .8rem 1.5rem; background: var(--ab-surface); border-bottom:1px solid var(--ab-border); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ab-breadcrumb-strip .breadcrumb{ margin:0; font-size:.8rem; }
.ab-breadcrumb-strip .breadcrumb-item.active{ color: var(--ab-text); font-weight:600; }
.ab-breadcrumb-strip .breadcrumb-item a{ color: var(--ab-text-muted); }
.ab-breadcrumb-strip h1{ font-size:1.35rem; margin:0; }

.ab-content{ padding: 1.5rem; flex:1; }
@media (max-width: 767.98px){ .ab-content{ padding: 1rem; } }

/* ================= COMPONENTS ================= */
.ab-card{ background: var(--ab-surface); border:1px solid var(--ab-border); border-radius: var(--ab-radius-md); box-shadow: var(--ab-shadow-sm); }
.ab-card .ab-card-header{ padding: 1.1rem 1.25rem; border-bottom:1px solid var(--ab-border); display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.ab-card .ab-card-header h2, .ab-card .ab-card-header h3{ font-size:1rem; margin:0; }
.ab-card .ab-card-body{ padding: 1.25rem; }
.ab-card:hover{ box-shadow: var(--ab-shadow-md); }
.ab-card.ab-card-flat:hover{ box-shadow: var(--ab-shadow-sm); }

.ab-stat-card{ background: var(--ab-surface); border:1px solid var(--ab-border); border-radius: var(--ab-radius-md); padding: 1.25rem; box-shadow: var(--ab-shadow-sm); position:relative; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ab-stat-card:hover{ transform: translateY(-2px); box-shadow: var(--ab-shadow-md); }
.ab-stat-card .ab-stat-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:.9rem; }
.ab-stat-card .ab-stat-label{ font-size:.78rem; color: var(--ab-text-muted); font-weight:600; margin-bottom:.25rem; }
.ab-stat-card .ab-stat-value{ font-family: var(--ab-font-display); font-size:1.6rem; font-weight:700; color: var(--ab-ink); }
.ab-stat-card .ab-stat-delta{ font-family: var(--ab-font-mono); font-size:.76rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; margin-top:.4rem; }
.ab-stat-delta.up{ color: var(--ab-success); }
.ab-stat-delta.down{ color: var(--ab-accent); }

.ab-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.28rem .6rem; border-radius:999px; }
.ab-badge.bg-primary-soft{ background: var(--ab-primary-100); color: var(--ab-primary); }
.ab-badge.bg-secondary-soft{ background: var(--ab-secondary-100); color: var(--ab-secondary); }
.ab-badge.bg-success-soft{ background: var(--ab-success-100); color: var(--ab-success); }
.ab-badge.bg-warning-soft{ background: var(--ab-warning-100); color: var(--ab-warning); }
.ab-badge.bg-danger-soft{ background: var(--ab-danger-100); color: var(--ab-danger); }
.ab-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.btn{ font-weight:600; font-size:.85rem; border-radius:10px; padding:.55rem 1rem; }
.btn-sm{ padding:.35rem .75rem; font-size:.78rem; border-radius:8px; }
.btn-primary{ background: var(--ab-primary); border-color: var(--ab-primary); }
.btn-primary:hover, .btn-primary:focus{ background: var(--ab-primary-600); border-color: var(--ab-primary-600); }
.btn-outline-primary{ color: var(--ab-primary); border-color: var(--ab-primary); }
.btn-outline-primary:hover{ background: var(--ab-primary); border-color: var(--ab-primary); }
.btn-accent{ background: var(--ab-accent); border-color: var(--ab-accent); color:#fff; }
.btn-accent:hover{ background:#ad1d22; border-color:#ad1d22; color:#fff; }
.btn-light-soft{ background: var(--ab-canvas); border:1px solid var(--ab-border); color: var(--ab-text); }
.btn-light-soft:hover{ background: var(--ab-border); }
.btn-icon{ width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

.form-label{ font-size:.82rem; font-weight:600; color: var(--ab-text); margin-bottom:.35rem; }
.form-control, .form-select{ border-radius:9px; border:1px solid var(--ab-border-strong); font-size:.875rem; padding:.55rem .8rem; }
.form-text{ font-size:.75rem; }
.ab-req::after{ content:"*"; color: var(--ab-accent); margin-left:2px; }

.ab-table-card{ background:#fff; border:1px solid var(--ab-border); border-radius: var(--ab-radius-md); overflow:hidden; box-shadow: var(--ab-shadow-sm); }
.ab-table-toolbar{ padding:1rem 1.25rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; border-bottom:1px solid var(--ab-border); }
.ab-table-toolbar .ab-search{ max-width:280px; }
.table.ab-table{ margin:0; font-size:.85rem; }
.table.ab-table thead th{ background: var(--ab-canvas); color: var(--ab-text-muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--ab-border); white-space:nowrap; padding:.85rem 1rem; }
.table.ab-table td{ padding: .85rem 1rem; vertical-align:middle; border-bottom:1px solid var(--ab-border); }
.table.ab-table tbody tr:hover{ background: var(--ab-canvas); }
.table.ab-table tbody tr:last-child td{ border-bottom:none; }
.ab-row-check{ width:34px; }
.ab-cell-primary{ font-weight:600; color: var(--ab-ink); }
.ab-cell-sub{ font-size:.76rem; color: var(--ab-text-muted); }
.ab-table-pagination{ padding: .9rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--ab-border); font-size:.8rem; color: var(--ab-text-muted); }
.ab-table-pagination .pagination{ margin:0; }
.ab-table-pagination .page-link{ border:none; color: var(--ab-text-muted); font-size:.82rem; border-radius:8px; margin:0 2px; }
.ab-table-pagination .page-item.active .page-link{ background: var(--ab-primary); color:#fff; }

.ab-mini-avatar{ width:32px; height:32px; border-radius:8px; background: var(--ab-primary-100); color: var(--ab-primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; font-family: var(--ab-font-display); flex-shrink:0; }

.ab-progress{ height:6px; border-radius:99px; background: var(--ab-border); overflow:hidden; }
.ab-progress > span{ display:block; height:100%; border-radius:99px; background: var(--ab-primary); }

.ab-kanban{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.ab-kanban-col{ flex:0 0 300px; background: var(--ab-canvas); border-radius: var(--ab-radius-md); border:1px solid var(--ab-border); display:flex; flex-direction:column; max-height: calc(100vh - 240px); }
.ab-kanban-col-head{ padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.85rem; border-bottom:1px solid var(--ab-border); }
.ab-kanban-col-body{ padding:.75rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.6rem; }
.ab-kanban-card{ background:#fff; border:1px solid var(--ab-border); border-radius: var(--ab-radius-sm); padding:.85rem; cursor:grab; box-shadow: var(--ab-shadow-sm); }
.ab-kanban-card:hover{ box-shadow: var(--ab-shadow-md); }
.ab-kanban-card.dragging{ opacity:.5; }
.ab-kanban-card h4{ font-size:.85rem; margin:0 0 .35rem; font-family: var(--ab-font-body); font-weight:700; }
.ab-kanban-col.drag-over{ background: var(--ab-primary-100); }

.ab-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.ab-timeline::before{ content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background: var(--ab-border); }
.ab-timeline li{ position:relative; padding-left:2.6rem; padding-bottom:1.4rem; }
.ab-timeline li:last-child{ padding-bottom:0; }
.ab-timeline .ab-tl-dot{ position:absolute; left:6px; top:2px; width:20px; height:20px; border-radius:50%; background: var(--ab-primary-100); color: var(--ab-primary); display:flex; align-items:center; justify-content:center; font-size:.65rem; }
.ab-timeline .ab-tl-time{ font-size:.72rem; color: var(--ab-text-faint); font-family: var(--ab-font-mono); }

.modal-content{ border:none; border-radius: var(--ab-radius-md); box-shadow: var(--ab-shadow-lg); }
.modal-header{ border-bottom:1px solid var(--ab-border); padding:1.1rem 1.4rem; }
.modal-title{ font-family: var(--ab-font-display); font-size:1.05rem; }
.modal-body{ padding:1.4rem; }
.modal-footer{ border-top:1px solid var(--ab-border); padding:1rem 1.4rem; }

.ab-tabs .nav-link{ color: var(--ab-text-muted); font-weight:600; font-size:.85rem; border:none; border-bottom:2px solid transparent; border-radius:0; padding:.75rem .25rem; margin-right:1.5rem; }
.ab-tabs .nav-link.active{ color: var(--ab-primary); border-bottom-color: var(--ab-primary); background:transparent; }

.ab-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--ab-border-strong); background:#fff; font-size:.8rem; font-weight:600; color: var(--ab-text); }
.ab-chip.active{ background: var(--ab-primary); border-color: var(--ab-primary); color:#fff; }
.ab-chip:hover{ border-color: var(--ab-secondary); }

.ab-empty{ text-align:center; padding: 3rem 1.5rem; color: var(--ab-text-muted); }
.ab-empty i{ font-size:2.4rem; color: var(--ab-text-faint); margin-bottom:.75rem; display:block; }
.ab-empty h3{ font-size:1rem; color: var(--ab-ink); }

/* List items on white cards (chat history, inbox folders, etc.) — NOT the dark sidebar nav */
.ab-thread-item{
  display:flex; align-items:flex-start; gap:.65rem; padding:.65rem .7rem; border-radius: var(--ab-radius-sm);
  color: var(--ab-text); text-decoration:none; margin-bottom:.2rem; position:relative;
}
.ab-thread-item:hover{ background: var(--ab-canvas); color: var(--ab-text); }
.ab-thread-item.active{ background: var(--ab-primary-100); }
.ab-thread-item.active::before{ content:""; position:absolute; left:0; top:10%; bottom:10%; width:3px; background: var(--ab-primary); border-radius:0 2px 2px 0; }
.ab-thread-item .ab-thread-icon{ width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--ab-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--ab-text-muted); font-size:.85rem; }
.ab-thread-item.active .ab-thread-icon{ background: var(--ab-primary); border-color: var(--ab-primary); color:#fff; }
.ab-thread-item .ab-thread-body{ min-width:0; flex:1; }
.ab-thread-item .ab-thread-title{ font-size:.8rem; font-weight:600; color: var(--ab-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ab-thread-item .ab-thread-meta{ font-size:.68rem; color: var(--ab-text-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ab-list-link{ display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius: var(--ab-radius-sm); color: var(--ab-text); text-decoration:none; margin-bottom:.15rem; font-size:.85rem; font-weight:500; }
.ab-list-link > i:first-child{ font-size:1rem; width:18px; text-align:center; color: var(--ab-text-muted); flex-shrink:0; }
.ab-list-link:hover{ background: var(--ab-canvas); color: var(--ab-text); }
.ab-list-link.active{ background: var(--ab-primary-100); color: var(--ab-primary); font-weight:600; }
.ab-list-link.active > i:first-child{ color: var(--ab-primary); }

.toast{ border:none; box-shadow: var(--ab-shadow-lg); border-radius: var(--ab-radius-sm); }

.ab-dropdown-panel{ width: 360px; border:1px solid var(--ab-border); border-radius: var(--ab-radius-md); box-shadow: var(--ab-shadow-lg); padding:0; overflow:hidden; }
.ab-dropdown-panel .ab-dp-head{ padding:.9rem 1.1rem; border-bottom:1px solid var(--ab-border); display:flex; align-items:center; justify-content:space-between; }
.ab-dropdown-panel .ab-dp-head h6{ margin:0; font-size:.85rem; font-family:var(--ab-font-display); }
.ab-notif-item{ display:flex; gap:.7rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--ab-border); }
.ab-notif-item:last-child{ border-bottom:none; }
.ab-notif-item:hover{ background: var(--ab-canvas); }
.ab-notif-item .ab-notif-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; }
.ab-notif-item p{ margin:0; font-size:.8rem; color: var(--ab-text); }
.ab-notif-item small{ color: var(--ab-text-faint); font-size:.7rem; }
.ab-dp-foot{ padding:.7rem 1.1rem; text-align:center; border-top:1px solid var(--ab-border); }
.ab-dp-foot a{ font-size:.8rem; font-weight:600; }

.ab-auth-wrap{ min-height:100vh; display:flex; }
.ab-auth-side{ flex:1; background: radial-gradient(1200px 600px at 10% -10%, var(--ab-secondary) 0%, var(--ab-primary) 55%, var(--ab-primary-600) 100%); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding: 3rem; position:relative; overflow:hidden; }
.ab-auth-side::after{ content:""; position:absolute; right:-120px; bottom:-120px; width:360px; height:360px; border-radius:50%; background: rgba(210,36,42,.25); }
.ab-auth-form{ flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding:2rem; }
.ab-auth-form-inner{ width:100%; max-width:400px; }

.ab-cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:1px; background: var(--ab-border); border:1px solid var(--ab-border); border-radius: var(--ab-radius-md); overflow:hidden; }
.ab-cal-dow{ background: var(--ab-canvas); padding:.6rem; font-size:.7rem; font-weight:700; text-transform:uppercase; color: var(--ab-text-muted); text-align:center; }
.ab-cal-cell{ background:#fff; min-height:110px; padding:.5rem; font-size:.78rem; }
.ab-cal-cell.muted{ background:#FBFCFE; color: var(--ab-text-faint); }
.ab-cal-cell .ab-cal-daynum{ font-weight:700; font-size:.8rem; margin-bottom:.3rem; display:inline-block; }
.ab-cal-cell.today .ab-cal-daynum{ background: var(--ab-primary); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ab-cal-event{ font-size:.68rem; padding:.15rem .4rem; border-radius:5px; margin-bottom:.2rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ab-fade-in{ animation: abFadeIn .35s ease both; }
@keyframes abFadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.ab-section-title{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ab-text-muted); }
.ab-divider{ border-color: var(--ab-border); }
.ab-text-muted{ color: var(--ab-text-muted) !important; }
.ab-text-faint{ color: var(--ab-text-faint) !important; }
.ab-hairline{ border: 1px solid var(--ab-border); }

.ab-sidebar-overlay{ display:none; position:fixed; inset:0; background: rgba(11,15,25,.45); z-index:1025; }

@media (max-width: 991.98px){
  .ab-sidebar{ position:fixed; left:0; top:0; height:100vh; transform: translateX(-100%); transition: transform .25s ease; }
  .ab-shell.mobile-open .ab-sidebar{ transform: translateX(0); width: var(--ab-sidebar-w); }
  .ab-shell.mobile-open .ab-sidebar-overlay{ display:block; }
  .ab-context-switch{ display:none; }
}
@media (max-width: 575.98px){
  .ab-search{ display:none; }
  .ab-breadcrumb-strip{ padding: .75rem 1rem; }
}