/* =============================================================
   DOT N DOC CRM — SHARED STYLES
   Common tokens, reusable components, sidebar, topbar, cards,
   tables, modals, toasts and navigation.
   Page-specific rules are stored in separate CSS files.
   ============================================================= */

:root{
  --primary:#195778;
  --navy:#123F59;
  --lightblue:#DCEFF7;
  --cream:#FFE1A8;
  --white:#FFFFFF;
  --text:#16374A;
  --grey:#F3F5F6;
  --muted:#5c7688;
  --border:#e3ecf1;
  --green:#2e9e6b;
  --green-bg:#e2f5ec;
  --orange:#e08a3c;
  --orange-bg:#fdeedd;
  --yellow:#d9a825;
  --yellow-bg:#fdf3d7;
  --cold:#5b7f95;
  --cold-bg:#e4eef4;
  --red:#d05252;
  --red-bg:#fbe7e7;
  --radius:16px;
  --radius-sm:10px;
  --pill:999px;
  --shadow:0 2px 10px rgba(18,63,89,.07);
  --shadow-lg:0 10px 30px rgba(18,63,89,.14);
  --sidebar-w:250px;
  --font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* Dark mode overrides */
body.dark{
  --white:#152b3a;
  --grey:#0f2230;
  --lightblue:#0f2230;
  --text:#dcecf5;
  --muted:#8fadc0;
  --border:#25455a;
  --shadow:0 2px 10px rgba(0,0,0,.3);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45);
  --cold-bg:#1d3a4c; --green-bg:#173d2e; --orange-bg:#4a3418; --yellow-bg:#453a12; --red-bg:#4b2020;
}
body.dark .card, body.dark .login-card, body.dark .modal-card{ background:var(--white); }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--lightblue);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:.92rem; color:var(--text); }

h1,h2,h3,h4{ line-height:1.25; }
code{ background:var(--grey); padding:2px 8px; border-radius:6px; font-size:.85em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:var(--pill);
  padding:10px 22px; font-size:.92rem; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid rgba(25,87,120,.35); outline-offset:2px; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--navy); box-shadow:var(--shadow); }
