:root{
  --rms-navy:#0b2b4a;
  --rms-navy-dark:#071b30;
  --rms-green:#1e7145;
  --rms-purple:#5b2d8e;
  --rms-teal:#0f7c8c;
  --rms-orange:#c9702a;
  --rms-red:#b0342d;
  --rms-bg:#f4f6f9;
}
body{ background:var(--rms-bg); font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#232a33; }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--rms-navy) 0%, var(--rms-navy-dark) 100%); padding:20px; }
.auth-card{ width:100%; max-width:420px; background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); overflow:hidden; }
.auth-card .auth-head{ background:var(--rms-navy); color:#fff; padding:28px 30px 20px; }
.auth-card .auth-head small{ opacity:.75; }
.auth-card .auth-body{ padding:28px 30px 32px; }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:250px; flex-shrink:0; background:var(--rms-navy); color:#dbe6f2; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:1030; transition:transform .2s ease; }
.sidebar .brand{ padding:18px 20px; font-weight:700; font-size:17px; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand small{ display:block; font-weight:400; font-size:11px; opacity:.65; letter-spacing:.5px; }
.sidebar .nav-link{ color:#c4d3e2; padding:10px 20px; font-size:14.5px; border-left:3px solid transparent; }
.sidebar .nav-link.active,.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--rms-teal); }
.sidebar .nav-section{ padding:14px 20px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:#7d93ab; }
.main-content{ margin-left:250px; flex-grow:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ background:#fff; border-bottom:1px solid #e5e9ef; padding:12px 22px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1020; }
.page-body{ padding:22px; flex-grow:1; }
.sidebar-toggle{ display:none; }

@media (max-width: 991.98px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main-content{ margin-left:0; }
  .sidebar-toggle{ display:inline-flex; }
}

/* ---------- Cards / stats ---------- */
.stat-card{ background:#fff; border-radius:12px; padding:18px 20px; box-shadow:0 2px 10px rgba(20,30,50,.06); height:100%; transition:transform .15s ease, box-shadow .15s ease; }
.stat-card .stat-value{ font-size:26px; font-weight:700; color:var(--rms-navy); }
.stat-card .stat-label{ font-size:12.5px; color:#6b7686; text-transform:uppercase; letter-spacing:.4px; }
.stat-card .stat-icon{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; }

/* Clickable stat cards that need attention (e.g. New Leads, Unassigned when > 0) */
.stat-card-link{ display:block; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,30,50,.12); }
.stat-card-alert{ border:1.5px solid var(--rms-orange); animation:rms-pulse 2s ease-in-out infinite; }
.stat-card-alert .stat-value{ color:var(--rms-orange); }
@keyframes rms-pulse{
  0%, 100% { box-shadow:0 2px 10px rgba(201,112,42,.15); }
  50%      { box-shadow:0 2px 18px rgba(201,112,42,.45); }
}

.card-panel{ background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(20,30,50,.06); border:none; }
.card-panel .card-header{ background:#fff; border-bottom:1px solid #eef1f5; font-weight:600; color:var(--rms-navy); border-radius:12px 12px 0 0 !important; }

.table thead th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:#6b7686; border-bottom-width:1px; white-space:nowrap; }
.table td{ vertical-align:middle; font-size:14px; }

.btn-rms{ background:var(--rms-navy); border-color:var(--rms-navy); color:#fff; }
.btn-rms:hover{ background:var(--rms-navy-dark); border-color:var(--rms-navy-dark); color:#fff; }

.badge{ font-weight:500; font-size:11.5px; padding:.42em .6em; }

.timeline{ list-style:none; padding-left:0; margin:0; }
.timeline li{ position:relative; padding:0 0 20px 26px; border-left:2px solid #e5e9ef; }
.timeline li:last-child{ border-color:transparent; padding-bottom:0; }
.timeline li::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--rms-teal); }

.chat-bubble{ max-width:75%; padding:10px 14px; border-radius:12px; margin-bottom:10px; font-size:14px; }
.chat-bubble.me{ background:var(--rms-navy); color:#fff; margin-left:auto; border-bottom-right-radius:2px; }
.chat-bubble.them{ background:#eef1f5; color:#232a33; margin-right:auto; border-bottom-left-radius:2px; }
.chat-bubble .meta{ font-size:11px; opacity:.65; margin-top:4px; }

.login-2fa-box{ letter-spacing:6px; font-size:22px; text-align:center; }

footer.app-footer{ padding:14px 22px; font-size:12px; color:#8a94a3; text-align:center; }

/* --- Notification bell --- */
.notif-badge{ position:absolute; top:-4px; right:-4px; font-size:10px; min-width:18px; padding:.28em .4em; }
.notif-dropdown{ width:360px; max-width:90vw; max-height:480px; overflow-y:auto; box-shadow:0 12px 32px rgba(20,30,50,.18); border:none; }
.notif-list{ max-height:380px; overflow-y:auto; }
.notif-item{ padding:10px 14px; border-bottom:1px solid #f1f3f6; white-space:normal; }
.notif-item:last-child{ border-bottom:none; }
.notif-item.notif-unread{ background:#f4f8ff; }
.notif-item:hover{ background:#eef1f5; }
.notif-icon{ width:34px; height:34px; border-radius:50%; background:#f1f3f6; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.notif-title{ font-size:13px; font-weight:600; color:#232a33; line-height:1.3; }
.notif-message{ font-size:12px; color:#6b7686; margin-top:2px; line-height:1.35; }
.notif-time{ font-size:11px; color:#9aa4b2; margin-top:4px; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--rms-orange, #c9702a); flex-shrink:0; margin-top:5px; }
.min-w-0{ min-width:0; }

/* ---- CRM Mailbox (v4.0) ------------------------------------------- */
.mail-app { display:flex; gap:0; background:#fff; border:1px solid #e3e8ef; border-radius:12px; min-height:calc(100vh - 170px); overflow:hidden; }
.mail-sidebar { width:220px; flex:0 0 220px; border-right:1px solid #eef1f5; padding:12px 10px; background:#fafbfd; overflow-y:auto; }
.mail-folder, .mail-account { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; color:#344054; text-decoration:none; font-size:13.5px; min-width:0; }
.mail-folder:hover, .mail-account:hover { background:#eef2f7; color:#0b2b4a; }
.mail-folder.active, .mail-account.active { background:#e1ebf7; color:#0b2b4a; font-weight:600; }
.mail-section-title { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8a94a6; margin:8px 8px 4px; }
.mail-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.mail-list { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.mail-list.has-reader { flex:0 0 38%; max-width:38%; border-right:1px solid #eef1f5; }
.mail-list-head { padding:10px 12px; border-bottom:1px solid #eef1f5; }
.mail-toolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 12px; border-bottom:1px solid #eef1f5; background:#fcfcfd; }
.mail-rows { overflow-y:auto; }
.mail-row { display:flex; align-items:center; gap:6px; padding:0 10px; border-bottom:1px solid #f1f3f6; font-size:13.5px; }
.mail-row:hover { background:#f7f9fc; }
.mail-row.open { background:#e8f0fb; }
.mail-row.unread .mail-from, .mail-row.unread .mail-subj strong { font-weight:700; color:#0b2b4a; }
.mail-row:not(.unread) .mail-subj strong { font-weight:500; }
.mail-row-link { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; padding:9px 0; color:#344054; text-decoration:none; }
.mail-from { flex:0 0 170px; }
.mail-list.has-reader .mail-row-link { flex-wrap:wrap; gap:2px 8px; }
.mail-list.has-reader .mail-from { flex:1 1 60%; }
.mail-list.has-reader .mail-subj { order:3; flex:1 1 100%; }
.mail-subj { flex:1 1 auto; min-width:0; }
.mail-date { color:#667085; font-size:12.5px; }
.mail-star { border:0; background:none; padding:2px 4px; color:#b8c0cc; }
.mail-star.on, .mail-star:hover { color:#f5b301; }
.mail-label { display:inline-block; font-size:11px; padding:0 6px; border-radius:10px; margin-right:4px; color:#fff; background:var(--lc,#7f8c8d); vertical-align:1px; }
.mail-folder-chip { display:inline-block; font-size:11px; padding:0 6px; border-radius:10px; margin-right:4px; background:#eef1f5; color:#475467; }
.mail-reader { flex:1 1 auto; min-width:0; padding:12px 18px; overflow-y:auto; }
.mail-reader-bar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.mail-reader-subject { margin:6px 0 8px; color:#0b2b4a; }
.mail-reader-meta { border-bottom:1px solid #eef1f5; padding-bottom:8px; margin-bottom:8px; }
.mail-crm { background:#f3f8ff; border:1px solid #d9e7fb; border-radius:8px; padding:6px 10px; margin-bottom:8px; }
.mail-attachments { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.mail-att { display:inline-flex; align-items:center; gap:4px; border:1px solid #dde3ea; border-radius:6px; padding:4px 8px; font-size:12.5px; text-decoration:none; color:#344054; background:#fff; }
.mail-att:hover { border-color:#9fb6d6; }
.mail-body { width:100%; min-height:300px; border:0; display:block; }
.mail-menu { position:relative; }
.mail-menu > summary { list-style:none; cursor:pointer; }
.mail-menu > summary::-webkit-details-marker { display:none; }
.mail-menu-pop { position:absolute; z-index:20; right:0; top:100%; min-width:220px; max-height:360px; overflow-y:auto; background:#fff; border:1px solid #dde3ea; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.12); padding:8px; }
.mail-reader-bar .mail-menu-pop { left:0; right:auto; }
@media (max-width: 991px) {
  .mail-app { flex-direction:column; }
  .mail-sidebar { width:auto; flex:none; border-right:0; border-bottom:1px solid #eef1f5; max-height:220px; }
  .mail-list.has-reader { max-width:none; flex:none; border-right:0; }
  .mail-list.has-reader .mail-rows { max-height:240px; }
  .mail-from { flex-basis:120px; }
}