*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}
body{background:#f5f5f5;color:#111}

/* ── LOGIN ── */
.login-body{background:#f0f0f0;display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-wrap{background:#fff;border:1px solid #ddd;border-radius:4px;padding:2.5rem 2rem;width:100%;max-width:400px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.login-logo{text-align:center;margin-bottom:2px;padding:8px 0;background:#111;border-radius:4px}
.login-subtitle{text-align:center;font-size:13px;color:#888;margin-bottom:1.5rem}
.login-divider{height:1px;background:#eee;margin:1rem 0}

/* ── TOPBAR ── */
.topbar{color:#fff;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:54px}
.topbar-admin{background:#2c2c2c}
.topbar-client{background:#1a1a2e}
.topbar-logo{display:flex;align-items:center;gap:10px}
.topbar-logo span{color:#c8102e}
.topbar-badge{font-size:11px;color:#aaa;font-weight:400;margin-left:6px;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:10px}
.topbar-right{display:flex;align-items:center;gap:14px;font-size:13px}
.tb-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 14px;border-radius:4px;cursor:pointer;font-size:12px;text-decoration:none}
.tb-btn:hover{background:rgba(255,255,255,.25)}
.tb-btn-active{background:rgba(255,255,255,.3);font-weight:700}
.notif-wrap{position:relative;cursor:pointer}
.notif-circle{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center}
.notif-badge{position:absolute;top:-3px;right:-3px;background:#c8102e;color:#fff;border-radius:50%;width:17px;height:17px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700}
.user-circle{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ── NAVBAR ── */
.navbar{background:#fff;border-bottom:1px solid #ddd;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.nav-left{display:flex}
.nav-item{padding:14px 16px;font-size:13px;cursor:pointer;color:#555;border-bottom:3px solid transparent;white-space:nowrap;user-select:none}
.nav-item.active,.nav-item[data-active]{color:#c8102e;border-bottom:3px solid #c8102e;font-weight:500}
.nav-item:hover:not(.active){color:#c8102e}
.nav-client-name{font-size:13px;font-weight:700;color:#111;padding-right:1rem}

/* ── MAIN ── */
.main-body{padding:1.5rem 2rem;background:#f5f5f5;min-height:calc(100vh - 110px)}
.tab-content{display:none}.tab-content.active{display:block}

/* ── METRICS ── */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem}
.metric-card{background:#fff;border:1px solid #ddd;border-radius:4px;padding:14px 16px}
.mc-label{font-size:12px;color:#777;margin-bottom:6px}
.mc-value{font-size:22px;font-weight:500;color:#111}

/* ── CARDS ── */
.card{background:#fff;border:1px solid #ddd;border-radius:4px;padding:1.25rem;margin-bottom:1rem}
.card.p0{padding:0}
.tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.tab-header h2{font-size:18px;font-weight:700;color:#111}
.tab-header p{font-size:13px;color:#666;margin-top:2px}

/* ── SCOTIABANK STYLE HOME ── */
.sb-company-name{font-size:26px;font-weight:700;color:#111;margin-bottom:4px}
.sb-account-sub{font-size:13px;color:#666}
.sb-home-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2rem}
.sb-pending-box{background:#fff;border:1px solid #ddd;border-radius:4px;padding:14px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;min-width:240px}
.sb-pending-box:hover{box-shadow:0 1px 4px rgba(0,0,0,.1)}
.sb-pending-badge{background:#c8102e;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sb-arrow{margin-left:auto;font-size:18px;color:#888}
.sb-section-title{font-size:14px;font-weight:700;color:#333;margin-bottom:1rem}
.sb-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.sb-card-link{font-size:13px;color:#c8102e;cursor:pointer;font-weight:500}
.sb-card-link:hover{text-decoration:underline}
.sb-divider{height:1px;background:#f0f0f0;margin:0 -1.25rem 1.25rem}
.sb-metrics{display:grid;grid-template-columns:repeat(4,1fr)}
.sb-metric{padding:4px 0}
.sb-metric+.sb-metric{border-left:1px solid #eee;padding-left:2rem}
.sb-metric-label{font-size:13px;color:#666;margin-bottom:6px}
.sb-metric-value{font-size:22px;color:#111;font-weight:400}

/* ── TABLE ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;color:#555;font-weight:700;border-bottom:2px solid #e0e0e0;font-size:12px;background:#fafafa}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafafa}
td.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.empty{text-align:center;color:#aaa;padding:2rem;font-size:13px}
.mono{font-family:monospace;font-size:12px}
.small{font-size:12px}
.muted{color:#888}
.red{color:#c8102e}

/* ── PILLS ── */
.pill{padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;display:inline-block}
.pill-on{background:#e8f5e9;color:#2e7d32}
.pill-off{background:#ffebee;color:#c62828}
.pill-pending{background:#fff8e1;color:#7b5800}
.pill-urgent{background:#ffebee;color:#c62828}
.pill-closed{background:#f1f1f1;color:#555}
.pill-info{background:#e3f2fd;color:#0d47a1}
.pill-active{background:#e8f5e9;color:#2e7d32}

/* ── BUTTONS ── */
.btn-red{background:#c8102e;color:#fff;border:none;padding:9px 20px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer}
.btn-red:hover{background:#a50d25}
.btn-red:disabled{background:#ccc;color:#888;cursor:not-allowed}
.btn-outline{background:#fff;color:#c8102e;border:1.5px solid #c8102e;padding:8px 18px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer}
.btn-outline:hover{background:#fff5f5}
.btn-block{width:100%;padding:11px}
.btn-sm{padding:4px 12px;border-radius:4px;border:1px solid #ccc;background:#fff;color:#333;cursor:pointer;font-size:12px}
.btn-sm:hover{background:#f5f5f5}
.btn-sm.btn-danger{border-color:#ffcdd2;color:#c62828}
.btn-sm.btn-danger:hover{background:#ffebee}
.btn-sm.btn-enable{border-color:#a5d6a7;color:#2e7d32}
.btn-sm.btn-enable:hover{background:#e8f5e9}
.btn-sm-r{padding:6px 14px;border-radius:4px;background:#c8102e;color:#fff;border:none;cursor:pointer;font-size:12px}
.btn-sm-r:hover{background:#a50d25}

/* ── FORMS ── */
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;color:#555;font-weight:500;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:13px;color:#111;background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#c8102e}
.form-group input:disabled{background:#f0f0f0;color:#aaa;cursor:not-allowed}
.form-group textarea{resize:vertical;min-height:68px;font-family:Arial,sans-serif}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.select-sm{padding:5px 10px;border:1px solid #ccc;border-radius:4px;font-size:12px;cursor:pointer}

/* ── ALERTS ── */
.alert{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:1rem}
.alert-danger{background:#ffebee;border:1px solid #ffcdd2;color:#c62828}
.alert-success{background:#e8f5e9;border:1px solid #a5d6a7;color:#2e7d32}
.alert-warning{background:#fff8e1;border:1px solid #ffe082;color:#7b5800}
.alert-info{background:#e3f2fd;border:1px solid #90caf9;color:#0d47a1}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:4px;padding:1.5rem;width:100%;max-width:500px;border:1px solid #ddd;max-height:90vh;overflow-y:auto}
.modal-title{font-size:16px;font-weight:700;margin-bottom:1rem;color:#111}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:1rem}

/* ── CASE STATUS ── */
.case-row{background:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:10px;overflow:hidden}
.case-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer}
.case-header:hover{background:#fafafa}
.case-header-left{display:flex;align-items:center;gap:12px}
.case-header-right{display:flex;align-items:center;gap:10px}
.case-arrow{font-size:18px;color:#aaa;transition:transform .2s}
.case-body{padding:14px 16px;border-top:1px solid #eee}
.timeline{margin-bottom:12px}
.tl-item{display:flex;gap:10px;margin-bottom:10px}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.tl-info{background:#1565c0}
.tl-positive{background:#2e7d32}
.tl-urgent{background:#c8102e}
.tl-closed{background:#555}
.tl-content{flex:1}
.tl-date{font-size:11px;color:#aaa}
.tl-text{font-size:13px;color:#333;margin-top:2px;line-height:1.45}
.tl-empty{font-size:13px;color:#aaa;padding:6px 0}
.add-update-form{background:#f9f9f9;border:1px solid #eee;border-radius:4px;padding:12px;margin-top:4px}

/* ── TRANSFER LOCK ── */
.lock-notice{background:#fff8e1;border:1px solid #ffe082;border-radius:4px;padding:12px 16px;font-size:13px;color:#7b5800;margin-bottom:1rem;display:flex;align-items:center;gap:10px}

/* ── PROFILE ── */
.profile-card{max-width:420px}