.btn-cream{ background:var(--cream); color:var(--navy); }
.btn-cream:hover{ box-shadow:var(--shadow); }
.btn-outline{ background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
body.dark .btn-outline{ color:#9fd0ec; border-color:#9fd0ec; }
.btn-danger{ background:var(--red); color:#fff; }
.btn-ghost{ background:var(--grey); color:var(--text); }
.btn-green{ background:var(--green); color:#fff; }
.btn-sm{ padding:6px 14px; font-size:.8rem; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.icon-btn{
  width:38px; height:38px; border-radius:50%;
  border:none; background:var(--grey); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; transition:background .15s;
}
.icon-btn:hover{ background:var(--lightblue); }
body.dark .icon-btn:hover{ background:#1d3a4c; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--pill);
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  white-space:nowrap;
}
.badge-cold{ background:var(--cold-bg); color:var(--cold); }
.badge-warm{ background:var(--yellow-bg); color:var(--yellow); }
.badge-hot{ background:var(--orange-bg); color:var(--orange); }
.badge-converted{ background:var(--green-bg); color:var(--green); }
.badge-grey{ background:var(--grey); color:var(--muted); }
.badge-red{ background:var(--red-bg); color:var(--red); }
.badge-blue{ background:var(--cold-bg); color:var(--primary); }
body.dark .badge-warm{ color:#f3d271; }
body.dark .badge-hot{ color:#f4b26e; }
body.dark .badge-converted{ color:#7fd8ac; }

/* =============================================================
   APP LAYOUT (sidebar + navbar)
   ============================================================= */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); background:var(--navy); color:#cfe4f0;
  position:fixed; inset:0 auto 0 0; z-index:60;
  display:flex; flex-direction:column; padding:22px 16px;
  transition:transform .25s ease;
}

.side-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; opacity:.6; margin:14px 8px 8px; }
.side-nav{ list-style:none; display:grid; gap:4px; }
.side-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px; color:#cfe4f0; font-size:.9rem; font-weight:500;
  transition:background .15s, color .15s;
}
.side-nav a i{ width:18px; text-align:center; }
.side-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-nav a.active{ background:var(--cream); color:var(--navy); font-weight:700; }
.side-foot{ margin-top:auto; display:grid; gap:8px; }
.side-user{
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  background:rgba(255,255,255,.06); border-radius:14px; font-size:.85rem;
}
.avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--cream); color:var(--navy); font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.side-user small{ opacity:.7; display:block; }
.logout-btn{
  display:flex; align-items:center; gap:10px; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; border:none;
  border-radius:var(--pill); padding:10px; font-weight:600; font-size:.88rem;
}
.logout-btn:hover{ background:var(--red); }

.main{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }

.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--white); box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px;
  padding:12px 26px;
}
.hamburger{ display:none; }
.searchbar{ position:relative; flex:1; max-width:420px; }
.searchbar i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem; }
.searchbar input{
  width:100%; border:1.5px solid var(--border); background:var(--grey);
  border-radius:var(--pill); padding:9px 16px 9px 40px; outline:none;
}
.searchbar input:focus{ border-color:var(--primary); background:var(--white); }
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--white); border-radius:14px; box-shadow:var(--shadow-lg);
  max-height:320px; overflow:auto; display:none; border:1px solid var(--border);
}
.search-results.open{ display:block; }
.search-results a{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); font-size:.85rem;
}
.search-results a:last-child{ border-bottom:none; }
.search-results a:hover{ background:var(--grey); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.notif-dot{
  position:absolute; top:6px; right:6px; width:9px; height:9px;
  background:var(--orange); border-radius:50%; border:2px solid var(--white);
}
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:250px;
  background:var(--white); border-radius:16px; box-shadow:var(--shadow-lg);
  border:1px solid var(--border); padding:8px; display:none; z-index:80;
}
.dropdown-menu.open{ display:block; }
.dropdown-menu .dd-head{ font-size:.8rem; font-weight:700; padding:8px 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.dd-item{
  display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:none; padding:10px 12px; border-radius:10px;
  font-size:.85rem; color:var(--text);
}
.dd-item:hover{ background:var(--grey); }
.dd-item i{ margin-top:2px; color:var(--primary); width:16px; }
.dd-item small{ color:var(--muted); display:block; }
.profile-chip{
  display:flex; align-items:center; gap:10px; border:none; background:var(--grey);
  border-radius:var(--pill); padding:5px 14px 5px 5px; font-weight:600; font-size:.85rem; color:var(--text);
}

/* ---------- Page content ---------- */
.content{ padding:26px; display:grid; gap:22px; }
.page-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.page-head h2{ font-size:1.45rem; }
.page-head p{ color:var(--muted); font-size:.9rem; }
.page-head .actions{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }

.tabs{
  display:inline-flex; background:var(--white); border-radius:var(--pill);
  padding:5px; box-shadow:var(--shadow); gap:4px;
}
.tab{
  border:none; background:transparent; border-radius:var(--pill);
  padding:9px 22px; font-weight:600; font-size:.88rem; color:var(--muted);
}
.tab.active{ background:var(--primary); color:#fff; }

.card{
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.card-head h3{ font-size:1.02rem; }
.card-head .spacer{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Summary cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; display:flex; gap:14px; align-items:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat-card.cream{ background:var(--cream); }
.stat-card.cream .stat-ico{ background:rgba(18,63,89,.12); color:var(--navy); }
.stat-card.cream .stat-num, .stat-card.cream .stat-lbl{ color:var(--navy); }
body.dark .stat-card.cream{ background:#3f3416; }
body.dark .stat-card.cream .stat-num, body.dark .stat-card.cream .stat-lbl{ color:#ffe9bd; }
.stat-ico{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:var(--lightblue); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
body.dark .stat-ico{ background:#1d3a4c; color:#9fd0ec; }
.stat-num{ font-size:1.45rem; font-weight:800; }
.stat-lbl{ font-size:.78rem; color:var(--muted); font-weight:600; }

/* Charts */
.chart-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.chart-grid .card{ min-width:0; }
.chart-box{ position:relative; height:240px; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filters select, .filters input[type="date"]{
  border:1.5px solid var(--border); background:var(--grey); border-radius:var(--pill);
  padding:8px 14px; outline:none; font-size:.85rem;
}
.filters select:focus{ border-color:var(--primary); }

/* Tables */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-sm); }
table.crm{
  width:100%; border-collapse:collapse; font-size:.85rem; min-width:900px;
}
table.crm thead th{
  position:sticky; top:0; z-index:5;
  background:var(--navy); color:#fff; text-align:left;
  padding:11px 14px; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; user-select:none; white-space:nowrap;
}
table.crm thead th .fa-sort, table.crm thead th .fa-sort-up, table.crm thead th .fa-sort-down{ margin-left:6px; opacity:.7; }
table.crm tbody td{
  padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle;
}
table.crm tbody tr{ transition:background .12s; }
table.crm tbody tr:hover{ background:var(--grey); }
.t-actions{ display:flex; gap:6px; }
.t-actions .icon-btn{ width:32px; height:32px; font-size:.78rem; }
.lead-name{ font-weight:700; }
.lead-sub{ font-size:.75rem; color:var(--muted); }

/* Pagination */
.pager{ display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.pager button{
  border:1.5px solid var(--border); background:var(--white); color:var(--text);
  min-width:34px; height:34px; border-radius:10px; font-weight:600; font-size:.82rem;
}
.pager button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.pager button:disabled{ opacity:.45; cursor:not-allowed; }
.pager .pager-info{ font-size:.8rem; color:var(--muted); margin-right:auto; }

/* Two-col layout */
.split{ display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start; }

/* Panels: follow-ups / priority / activity */
.panel-list{ list-style:none; display:grid; gap:10px; }
.panel-list li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--grey); border-radius:12px; padding:12px 14px; font-size:.85rem;
}
.panel-list li i{ color:var(--primary); margin-top:3px; }
.panel-list li .when{ margin-left:auto; font-size:.72rem; color:var(--muted); white-space:nowrap; }
.priority-item{ border-left:4px solid var(--orange); }

/* Empty state / skeleton */
.empty{
  text-align:center; padding:44px 20px; color:var(--muted); display:grid; gap:10px; justify-items:center;
}
.empty i{ font-size:2rem; color:var(--border); }
.skeleton{ position:relative; overflow:hidden; background:var(--grey); border-radius:10px; min-height:16px; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:shimmer 1.2s infinite;
}
body.dark .skeleton::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* Progress indicator */
.progress-track{ display:flex; gap:6px; margin-top:6px; }
.progress-step{ flex:1; height:7px; border-radius:var(--pill); background:var(--grey); }
.progress-step.on{ background:var(--primary); }
.progress-step.done{ background:var(--green); }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; background:#c3d4de; border-radius:var(--pill);
  transition:background .2s;
}
.slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
}
.switch input:checked + .slider{ background:var(--green); }
.switch input:checked + .slider::before{ transform:translateX(20px); }
.switch input:focus-visible + .slider{ outline:3px solid rgba(25,87,120,.35); }

/* =============================================================
   MODALS
   ============================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,63,89,.45); z-index:120;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-card{
  background:var(--white); border-radius:20px; box-shadow:var(--shadow-lg);
  width:100%; max-width:640px; max-height:90vh; overflow:auto;
  padding:26px; animation:pop .2s ease;
}
.modal-card.small{ max-width:420px; }
@keyframes pop{ from{ transform:scale(.96); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.modal-head h3{ font-size:1.1rem; }
.modal-close{ margin-left:auto; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1 / -1; }
.field small.err{ color:var(--red); font-size:.75rem; display:none; margin-top:4px; }
.field.invalid input, .field.invalid select{ border-color:var(--red); }
.field.invalid small.err{ display:block; }
.field small.warn{ color:var(--orange); font-size:.75rem; margin-top:4px; display:none; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* =============================================================
   TOASTS
   ============================================================= */
.toast-holder{
  position:fixed; bottom:22px; right:22px; z-index:200;
  display:grid; gap:10px; max-width:340px;
}
.toast{
  background:var(--navy); color:#fff; border-radius:14px;
  padding:13px 16px; box-shadow:var(--shadow-lg);
  display:flex; gap:10px; align-items:flex-start; font-size:.87rem;
  animation:slideUp .25s ease;
}
.toast.success{ background:var(--green); }
.toast.warn{ background:var(--orange); }
.toast.error{ background:var(--red); }
.toast i{ margin-top:2px; }
@keyframes slideUp{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }

/* Floating quick action */
.fab{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--primary); color:#fff; font-size:1.3rem;
  box-shadow:var(--shadow-lg); transition:transform .15s, background .15s;
}
.fab:hover{ transform:scale(1.07); background:var(--navy); }

/* =============================================================
   MOBILE BOTTOM NAV
   ============================================================= */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--white); box-shadow:0 -4px 16px rgba(18,63,89,.12);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(4,1fr);
}
.bottom-nav a{
  display:grid; justify-items:center; gap:3px; color:var(--muted);
  font-size:.65rem; font-weight:600; padding:5px 2px; border-radius:10px;
}
.bottom-nav a i{ font-size:1.05rem; }
.bottom-nav a.active{ color:var(--primary); }

/* Sidebar overlay for mobile */
.side-overlay{
  position:fixed; inset:0; background:rgba(18,63,89,.4); z-index:55; display:none;
}
.side-overlay.open{ display:block; }

.top-icon-btn{
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f4f7f9;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.top-icon-btn:hover{
  background: #e9f0f4;
  transform: translateY(-1px);
}

.top-icon-btn.spinning i{
  animation: dashboard-spin 0.5s linear;
}

@keyframes dashboard-spin{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}

/* Brand and logo */
.brand-logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-mark{
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--cream);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
  overflow:hidden;
}

.brand-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.brand-logo h1{
  font-size:1.35rem;
}

.brand-logo h1 span{
  color:var(--cream);
}

/* Sidebar-specific logo styling */
.sidebar .brand-logo{
  margin-bottom:28px;
  padding:0 6px;
  min-width:0;
}

.sidebar .brand-logo > div:last-child{
  min-width:0;
}

.sidebar .brand-logo h1{
  font-size:1.02rem;
  color:#fff;
  white-space:nowrap;
}

.sidebar .logo-mark{
  width:42px;
  height:42px;
  padding:4px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
}

/* Exact Google Sheet field tables */
#leadsCrm{ width:max-content; min-width:100%; }
#leadsCrm th,
#leadsCrm td{ white-space:nowrap; vertical-align:middle; }
#leadsCrm th{ max-width:260px; }
#leadsCrm td{ max-width:320px; overflow:hidden; text-overflow:ellipsis; }
#leadsCrm th:last-child,
#leadsCrm td:last-child{
  position:sticky;
  right:0;
  z-index:2;
  background:var(--white);
  box-shadow:-8px 0 14px rgba(10,50,70,.06);
}
#leadsCrm thead th:last-child{ z-index:4; background:var(--primary-dark); }
.sheet-doc-link{ white-space:nowrap; }

