/* ══════════════════════════════════════════════════════════════════
   Matrics Portal — Shared Brand System
   File: portal/css/portal.css

   Single source of truth for all portal module styling.
   All modules link to this file — no inline <style> blocks.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ Brand Tokens ═══ */
/* Brand palette (--ip-primary, --ip-primary-dark, etc.) lives in
   portal/css/iPundit-tokens.css. This file ships INSIDE the portal/
   tree so customer installs are self-contained — the site-wide
   /css/iPundit-tokens.css only exists on iPundit's marketing site,
   never on a customer NAS. Editing iPundit-tokens.css here cascades
   to every portal module. */
@import url('iPundit-tokens.css');

:root {
  /* Legacy alias — many portal styles use var(--ip-border); the canonical
     token is named --ip-secondary-border. Keep both so existing rules work. */
  --ip-border:  var(--ip-secondary-border);

  /* Portal layout chrome (not brand colors). */
  --nav-bg:     rgba(14,  63,  90, 0.97);   /* derived from PrimaryDark */
  --card-bg:    #FFFFFF;
  --shadow-sm:  0 2px 8px rgba(27, 88, 125, 0.10);   /* PrimaryDark @10% */
  --shadow-md:  0 4px 20px rgba(27, 88, 125, 0.14);  /* PrimaryDark @14% */
  --radius:     10px;
  --radius-lg:  14px;
}

/* ═══ Reset ═══ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--ip-font);
  background: var(--ip-bg);
  color: var(--ip-body-text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Off-canvas containment.
   .ip-chat-panel sits at position:fixed; right:0 and parks itself at
   transform:translateX(100%) -- a full viewport to the right -- whenever
   it is closed. Blink refuses to let a fixed element extend the document's
   scroll area, so this is invisible in Chrome; WebKit does extend it, and
   on iPhone it surfaced as a phantom horizontal scrollbar on every screen.
   `clip` rather than `hidden` because `hidden` would turn these into scroll
   containers and break the sticky navbar. Nothing else on any screen
   measures wider than the viewport, so there is no real content to lose. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--ip-primary-lightest); }
::-webkit-scrollbar-thumb { background:var(--ip-primary-light); border-radius:3px; }

/* ═══ Navbar ═══ */
nav {
  height:58px; background:var(--nav-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(46,134,193,0.25);
  box-shadow:0 2px 20px rgba(0,0,0,0.3);
  display:flex; align-items:center; padding:0 28px;
  position:sticky; top:0; z-index:60;
}
.nav-brand { display:flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; }
.brand-logo-img {
  height:36px; width:auto; object-fit:contain;
  filter:brightness(1) drop-shadow(0 0 8px rgba(174,214,241,0.3));
  transition:filter .25s;
}
.nav-brand:hover .brand-logo-img { filter:brightness(1.1) drop-shadow(0 0 12px rgba(174,214,241,0.5)); }
.brand-divider { width:1px; height:24px; background:rgba(174,214,241,0.25); margin:0 2px; }
.brand-text { font-weight:700; font-size:15px; color:rgba(255,255,255,0.9); letter-spacing:0.01em; }
.brand-text em { font-style:normal; color:var(--ip-primary-light); }

.nav-tabs { display:flex; gap:2px; margin:0 24px; }
.nav-tab {
  padding:5px 16px; border-radius:6px; cursor:pointer; font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; color:rgba(255,255,255,0.55);
  transition:all .18s; white-space:nowrap;
}
.nav-tab:hover { color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.08); }
.nav-tab.active {
  color:#fff; background:rgba(255,255,255,0.12);
  border-color:rgba(174,214,241,0.3);
  border-bottom:2px solid var(--ip-primary-light);
  border-radius:6px 6px 0 0;
}