/* =============================================================
   AUTHENTICATION / USER MANAGEMENT
   ============================================================= */
.card-subtitle{
  margin-top:5px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
}
.user-management-card{ scroll-margin-top:88px; }
.user-management-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.employee-count{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border-radius:999px;
  background:var(--grey);
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
.user-table .table-sub{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:500;
}
.role-chip,
.user-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.role-chip{
  background:rgba(37,99,235,.10);
  color:var(--primary);
}
.user-status.status-active{
  background:var(--green-bg);
  color:var(--green);
}
.user-status.status-inactive{
  background:var(--red-bg);
  color:var(--red);
}
.auth-help{
  margin:-2px 0 16px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--grey);
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
}
#profileModal .modal-card,
#passwordModal .modal-card,
#resetPasswordModal .modal-card{ max-width:480px; }
#userModal .modal-card{ max-width:650px; }
.modal-card button[disabled]{ opacity:.65; cursor:not-allowed; }

@media (max-width:768px){
  .user-management-card .card-head{
    align-items:flex-start;
    gap:14px;
  }
  .user-management-actions{
    width:100%;
    justify-content:space-between;
  }
  .user-management-actions .btn{
    flex:1;
    justify-content:center;
  }
}


/* ---------- Dynamic CRM notifications ---------- */
#notifMenu{
  width:min(390px, calc(100vw - 24px));
  max-height:520px;
  overflow:hidden;
}
.notif-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 10px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.notif-toolbar button{
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  white-space:nowrap;
}
.notif-toolbar button:disabled{
  opacity:.45;
  cursor:default;
}
#notifList{
  max-height:420px;
  overflow-y:auto;
  padding-top:6px;
}
.notification-item{
  position:relative;
  align-items:flex-start;
  border:1px solid transparent;
}
.notification-item.unread{
  background:rgba(25,87,120,.07);
  border-color:rgba(25,87,120,.10);
}
.notification-item.unread::after{
  content:"";
  position:absolute;
  top:14px;
  right:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
}
.notification-item > i{
  margin-top:3px;
  flex:0 0 18px;
}
.notif-copy{
  display:block;
  min-width:0;
  padding-right:10px;
}
.notif-copy strong{
  display:block;
  margin-bottom:2px;
  font-size:.84rem;
  color:var(--text);
}
.notif-copy small{
  line-height:1.4;
  overflow-wrap:anywhere;
}
.notif-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  color:var(--muted);
  font-size:.7rem;
}
.notif-lead{
  color:var(--primary);
  font-weight:700;
}
.notif-empty{
  margin:0;
  padding:22px 14px;
  color:var(--muted);
  text-align:center;
  font-size:.84rem;
}
.notif-dot{
  top:1px;
  right:1px;
  min-width:17px;
  width:auto;
  height:17px;
  padding:0 4px;
  display:none;
  align-items:center;
  justify-content:center;
  border-width:2px;
  border-radius:999px;
  color:#fff;
  font-size:.58rem;
  font-weight:800;
  line-height:1;
}
body.dark .notification-item.unread{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
}
@media (max-width:600px){
  #notifMenu{
    position:fixed;
    top:68px;
    right:12px;
    left:12px;
    width:auto;
    max-height:calc(100vh - 84px);
  }
  #notifList{ max-height:calc(100vh - 150px); }
}

/* ============================================================
   ASSIGN EMPLOYEE / CHANGE STATUS MODAL
============================================================ */

#quickModal .modal-card.small,
#stModal .modal-card.small {
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
}


/* MODAL HEADER */

#quickModal .modal-head,
#stModal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 22px 24px 18px;
  margin: 0;
}

#quickModal .modal-head h3,
#stModal .modal-head h3 {
  flex: 1;

  margin: 0;
  padding: 0;

  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;

  color: var(--text, #12324a);
}


/* CLOSE BUTTON */

#quickModal .modal-close,
#stModal .modal-close {
  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 50%;

  background: #f3f6f8;
  color: #12324a;

  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

#quickModal .modal-close:hover,
#stModal .modal-close:hover {
  background: #e8eef2;
  transform: rotate(5deg);
}


/* FIELD WRAPPER */

#quickModal .field,
#stModal .field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100%;
  gap: 8px;

  padding: 10px 24px 24px;
  margin: 0;
}


/* LABEL */

#quickModal .field label,
#stModal .field label {
  display: block;

  width: 100%;
  margin: 0;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;

  color: var(--text, #12324a);
}


/* SELECT */

#quickModal #quickSelect,
#stModal #stSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: block;

  width: 100%;
  min-width: 0;
  height: 48px;

  margin: 0;
  padding: 0 44px 0 14px;

  border: 1px solid #d4e0e8;
  border-radius: 12px;

  background-color: #ffffff;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #52697a 50%
    ),
    linear-gradient(
      135deg,
      #52697a 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 19px) 20px,
    calc(100% - 14px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  color: #12324a;

  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 500;

  outline: none;
  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#quickModal #quickSelect:hover,
#stModal #stSelect:hover {
  border-color: #9db4c2;
}

#quickModal #quickSelect:focus,
#stModal #stSelect:focus {
  border-color: var(--primary, #146286);

  box-shadow:
    0 0 0 3px rgba(20, 98, 134, 0.13);
}


/* FOOTER BUTTONS */

#quickModal .modal-foot,
#stModal .modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  gap: 12px;

  padding: 0 24px 24px;
  margin: 0;

  border-top: 0;
}