.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-avatar {
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:#fff;
  border:2px solid rgba(174,214,241,0.3);
}
.nav-back { color:rgba(255,255,255,0.6); text-decoration:none; font-size:13px; font-weight:600; }
.nav-back:hover { color:#fff; }
.nav-bell { position:relative; cursor:pointer; color:rgba(255,255,255,0.6); font-size:18px; }
.nav-bell:hover { color:#fff; }
.bell-badge {
  position:absolute; top:-4px; right:-6px; background:var(--ip-danger); color:#fff;
  font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ═══ User Dropdown ═══ */
.avatar-wrap { position:relative; }
.user-menu {
  position:absolute; top:calc(100% + 10px); right:0;
  background:#fff; border:1px solid var(--ip-primary-lighter);
  border-radius:var(--radius); min-width:220px;
  box-shadow:var(--shadow-md); z-index:200; display:none;
}
.user-menu.open { display:block; }
.user-menu-header {
  padding:14px 16px;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  border-radius:var(--radius) var(--radius) 0 0;
}
.um-name { font-size:14px; font-weight:700; color:#fff; margin-bottom:2px; }
.um-email { font-size:11px; color:rgba(255,255,255,0.7); margin-bottom:4px; word-break:break-all; }
.um-role {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 8px; border-radius:8px;
  background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8);
}
.user-menu-item {
  padding:10px 16px; font-size:13px; color:var(--ip-body-text);
  cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:8px;
}
.user-menu-item:hover { background:var(--ip-primary-lightest); color:var(--ip-primary-dark); }
.user-menu-item.danger { color:var(--ip-danger); }
.user-menu-item.danger:hover { background:#FADBD8; }
.user-menu-sep { height:1px; background:var(--ip-primary-lightest); }

/* ═══ Login Screen ═══ */
.login-overlay {
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(160deg, var(--ip-primary-dark) 0%, #0E2F3D 100%);
  display:flex; align-items:center; justify-content:center;
}
.login-card {
  background:#fff; border-radius:var(--radius-lg); padding:40px;
  width:380px; max-width:90vw; box-shadow:var(--shadow-md);
}
.login-card h2 { font-size:22px; font-weight:800; color:var(--ip-primary-dark); margin-bottom:6px; }
.login-card p { font-size:13px; color:var(--ip-muted); margin-bottom:24px; }
.login-card .logo-center { text-align:center; margin-bottom:20px; }
.login-card .logo-center img { height:44px; }

/* ═══ Layout ═══ */
.main-content { padding:24px 28px; max-width:1200px; margin:0 auto; width:100%; }
.page-header { margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.page-header h1 { font-size:22px; font-weight:800; color:var(--ip-primary-dark); margin-bottom:4px; }
.page-header p { font-size:13px; color:var(--ip-muted); width:100%; }
.page-header.compact { margin-bottom:14px; }
.page-header.compact h1 { font-size:18px; margin-bottom:0; }

/* ═══ Dashboard 2-column widget grid ═══ */
.dashboard-cols {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;
}
.dashboard-col { min-width:0; }
.dashboard-col .table-wrap:last-child { margin-bottom:0; }
/* Only collapse to single column on true mobile */
@media (max-width:640px) {
  .dashboard-cols { grid-template-columns:1fr; gap:14px; }
}

/* ═══ Quick Launch Strip (Dashboard primary nav) ═══ */
.quick-launch {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px; margin-bottom:22px;
}
.ql-item {
  background:var(--card-bg); border:1px solid var(--ip-primary-lighter);
  border-radius:10px; padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; text-align:center;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.ql-item:hover {
  border-color:var(--ip-primary); transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.ql-icon {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.ql-icon.hr       { background:linear-gradient(135deg, #2E94D1, #1B587D); color:#fff; }
.ql-icon.crm      { background:linear-gradient(135deg, #27AE60, #145A32); color:#fff; }
.ql-icon.certify  { background:linear-gradient(135deg, #6C3483, #4A235A); color:#fff; }
.ql-icon.admin    { background:linear-gradient(135deg, #D4AC0D, #B7950B); color:#fff; }
.ql-icon.purchase { background:linear-gradient(135deg, #8E44AD, #6C3483); color:#fff; }
.ql-icon.license  { background:linear-gradient(135deg, #E67E22, #CA6F1E); color:#fff; }
.ql-icon.learn    { background:linear-gradient(135deg, #1B6CA8, #0D2137); color:#fff; }
.ql-name {
  font-size:12px; font-weight:600; color:var(--ip-primary-dark);
  line-height:1.2;
}

/* ═══ Forms ═══ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--ip-body-text); margin-bottom:5px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:10px 12px; border:1px solid var(--ip-border); border-radius:8px;
  font-size:13px; font-family:var(--ip-font); outline:none; transition:border .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--ip-primary); box-shadow:0 0 0 3px rgba(46,134,193,0.1);
}
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ═══ Buttons ═══ */
.btn {
  padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:var(--ip-font); cursor:pointer; transition:all .2s; border:none;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-primary { background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary)); color:#fff; }
.btn-primary:hover { background:linear-gradient(135deg, var(--ip-hover-dark), var(--ip-primary-dark)); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }
.btn-secondary { background:var(--ip-primary-lightest); color:var(--ip-primary-dark); border:1px solid var(--ip-primary-lighter); }
.btn-secondary:hover { background:var(--ip-primary-lighter); }
.btn-success { background:var(--ip-success); color:#fff; }
.btn-success:hover { background:#145A32; }
.btn-danger { background:var(--ip-danger); color:#fff; }
.btn-danger:hover { background:#922B21; }
.btn-warning { background:#E67E22; color:#fff; }
.btn-warning:hover { background:#CA6F1E; }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-xs { padding:4px 10px; font-size:11px; }

/* ═══ Alerts ═══ */
.alert { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.alert-error { background:#FADBD8; color:var(--ip-danger); border:1px solid #F1948A; }
.alert-success { background:#D5F5E3; color:var(--ip-success); border:1px solid #82E0AA; }
.alert-warning { background:#FDEBD0; color:#9C4A05; border:1px solid #F5B041; }

/* ═══ iPundit Branded Tables ═══ */
.table-wrap {
  background:var(--card-bg); border-radius:var(--radius-lg);
  border:1px solid var(--ip-primary-lighter);
  box-shadow:var(--shadow-sm); margin-bottom:24px; overflow-x:auto;
}
.table-header {
  padding:14px 18px; font-size:14px; font-weight:700; color:var(--ip-primary-dark);
  border-bottom:2px solid var(--ip-primary);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:linear-gradient(135deg, var(--ip-primary-lightest), #fff);
}
table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  background:linear-gradient(180deg, var(--ip-primary-dark), #1a4a6b);
  padding:11px 14px; text-align:left;
  font-size:10.5px; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; position:sticky; top:0;
}
td { padding:11px 14px; border-bottom:1px solid #EBF5FB; color:var(--ip-body-text); vertical-align:middle; }
td:last-child { white-space:nowrap; }
table td a, table td a:visited { color:var(--ip-primary-dark); font-weight:600; text-decoration:none; }
table td a:hover { color:var(--ip-hover-dark); text-decoration:underline; }
tbody tr { transition:background .15s; }
tbody tr:nth-child(even) td { background:rgba(214,234,248,0.45); }
tbody tr:hover td { background:rgba(46,134,193,0.12); }
tr.clickable { cursor:pointer; }
tr.clickable:hover td { background:rgba(46,134,193,0.18); }
code { background:var(--ip-primary-lightest); padding:2px 6px; border-radius:4px; font-size:12px; color:var(--ip-primary-dark); }

/* ═══ Status Badges (all variants) ═══ */
.status-badge {
  display:inline-block; padding:3px 10px; border-radius:12px;
  font-size:11px; font-weight:600; text-transform:capitalize;
}
/* Pending / Warning */
.status-badge.pending, .status-badge.lead { background:#FEF9E7; color:#B7950B; border:1px solid #F9E79F; }
.status-badge.partially_paid { background:#FEF9E7; color:#B7950B; border:1px solid #F9E79F; }
.status-badge.revision { background:#FEF9E7; color:#E67E22; border:1px solid #F9E79F; }
/* Success / Active */
.status-badge.approved, .status-badge.active, .status-badge.paid,
.status-badge.completed, .status-badge.accepted,
.status-badge.Active, .status-badge.success, .status-badge.Available,
.status-badge.Issued { background:#D5F5E3; color:#27AE60; border:1px solid #82E0AA; }
/* Danger / Inactive */
.status-badge.rejected, .status-badge.overdue, .status-badge.cancelled,
.status-badge.inactive, .status-badge.Expired, .status-badge.expired,
.status-badge.invalid,
/* 'unknown' = the record's status is blank or not in the app's known
   set, usually because the DB column rejected the value. Deliberately
   styled as danger so it reads as broken rather than as a real state. */
.status-badge.unknown { background:#FADBD8; color:#C0392B; border:1px solid #F1948A; }
/* Neutral / Draft */
.status-badge.draft, .status-badge.archived,
.status-badge.note, .status-badge.other { background:#EAECEE; color:#6B7B8D; border:1px solid #B0BEC5; }
/* Info / Sent / In-progress */
.status-badge.sent, .status-badge.submitted, .status-badge.received,
.status-badge.in_progress, .status-badge.converted,
.status-badge.Assigned, .status-badge.Renewed { background:var(--ip-primary-lightest); color:var(--ip-primary); border:1px solid var(--ip-primary-lighter); }
/* Interaction types */
.status-badge.call, .status-badge.email, .status-badge.meeting { background:#D6EAF8; color:var(--ip-primary); border:1px solid var(--ip-primary-lighter); }
/* Special */
.status-badge.acknowledged { background:#D7BDE2; color:#6C3483; border:1px solid #C39BD3; }
.status-badge.utility_not_found, .status-badge.error { background:#FEF9E7; color:#B7950B; border:1px solid #F9E79F; }

/* ═══ Stats Grid ═══ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--card-bg); border-radius:var(--radius);
  border:1px solid var(--ip-primary-lighter);
  padding:14px 16px; box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.stat-card.clickable { cursor:pointer; }
.stat-card.clickable:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-md);
  border-color:var(--ip-primary-light);
}
.stat-card .stat-label { font-size:11px; font-weight:600; color:var(--ip-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.stat-card .stat-value { font-size:24px; font-weight:800; color:var(--ip-primary-dark); line-height:1.1; }
.stat-card .stat-sub { font-size:11px; color:var(--ip-muted); margin-top:2px; }
/* Colored top-border variants */
.stat-card.total   { border-top:3px solid var(--ip-primary); }
.stat-card.active  { border-top:3px solid var(--ip-success); }
.stat-card.expired { border-top:3px solid var(--ip-danger); }
.stat-card.amc     { border-top:3px solid var(--ip-warning); }

/* ═══ Modal ═══ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.modal {
  background:#fff; border-radius:var(--radius-lg); padding:28px;
  width:560px; max-width:90vw; max-height:85vh; overflow-y:auto;
  box-shadow:var(--shadow-md);
}
.modal h2 { font-size:18px; font-weight:700; color:var(--ip-primary-dark); margin-bottom:16px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ═══ Detail Cards ═══ */
.detail-card { background:var(--card-bg); border-radius:var(--radius-lg); border:1px solid var(--ip-primary-lighter); padding:20px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.detail-card h3 { font-size:15px; font-weight:700; color:var(--ip-primary-dark); margin-bottom:12px; }
.detail-row { display:flex; gap:12px; margin-bottom:8px; font-size:13px; align-items:center; }
.detail-row .label { color:var(--ip-muted); min-width:120px; font-weight:600; font-size:12px; }

/* ═══ Search Bar ═══ */
.search-bar { display:flex; gap:10px; margin-bottom:20px; }
.search-bar input { flex:1; padding:10px 14px; border:1px solid var(--ip-border); border-radius:8px; font-size:13px; font-family:var(--ip-font); }
.search-bar input:focus { border-color:var(--ip-primary); outline:none; box-shadow:0 0 0 3px rgba(46,134,193,0.1); }

/* ═══ Empty State ═══ */
.empty-state { text-align:center; padding:48px 24px; color:var(--ip-muted); }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.3; }
.empty-state p { font-size:14px; }

/* ═══ Leave Chips ═══ */
.leave-chips { display:flex; flex-wrap:wrap; gap:8px; }
.leave-chip {
  background:var(--ip-primary-lightest); color:var(--ip-primary-dark);
  border:1px solid var(--ip-primary-lighter);
  padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500;
}

/* ═══ Pagination ═══ */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:16px; }
.pagination button { padding:6px 12px; border:1px solid var(--ip-border); border-radius:6px; background:#fff; cursor:pointer; font-size:12px; }
.pagination button.active { background:var(--ip-primary); color:#fff; border-color:var(--ip-primary); }
.pagination button:disabled { opacity:0.5; cursor:not-allowed; }

/* ═══ iPundit Busy Overlay ═══ */
.ip-busy-overlay { position:fixed; inset:0; z-index:9999; background:rgba(250,250,252,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.ip-busy-spinner { width:100px; height:100px; border-radius:50%; overflow:hidden; animation:ip-spin 2s linear infinite; }
.ip-busy-spinner img { width:100%; height:100%; object-fit:cover; }
.ip-busy-message { font:500 14px/1.4 var(--ip-font); color:var(--ip-body-text); letter-spacing:.02em; }
@keyframes ip-spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }

/* ═══ Inline Toast ═══ */
.inline-toast { padding:8px 14px; border-radius:8px; font-size:13px; margin-bottom:10px; animation:ip-fade-in .3s ease; }
.inline-toast.success { background:#D5F5E3; color:var(--ip-success); border:1px solid #82E0AA; }
.inline-toast.error { background:#FADBD8; color:var(--ip-danger); border:1px solid #F1948A; }
@keyframes ip-fade-in { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:translateY(0) } }

/* ═══ Module-Specific: Dashboard ═══ */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-bottom:32px; }
.module-card {
  background:var(--card-bg); border-radius:var(--radius-lg);
  border:1px solid var(--ip-primary-lighter); padding:24px; cursor:pointer;
  transition:all .25s; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.module-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--ip-primary-light); }
.module-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
}
.module-icon.hr       { background:linear-gradient(135deg, #2E94D1, #1B587D); color:#fff; }
.module-icon.crm      { background:linear-gradient(135deg, #27AE60, #145A32); color:#fff; }
.module-icon.certify  { background:linear-gradient(135deg, #6C3483, #4A235A); color:#fff; }
.module-icon.admin    { background:linear-gradient(135deg, #D4AC0D, #B7950B); color:#fff; }
.module-icon.purchase { background:linear-gradient(135deg, #8E44AD, #6C3483); color:#fff; }
.module-icon.license  { background:linear-gradient(135deg, #E67E22, #CA6F1E); color:#fff; }
.module-icon.learn    { background:linear-gradient(135deg, #1B6CA8, #0D2137); color:#fff; }
.module-card h3 { font-size:16px; font-weight:700; color:var(--ip-primary-dark); margin-bottom:6px; }
.module-card p  { font-size:12px; color:var(--ip-muted); line-height:1.5; flex:1; }
.module-badge {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 10px; border-radius:12px; margin-top:12px;
  background:var(--ip-primary-lightest); color:var(--ip-primary); border:1px solid var(--ip-primary-lighter);
  align-self:flex-start;
}

/* ═══ Module-Specific: HR ═══ */
/* Timesheet */
.ts-grid { display:grid; grid-template-columns:140px repeat(7,1fr); gap:1px; background:var(--ip-primary-lighter); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.ts-cell { background:var(--card-bg); padding:8px; font-size:12px; min-height:42px; }
.ts-cell.header { background:var(--ip-primary-lightest); font-weight:700; font-size:11px; color:var(--ip-primary-dark); text-transform:uppercase; text-align:center; }
.ts-cell.project { font-weight:600; display:flex; align-items:center; font-size:12px; color:var(--ip-primary-dark); }
.ts-cell input { width:100%; border:1px solid transparent; border-radius:4px; padding:4px; text-align:center; font-size:13px; font-family:var(--ip-font); outline:none; }
.ts-cell input:focus { border-color:var(--ip-primary); background:var(--ip-primary-lightest); }
.ts-cell.total { font-weight:700; text-align:center; color:var(--ip-primary-dark); display:flex; align-items:center; justify-content:center; }
.ts-cell.weekend { background:#FEF9E7; }
/* Letter preview */
.letter-preview { border:1px solid var(--ip-border); border-radius:var(--radius); padding:28px; background:#fff; max-height:500px; overflow-y:auto; margin:16px 0; font-size:14px; line-height:1.8; }

/* ═══ Module-Specific: CRM ═══ */
/* Timeline */
.timeline { border-left:2px solid var(--ip-primary-lighter); padding-left:20px; margin:16px 0; }
.timeline-item { position:relative; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--ip-primary-lightest); }
.timeline-item::before { content:''; position:absolute; left:-26px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--ip-primary); border:2px solid var(--ip-primary-lighter); }
.timeline-item .ti-header { font-size:12px; font-weight:700; color:var(--ip-primary-dark); margin-bottom:4px; }
.timeline-item .ti-meta { font-size:11px; color:var(--ip-muted); margin-bottom:4px; }
.timeline-item .ti-body { font-size:13px; color:var(--ip-body-text); }
/* Line items editor */
.line-items { margin:16px 0; }
.line-item-row { display:grid; grid-template-columns:3fr 1fr 1fr 1fr auto; gap:8px; margin-bottom:8px; align-items:end; }
.line-item-row input { padding:8px 10px; border:1px solid var(--ip-border); border-radius:6px; font-size:12px; font-family:var(--ip-font); }
.line-item-row input:focus { border-color:var(--ip-primary); outline:none; }
.line-items-total { text-align:right; padding:12px 0; font-size:14px; }
.line-items-total strong { color:var(--ip-primary-dark); }

/* ═══ Status Dot — inline active/inactive indicator ═══ */
.status-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:middle; flex-shrink:0;
}
.status-dot.active   { background:var(--ip-success); }
.status-dot.inactive { background:var(--ip-muted); }

/* ═══ Team Overview Widget (Dashboard) ═══ */
.team-widget { margin-bottom:24px; }
.team-dept-header {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ip-primary-dark); padding:10px 14px; background:var(--ip-primary-lightest);
  border-bottom:1px solid var(--ip-primary-lighter);
}
.team-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-bottom:1px solid #EBF5FB; font-size:13px;
  transition:background .15s;
}
.team-row:hover { background:rgba(46,134,193,0.06); }
.team-row:last-child { border-bottom:none; }
.team-avatar {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; overflow:hidden;
}
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.team-name { font-weight:600; color:var(--ip-body-text); display:flex; align-items:center; }
.team-meta { font-size:11px; color:var(--ip-muted); margin-left:auto; white-space:nowrap; }

/* ═══ Org Tree (HR Module) ═══ */
.org-tree { padding:20px; }
.org-tree ul { list-style:none; padding-left:32px; position:relative; }
.org-tree > ul { padding-left:0; }
.org-tree ul ul::before {
  content:''; position:absolute; left:14px; top:0; bottom:16px;
  width:1px; background:var(--ip-border);
}
.org-tree li { position:relative; padding:6px 0; }
.org-tree ul ul > li::before {
  content:''; position:absolute; left:-18px; top:22px;
  width:18px; height:1px; background:var(--ip-border);
}
.org-node {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; background:var(--card-bg);
  border:1px solid var(--ip-primary-lighter); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:border-color .15s, box-shadow .15s; max-width:320px;
}
.org-node:hover { border-color:var(--ip-primary); box-shadow:var(--shadow-md); }
.org-node.inactive { opacity:0.55; border-style:dashed; }
.org-node-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0; overflow:hidden;
}
.org-node-avatar img { width:100%; height:100%; object-fit:cover; }
.org-node-info { min-width:0; }
.org-node-name {
  font-weight:600; font-size:13px; color:var(--ip-body-text);
  display:flex; align-items:center; gap:6px;
}
.org-node-meta {
  font-size:11px; color:var(--ip-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-toggle {
  cursor:pointer; font-size:11px; color:var(--ip-primary);
  margin-left:4px; user-select:none;
}
.org-toggle:hover { text-decoration:underline; }

/* ═══ Module-Specific: Licenses ═══ */
.util-check { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--ip-primary-lighter); border-radius:8px; margin-bottom:6px; font-size:13px; }
.util-check input[type=checkbox] { width:16px; height:16px; }
.util-check .util-name { flex:1; font-weight:600; }
.util-check .util-expiry { font-size:12px; color:var(--ip-muted); }
.util-check input[type=date] { padding:4px 8px; border:1px solid var(--ip-border); border-radius:4px; font-size:12px; }

/* ═══ Chat: Navbar Icon ═══ */
.ip-chat-icon {
  position:relative; cursor:pointer; color:rgba(255,255,255,0.6); font-size:18px;
}
.ip-chat-icon:hover { color:#fff; }
.ip-chat-badge {
  position:absolute; top:-4px; right:-6px; background:var(--ip-danger); color:#fff;
  font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ═══ Chat: Slide-out Panel ═══ */
.ip-chat-panel {
  position:fixed; top:58px; right:0; bottom:0; width:380px; max-width:100vw;
  background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,0.15);
  z-index:70; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
}
.ip-chat-panel.open { transform:translateX(0); }
.ip-chat-header {
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--ip-primary);
  background:linear-gradient(135deg, var(--ip-primary-lightest), #fff); flex-shrink:0;
}
.ip-chat-header h3 { font-size:15px; font-weight:700; color:var(--ip-primary-dark); margin:0; display:flex; align-items:center; gap:8px; }
.ip-chat-close { cursor:pointer; font-size:18px; color:var(--ip-muted); background:none; border:none; font-family:var(--ip-font); }
.ip-chat-close:hover { color:var(--ip-body-text); }
.ip-chat-body { flex:1; overflow-y:auto; }

/* ═══ Chat: Conversation List ═══ */
.ip-conv-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid #EBF5FB;
  cursor:pointer; transition:background .15s;
}
.ip-conv-item:hover { background:var(--ip-primary-lightest); }
.ip-conv-item.unread { background:rgba(46,134,193,0.06); }
.ip-conv-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0; position:relative;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; overflow:hidden;
}
.ip-conv-avatar img { width:100%; height:100%; object-fit:cover; }
.ip-conv-avatar .status-dot {
  position:absolute; bottom:0; right:0; width:10px; height:10px;
  border:2px solid #fff; border-radius:50%; margin:0;
}
.ip-conv-info { flex:1; min-width:0; }
.ip-conv-name { font-size:13px; font-weight:600; color:var(--ip-body-text); }
.ip-conv-preview { font-size:12px; color:var(--ip-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-conv-meta { text-align:right; flex-shrink:0; }
.ip-conv-time { font-size:10px; color:var(--ip-muted); display:block; }
.ip-conv-unread {
  background:var(--ip-primary); color:#fff; font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  margin-top:4px;
}

/* ═══ Chat: Message Thread ═══ */
.ip-msg-list { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
.ip-msg-bubble { max-width:80%; padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.4; word-wrap:break-word; }
.ip-msg-bubble.sent { background:var(--ip-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.ip-msg-bubble.received { background:var(--ip-primary-lightest); color:var(--ip-body-text); align-self:flex-start; border-bottom-left-radius:4px; }
.ip-msg-time { font-size:10px; color:var(--ip-muted); margin-top:2px; }
.ip-msg-time.sent { text-align:right; }
.ip-msg-input {
  display:flex; gap:8px; padding:12px 18px;
  border-top:1px solid var(--ip-primary-lighter); flex-shrink:0; align-items:flex-end;
}
.ip-msg-input textarea {
  flex:1; padding:8px 12px; border:1px solid var(--ip-border); border-radius:8px;
  font-size:13px; font-family:var(--ip-font); line-height:1.4; resize:vertical; outline:none;
  max-height:180px; min-height:58px;
}
.ip-msg-input textarea:focus { border-color:var(--ip-primary); }

/* ═══ Chat: User Picker ═══ */
.ip-user-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; border-bottom:1px solid #EBF5FB;
  cursor:pointer; transition:background .15s;
}
.ip-user-item:hover { background:var(--ip-primary-lightest); }

/* ═══ Announcements Widget ═══ */
.ip-ann-card { padding:16px 18px; border-bottom:1px solid #EBF5FB; }
.ip-ann-card:last-child { border-bottom:none; }
.ip-ann-card.pinned { border-left:3px solid var(--ip-warning); background:rgba(212,172,13,0.04); }
.ip-ann-title { font-size:14px; font-weight:700; color:var(--ip-primary-dark); margin-bottom:4px; }
.ip-ann-body { font-size:13px; color:var(--ip-body-text); line-height:1.5; margin-bottom:8px; white-space:pre-line; }
.ip-ann-meta { font-size:11px; color:var(--ip-muted); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ═══ Task Board (Kanban) ═══ */
.task-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; }
.task-column {
  flex:1; min-width:220px; max-width:320px;
  background:var(--ip-primary-lightest); border-radius:var(--radius);
  display:flex; flex-direction:column; max-height:calc(100vh - 280px);
}
.task-col-header {
  padding:10px 14px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; display:flex; align-items:center; justify-content:space-between;
  border-radius:var(--radius) var(--radius) 0 0; color:#fff; flex-shrink:0;
}
.task-col-header.todo        { background:var(--ip-primary); }
.task-col-header.in_progress { background:#E67E22; }
.task-col-header.review      { background:#8E44AD; }
.task-col-header.done        { background:var(--ip-success); }
.task-col-body { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px; }
.task-col-count {
  background:rgba(255,255,255,0.3); color:#fff; font-size:10px; font-weight:700;
  min-width:20px; height:20px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}

/* Task Card */
.task-card {
  background:var(--card-bg); border-radius:8px; padding:10px 12px;
  border:1px solid var(--ip-primary-lighter); box-shadow:var(--shadow-sm);
  cursor:pointer; transition:box-shadow .15s, border-color .15s;
}
.task-card:hover { border-color:var(--ip-primary); box-shadow:var(--shadow-md); }
.task-card-title { font-size:13px; font-weight:600; color:var(--ip-body-text); margin-bottom:6px; line-height:1.3; }
.task-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--ip-muted); }
.task-card-meta .project-badge {
  background:var(--ip-primary-lightest); color:var(--ip-primary); border:1px solid var(--ip-primary-lighter);
  padding:1px 6px; border-radius:8px; font-size:10px; font-weight:600;
}
.task-card-meta .due-date { white-space:nowrap; }
.task-card-meta .due-date.overdue { color:var(--ip-danger); font-weight:600; }

/* Priority dots */
.priority-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.priority-dot.low      { background:var(--ip-muted); }
.priority-dot.medium   { background:var(--ip-primary); }
.priority-dot.high     { background:#E67E22; }
.priority-dot.critical { background:var(--ip-danger); }

/* Priority badges (inline text) */
.priority-badge { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; text-transform:capitalize; }
.priority-badge.low      { background:#EAECEE; color:var(--ip-muted); }
.priority-badge.medium   { background:var(--ip-primary-lightest); color:var(--ip-primary); }
.priority-badge.high     { background:#FDEBD0; color:#E67E22; }
.priority-badge.critical { background:#FADBD8; color:var(--ip-danger); }

/* ═══ Chat Read Receipts ═══ */
.ip-read-tick { font-size:12px; color:var(--ip-muted); margin-left:4px; letter-spacing:-1px; }
.ip-read-tick.read { color:#2E94D1; font-weight:700; }

/* ═══ Chat: Attachments ═══ */
/* Message-list drop-target visual cue when a file is being dragged in. */
.ip-msg-list.drop-target {
  outline:2px dashed var(--ip-primary); outline-offset:-8px;
  background:rgba(46,134,193,0.04);
}
/* Attachments rendered inside message bubbles */
.ip-msg-atts { display:flex; flex-direction:column; gap:6px; margin-top:4px; max-width:80%; }
.ip-msg-atts.sent { align-self:flex-end; align-items:flex-end; }
.ip-msg-atts.received { align-self:flex-start; align-items:flex-start; }
.ip-msg-att-img {
  max-width:220px; max-height:220px; border-radius:10px; display:block;
  border:1px solid var(--ip-border);
}
.ip-msg-att-file {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--ip-primary-lightest);
  border:1px solid var(--ip-primary-lighter); border-radius:10px;
  color:var(--ip-body-text); text-decoration:none; font-size:12px;
  max-width:260px;
}
.ip-msg-att-file:hover { background:rgba(46,134,193,0.12); }
.ip-att-icon { font-size:18px; flex-shrink:0; }
.ip-att-name {
  flex:1; min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ip-att-size { color:var(--ip-muted); font-size:11px; flex-shrink:0; }

/* Composer chip strip: staged attachments waiting to be sent */
.ip-composer-atts {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 18px; border-top:1px solid #EBF5FB;
  background:#F8FBFD;
}
.ip-composer-chip {
  display:flex; align-items:center; gap:6px;
  padding:4px 6px 4px 8px; background:#fff;
  border:1px solid var(--ip-primary-lighter); border-radius:20px;
  font-size:11px; max-width:220px;
}
.ip-composer-chip img { width:22px; height:22px; border-radius:4px; object-fit:cover; }
.ip-composer-chip .ip-att-name { max-width:120px; }
.ip-composer-chip-x {
  background:none; border:none; cursor:pointer;
  font-size:16px; color:var(--ip-muted); line-height:1; padding:0 2px;
}
.ip-composer-chip-x:hover { color:var(--ip-danger); }
.ip-composer-uploading {
  font-size:11px; color:var(--ip-muted); font-style:italic; align-self:center;
}
.ip-attach-btn {
  background:none; border:none; cursor:pointer; font-size:20px;
  padding:4px 8px; color:var(--ip-muted); line-height:1;
}
.ip-attach-btn:hover { color:var(--ip-primary); }

/* ═══ Responsive ═══ */
@media (max-width:768px) {
  nav { padding:0 14px; height:54px; }
  .main-content { padding:14px 12px; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .module-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-card { padding:12px 14px; }
  .stat-card .stat-value { font-size:22px; }
  .quick-launch { grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:16px; }
  .ql-item { padding:10px 4px; gap:6px; }
  .ql-icon { width:34px; height:34px; font-size:16px; border-radius:8px; }
  .ql-name { font-size:11px; line-height:1.2; }
  .page-header { margin-bottom:16px; }
  .page-header h1 { font-size:18px; }
  .page-header.compact h1 { font-size:16px; }
  /* Comfortable tap targets */
  .btn { min-height:42px; padding:10px 16px; }
  .btn-sm { min-height:36px; padding:8px 14px; }
  .btn-xs { min-height:30px; }
  /* Navbar compression on tight screens */
  .brand-text { display:none; }
  .brand-divider { display:none; }
  .login-card { padding:28px 20px; }
  .ts-grid { overflow-x:auto; min-width:700px; }
  .line-item-row { grid-template-columns:1fr; gap:4px; }
  .nav-tabs { overflow-x:auto; flex-wrap:nowrap; }
  /* Team Overview rows slightly more breathable on touch */
  .team-row { padding:10px 14px; }
  /* Modal tightens on mobile */
  .modal { padding:20px 16px; }
}
@media (max-width:480px) {
  /* Keep action tiles as 2-col — never single-col on mobile */
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .quick-launch { grid-template-columns:repeat(4, 1fr); gap:6px; }
  .ql-item { padding:8px 2px; }
  .ql-name { font-size:10px; }
  .ip-chat-panel { width:100vw; }
  /* Honor iOS safe-area at bottom */
  body { padding-bottom:env(safe-area-inset-bottom); }
}
/* Tap highlight for touch devices */
@media (hover:none) {
  .ql-item:active, .stat-card.clickable:active { transform:scale(0.97); }
  .btn:active { opacity:0.85; }
}

/* ═══ Rewards Module ═══ */
.rw-total-card {
  text-align:center; padding:28px 20px; margin-bottom:24px;
  background:linear-gradient(135deg, var(--ip-primary-dark), var(--ip-primary));
  color:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.rw-total-pts { font-size:48px; font-weight:800; line-height:1; }
.rw-total-label { font-size:14px; opacity:0.85; margin-top:6px; }
.rw-points-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px;
}
.rw-point-card {
  background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:16px; text-align:center; transition:transform 0.15s;
}
.rw-point-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.rw-point-icon { font-size:28px; margin-bottom:6px; }
.rw-point-name { font-size:13px; font-weight:600; color:var(--ip-body-text); margin-bottom:4px; }
.rw-point-value { font-size:20px; font-weight:800; color:var(--ip-primary); }
.rw-point-count { font-size:11px; color:var(--ip-muted); }

/* Leaderboard podium */
.rw-podium { display:flex; justify-content:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.rw-podium-item {
  text-align:center; padding:20px 24px; border-radius:var(--radius-lg);
  background:var(--card-bg); box-shadow:var(--shadow-md); min-width:140px;
}
.rw-rank-1 { border:2px solid #F1C40F; order:0; }
.rw-rank-2 { border:2px solid #B0BEC5; order:-1; }
.rw-rank-3 { border:2px solid #CD7F32; order:1; }
.rw-podium-medal { font-size:32px; }
.rw-podium-avatar {
  width:48px; height:48px; border-radius:50%; background:var(--ip-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; margin:8px auto;
}
.rw-podium-name { font-weight:700; font-size:14px; }
.rw-podium-dept { font-size:11px; color:var(--ip-muted); }
.rw-podium-pts { font-size:22px; font-weight:800; color:var(--ip-primary); margin-top:4px; }

/* Social cards */
.rw-social-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.rw-social-card { padding:20px; }
.rw-social-platform {
  display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px;
  font-weight:700; text-transform:uppercase; margin-bottom:8px;
  background:var(--ip-primary-lighter); color:var(--ip-primary-dark);
}

/* ═══ Mini Charts (no charting library) ═══
   The portal ships zero third-party chart JS — these primitives draw with
   plain divs + percentage widths/heights, so they reflow with the container
   and never need DOM measurement. Every chart here is SINGLE-SERIES: one
   hue carries magnitude, identity comes from the row label, so there is no
   legend and no categorical palette to keep colourblind-safe. Bar fill is
   --ip-primary-dark (4.7:1 on white) rather than --ip-primary (2.6:1), so
   thin bars stay visible. Values are always printed next to the bar — the
   chart never makes the reader estimate a number off an axis. */
.viz-toggle {
  display:inline-flex; border:1px solid var(--ip-border); border-radius:8px;
  overflow:hidden; background:var(--card-bg);
}
.viz-toggle button {
  border:0; background:transparent; cursor:pointer; padding:7px 14px;
  font-family:var(--ip-font); font-size:12px; font-weight:600;
  color:var(--ip-muted); transition:background .15s, color .15s;
}
.viz-toggle button:hover { background:var(--ip-primary-lightest); color:var(--ip-primary-dark); }
.viz-toggle button.active { background:var(--ip-primary-dark); color:#fff; }
.viz-foot { padding:0 18px 14px; font-size:11px; color:var(--ip-muted); }

/* Floating hover tooltip (position:fixed — follows the cursor) */
.viz-tip {
  position:fixed; z-index:130; pointer-events:none; max-width:260px;
  background:var(--nav-bg); color:#fff; padding:7px 11px;
  border-radius:8px; box-shadow:var(--shadow-md); font-size:12px; line-height:1.45;
}
.viz-tip .vt-label { font-weight:700; margin-bottom:2px; }
.viz-tip .vt-sub { opacity:.85; font-size:11px; font-variant-numeric:tabular-nums; }

/* Horizontal ranked bars — best form for "which category is biggest" */
.hbar-list { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.hbar-row {
  display:grid; grid-template-columns:minmax(80px, 170px) 1fr auto;
  align-items:center; gap:12px; border-radius:6px;
}
.hbar-row:hover { background:var(--ip-primary-lightest); }
.hbar-label {
  font-size:12px; color:var(--ip-body-text); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hbar-track { position:relative; height:14px; background:var(--ip-primary-lightest); border-radius:4px; }
.hbar-fill {
  position:absolute; top:0; bottom:0; left:0; min-width:3px;
  background:var(--ip-primary-dark); border-radius:4px; transition:width .35s ease;
}
.hbar-value {
  font-size:12px; font-weight:700; color:var(--ip-primary-dark);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; min-width:74px;
}
.hbar-pct { font-size:11px; font-weight:600; color:var(--ip-muted); margin-left:6px; }

/* Vertical bars — time on x, one column per period */
.vbar-chart { padding:18px 18px 14px; }
.vbar-plot {
  position:relative; height:210px; display:flex; align-items:flex-end; gap:6px;
  padding-left:62px; border-bottom:1px solid var(--ip-secondary-border);
}
.vbar-gridline {
  position:absolute; left:62px; right:0; border-top:1px dashed var(--ip-primary-lighter);
}
.vbar-gridline span {
  position:absolute; right:100%; top:-7px; padding-right:8px;
  font-size:10px; color:var(--ip-muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.vbar-col {
  position:relative; z-index:1; flex:1; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
}
.vbar-col:hover .vbar-fill { background:var(--ip-primary); }
.vbar-fill {
  width:100%; max-width:52px; min-height:3px; background:var(--ip-primary-dark);
  border-radius:4px 4px 0 0; transition:height .35s ease, background .15s;
}
.vbar-axis { display:flex; gap:6px; padding-left:62px; margin-top:7px; }
.vbar-xlabel {
  flex:1; text-align:center; font-size:11px; color:var(--ip-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:768px) {
  .hbar-row { grid-template-columns:minmax(64px, 110px) 1fr auto; gap:8px; }
  .hbar-value { min-width:60px; font-size:11px; }
  .vbar-plot, .vbar-axis { padding-left:48px; }
  .vbar-gridline { left:48px; }
  .vbar-xlabel { font-size:10px; }
}
@media (max-width:600px) {
  /* Phone: stack the label above its bar — a fixed label column plus a
     right-aligned amount leaves the bar itself a few pixels wide. */
  .hbar-list { padding:14px 14px 16px; gap:12px; }
  /* Right gutter so the last x-axis label has room to centre itself
     instead of being clipped by the card edge. Applied to the plot too,
     so bars stay aligned with their labels. */
  .vbar-plot, .vbar-axis { padding-right:18px; }
  .vbar-gridline { right:18px; }
  .hbar-row { grid-template-columns:1fr auto; grid-template-areas:"label label" "track value"; row-gap:4px; }
  .hbar-label { grid-area:label; white-space:normal; }
  .hbar-track { grid-area:track; }
  .hbar-value { grid-area:value; }
  /* 12 month labels don't fit — show every third (Apr / Jul / Oct / Jan
     on a full FY); the tooltip and the Table view carry the per-month
     figures. The survivors drop the ellipsis and overflow into the
     hidden neighbours' space, otherwise each is still clamped to a 24px
     cell and reads "A…". Every-third rather than every-other also keeps
     the last label off the card's right edge, where it would clip. */
  /* min-width:0 is load-bearing: a flex item's automatic minimum size is
     its min-content width once overflow goes visible, which would widen
     every cell to the full "Apr 26" and push the columns out of line
     with their bars. */
  .vbar-axis .vbar-xlabel { min-width:0; overflow:visible; text-overflow:clip; visibility:hidden; }
  .vbar-axis .vbar-xlabel:nth-child(3n+1) { visibility:visible; }
}

/* Small form controls */
.form-control-sm {
  padding:4px 8px; border:1px solid var(--ip-border); border-radius:6px;
  font-size:13px; font-family:var(--ip-font);
}

@media (max-width:600px) {
  .rw-points-grid { grid-template-columns:repeat(2, 1fr); }
  .rw-podium { flex-direction:column; align-items:center; }
  .rw-rank-1, .rw-rank-2, .rw-rank-3 { order:0; }
  .rw-social-grid { grid-template-columns:1fr; }
}