#quickModal .modal-foot .btn,
#stModal .modal-foot .btn {
  min-width: 94px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 10px 20px;

  border-radius: 999px;
}


/* DARK MODE */

body.dark #quickModal #quickSelect,
body.dark #stModal #stSelect {
  background-color: #142b3d;
  border-color: rgba(255, 255, 255, 0.16);
  color: #f5f8fa;
}

body.dark #quickModal .modal-close,
body.dark #stModal .modal-close {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}


/* MOBILE RESPONSIVE */

@media (max-width: 480px) {

  #quickModal .modal-card.small,
  #stModal .modal-card.small {
    width: calc(100vw - 24px);
    border-radius: 20px;
  }

  #quickModal .modal-head,
  #stModal .modal-head {
    padding:
      20px
      20px
      16px;
  }

  #quickModal .modal-head h3,
  #stModal .modal-head h3 {
    font-size: 1rem;
  }

  #quickModal .field,
  #stModal .field {
    padding:
      8px
      20px
      22px;
  }

  #quickModal .modal-foot,
  #stModal .modal-foot {
    padding:
      0
      20px
      20px;
  }

  #quickModal .modal-foot .btn,
  #stModal .modal-foot .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   EMPLOYEE LOGIN — PASSWORD EYE FIX
============================================================ */

.employee-login-page .password-field,
.employee-login-page .password-wrapper,
.employee-login-page .password-input-wrap {
  position: relative;
  width: 100%;
}

.employee-login-page .password-field input,
.employee-login-page .password-wrapper input,
.employee-login-page .password-input-wrap input,
.employee-login-page input[type="password"],
.employee-login-page input[data-password-input] {
  width: 100%;
  padding-right: 52px !important;
  box-sizing: border-box;
}

.employee-login-page .password-toggle,
.employee-login-page .toggle-password,
.employee-login-page [data-toggle-password] {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;

  width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  color: #123b5a !important;

  cursor: pointer;
  z-index: 5;
}

.employee-login-page .password-toggle i,
.employee-login-page .toggle-password i,
.employee-login-page [data-toggle-password] i {
  position: static !important;
  transform: none !important;
  font-size: 15px;
  pointer-events: none;
}