/* ==========================================================================
   RB HRMS design system - employee portal, payroll admin, HQ panel.
   Har layout ke inline <style> ke BAAD load hota hai, isliye purane class naam
   (card, btn, badge, nav-a, hq-card ...) isi design pe aa jaate hain.
   Brand: logo navy #0B1B2B + green. Text contrast sab jagah 4.5:1+.
   Motion: sirf transform/opacity; prefers-reduced-motion pe band.
   ========================================================================== */

:root {
  /* brand */
  --rb-navy-950: #07121d;
  --rb-navy-900: #0b1b2b;
  --rb-navy-800: #12283d;
  --rb-navy-700: #1b3550;
  --rb-green-400: #7dc242;      /* logo green - sirf navy pe */
  --rb-green-600: #2f7f33;      /* primary (white text 5:1) */
  --rb-green-700: #276b2b;
  --rb-green-50: #eef8ea;
  --rb-green-100: #d9efcf;

  /* surfaces + text */
  --rb-bg: #f4f6f9;
  --rb-surface: #ffffff;
  --rb-surface-2: #f8fafc;
  --rb-border: #e3e8ef;
  --rb-border-strong: #cdd5df;
  --rb-text: #0f1b2a;
  --rb-text-2: #344256;
  --rb-muted: #5b6b7f;

  /* status */
  --rb-success: #067647; --rb-success-bg: #ecfdf3; --rb-success-bd: #abefc6;
  --rb-danger: #b42318;  --rb-danger-bg: #fef3f2;  --rb-danger-bd: #fecdca;
  --rb-warn: #b54708;    --rb-warn-bg: #fffaeb;    --rb-warn-bd: #fedf89;
  --rb-info: #175cd3;    --rb-info-bg: #eff8ff;    --rb-info-bd: #b2ddff;
  --rb-violet: #6941c6;  --rb-violet-bg: #f4f3ff;

  /* shape + depth */
  --rb-r-sm: 8px; --rb-r: 12px; --rb-r-lg: 16px; --rb-r-xl: 22px;
  --rb-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --rb-shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --rb-shadow-3: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --rb-shadow-pop: 0 24px 48px -12px rgba(16, 24, 40, .22);
  --rb-ring: 0 0 0 3px rgba(47, 127, 51, .28);

  /* motion */
  --rb-ease: cubic-bezier(.2, .8, .2, 1);
  --rb-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --rb-fast: 140ms; --rb-med: 240ms; --rb-slow: 420ms;

  --rb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* purane layouts ke variables isi design pe */
  --bg: var(--rb-bg); --surface: var(--rb-surface); --surface2: var(--rb-surface-2); --surface3: var(--rb-bg);
  --border: var(--rb-border); --border2: var(--rb-border-strong); --border-light: var(--rb-border);
  --brand: var(--rb-green-600); --brand-h: var(--rb-green-700); --brand-dim: var(--rb-green-50);
  --brand-dark: var(--rb-green-700); --brand-light: var(--rb-green-50);
  --primary: var(--rb-green-600); --primary-light: var(--rb-green-600); --primary-dim: var(--rb-green-50); --primary-dark: var(--rb-green-700);
  --text: var(--rb-text); --text2: var(--rb-text-2); --text3: var(--rb-muted); --text4: var(--rb-muted);
  --text-muted: var(--rb-muted); --text-dim: var(--rb-muted); --text-light: var(--rb-muted);
  --green: var(--rb-success); --green-bg: var(--rb-success-bg); --green-b: var(--rb-success-bd); --green-dim: var(--rb-success-bg);
  --red: var(--rb-danger); --red-bg: var(--rb-danger-bg); --red-b: var(--rb-danger-bd); --red-dim: var(--rb-danger-bg);
  --yellow: var(--rb-warn); --yellow-bg: var(--rb-warn-bg); --yellow-b: var(--rb-warn-bd); --yellow-dim: var(--rb-warn-bg);
  --purple: var(--rb-violet); --purple-bg: var(--rb-violet-bg); --purple-dim: var(--rb-violet-bg);
  --success: var(--rb-success); --success-bg: var(--rb-success-bg);
  --danger: var(--rb-danger); --danger-bg: var(--rb-danger-bg);
  --warning: var(--rb-warn); --warning-bg: var(--rb-warn-bg);
  --radius: var(--rb-r-sm); --radius-sm: 6px; --radius-lg: var(--rb-r);
  --shadow-sm: var(--rb-shadow-1); --shadow: var(--rb-shadow-2); --shadow-md: var(--rb-shadow-3); --shadow-lg: var(--rb-shadow-pop);
  --s1: var(--rb-shadow-1); --s2: var(--rb-shadow-2); --s3: var(--rb-shadow-3); --s4: var(--rb-shadow-pop);
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--rb-font); background: var(--rb-bg); color: var(--rb-text); font-feature-settings: 'cv11', 'ss01'; }
.num, .stat-val, .stat-value, .amount, td { font-variant-numeric: tabular-nums; }
a { color: var(--rb-green-600); }
::selection { background: var(--rb-green-100); }
:focus-visible { outline: none; box-shadow: var(--rb-ring); border-radius: 6px; }
button, a, select, input[type=checkbox], input[type=radio], label[for], summary { cursor: pointer; }
img { max-width: 100%; }

/* ---------- sidebar (teeno panels) ---------- */
.emp-sidebar, .payroll-sidebar, .hq-sidebar {
  background: linear-gradient(180deg, var(--rb-navy-900) 0%, var(--rb-navy-950) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .04);
  view-transition-name: rb-sidebar;
}
.emp-brand, .payroll-brand, .hq-logo { border-bottom-color: rgba(255, 255, 255, .06) !important; }
.brand-name, .hq-logo-text { color: #fff !important; font-weight: 700; letter-spacing: -.2px; }
.brand-sub, .hq-logo-sub { color: #a8b4c3 !important; }
.hq-logo-icon { background: rgba(125, 194, 66, .14) !important; color: var(--rb-green-400) !important; }
.nav-sec { color: #7f8ea3 !important; letter-spacing: .9px; }
.nav-a {
  position: relative; color: #a8b4c3 !important; border-radius: 10px !important; min-height: 38px;
  transition: background var(--rb-fast) var(--rb-ease), color var(--rb-fast) var(--rb-ease), transform var(--rb-fast) var(--rb-ease) !important;
}
.nav-a svg, .nav-a .ni { width: 17px; height: 17px; opacity: .9; }
.nav-a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; transform: translateX(2px); }
.nav-a.active { background: rgba(125, 194, 66, .14) !important; color: #fff !important; font-weight: 600; }
.nav-a.active::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--rb-green-400); animation: rb-grow-y var(--rb-med) var(--rb-ease-spring);
}
.nav-a.active svg { color: var(--rb-green-400); }
.emp-av, .admin-av { background: linear-gradient(135deg, var(--rb-green-600), var(--rb-green-400)) !important; }
.emp-uname, .admin-n { color: #fff !important; }
.emp-uid, .admin-r { color: #a8b4c3 !important; }
.admin-pill, .emp-user-row { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 12px !important; box-shadow: none !important; }
.admin-r { text-transform: capitalize; }

/* ---------- topbar ---------- */
.emp-topbar, .payroll-topbar, .hq-topbar {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rb-border) !important;
  view-transition-name: rb-topbar;
}
.topbar-title, .hq-topbar-title, .payroll-topbar h1 { font-weight: 700 !important; letter-spacing: -.3px; color: var(--rb-text) !important; }
.mob-menu-btn, .notif-bell {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  background: var(--rb-surface) !important; border: 1px solid var(--rb-border) !important; color: var(--rb-text-2) !important;
  align-items: center; justify-content: center;
  transition: transform var(--rb-fast) var(--rb-ease), box-shadow var(--rb-fast) var(--rb-ease);
}
.notif-bell { display: inline-flex; }
@media (min-width: 769px) { .mob-menu-btn { display: none !important; } }
.mob-menu-btn:hover, .notif-bell:hover { box-shadow: var(--rb-shadow-2); }
.mob-menu-btn:active, .notif-bell:active { transform: scale(.94); }
.notif-badge { background: var(--rb-danger) !important; animation: rb-pop var(--rb-slow) var(--rb-ease-spring); }
.notif-panel { border-radius: var(--rb-r-lg) !important; box-shadow: var(--rb-shadow-pop) !important; border-color: var(--rb-border) !important; transform-origin: top right; }
.notif-panel.show { animation: rb-scale-in var(--rb-med) var(--rb-ease-spring); }
.notif-item.unread { border-left-color: var(--rb-green-600) !important; }
.hq-logout, .logout-btn { border-radius: 10px !important; transition: background var(--rb-fast) var(--rb-ease); }
.hq-clock { font-variant-numeric: tabular-nums; color: var(--rb-muted) !important; }

/* ---------- cards ---------- */
.card, .hq-card, .panel, .stat-card, .stat, .kpi {
  background: var(--rb-surface) !important; border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-lg) !important; box-shadow: var(--rb-shadow-1) !important;
  transition: box-shadow var(--rb-med) var(--rb-ease), transform var(--rb-med) var(--rb-ease), border-color var(--rb-med) var(--rb-ease);
}
.card:hover, .hq-card:hover, .stat-card:hover, .kpi:hover { box-shadow: var(--rb-shadow-3) !important; }
.stat-card:hover, .kpi:hover, .rb-lift:hover { transform: translateY(-2px); }
.card-hd, .hq-card-header, .hq-card-head, .panel-hd { border-bottom-color: var(--rb-border) !important; }
.card-title, .hq-card-title, .panel-hd-t { font-weight: 700 !important; color: var(--rb-text) !important; letter-spacing: -.2px; }

/* ---------- tables ---------- */
th { background: var(--rb-surface-2) !important; color: var(--rb-muted) !important; font-weight: 600 !important; letter-spacing: .5px; border-bottom: 1px solid var(--rb-border) !important; }
td { color: var(--rb-text-2); border-bottom-color: var(--rb-border) !important; }
tbody tr { transition: background var(--rb-fast) var(--rb-ease); }
tbody tr:hover td { background: #f6faf4 !important; }
.table-wrap, .hq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- buttons ---------- */
.btn {
  border-radius: 10px !important; font-weight: 600 !important; min-height: 36px; position: relative; overflow: hidden;
  transition: background var(--rb-fast) var(--rb-ease), box-shadow var(--rb-fast) var(--rb-ease), transform var(--rb-fast) var(--rb-ease), color var(--rb-fast) !important;
}
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 32px; }
.btn-xs { min-height: 28px; }
.btn-primary, .btn-success { background: var(--rb-green-600) !important; border-color: var(--rb-green-600) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(47, 127, 51, .3); }
.btn-primary:hover, .btn-success:hover { background: var(--rb-green-700) !important; box-shadow: 0 6px 14px -4px rgba(47, 127, 51, .45); }
.btn-ghost { background: var(--rb-surface) !important; border: 1px solid var(--rb-border) !important; color: var(--rb-text-2) !important; }
.btn-ghost:hover { background: var(--rb-surface-2) !important; border-color: var(--rb-border-strong) !important; color: var(--rb-text) !important; }
.btn-danger { background: var(--rb-danger-bg) !important; color: var(--rb-danger) !important; border: 1px solid var(--rb-danger-bd) !important; }
.btn-danger:hover { background: var(--rb-danger) !important; color: #fff !important; }
.btn[disabled], .btn.is-loading { opacity: .75; pointer-events: none; }
.btn.is-loading::after {
  content: ''; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: rb-spin .7s linear infinite;
}
/* tap ripple (rb-ui.js) */
.rb-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: rb-ripple 520ms var(--rb-ease) forwards; }

/* ---------- badges ---------- */
.badge { border-radius: 999px !important; font-weight: 600 !important; padding: 3px 9px !important; letter-spacing: .1px; }
.badge-green { background: var(--rb-success-bg) !important; color: var(--rb-success) !important; }
.badge-red { background: var(--rb-danger-bg) !important; color: var(--rb-danger) !important; }
.badge-yellow { background: var(--rb-warn-bg) !important; color: var(--rb-warn) !important; }
.badge-blue { background: var(--rb-info-bg) !important; color: var(--rb-info) !important; }
.badge-purple { background: var(--rb-violet-bg) !important; color: var(--rb-violet) !important; }
.badge-gray { background: #eef1f5 !important; color: var(--rb-text-2) !important; }

/* ---------- forms ---------- */
.form-control, input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=month], input[type=time], input[type=tel], select, textarea {
  font-family: var(--rb-font);
}
.form-control {
  min-height: 42px; border-radius: 10px !important; border: 1px solid var(--rb-border-strong) !important; background: var(--rb-surface) !important;
  color: var(--rb-text) !important; font-size: 14px !important;
  transition: border-color var(--rb-fast) var(--rb-ease), box-shadow var(--rb-fast) var(--rb-ease) !important;
}
.form-control:hover { border-color: #b3bfcc !important; }
.form-control:focus { border-color: var(--rb-green-600) !important; box-shadow: var(--rb-ring) !important; outline: none; }
.form-label { color: var(--rb-text-2) !important; font-weight: 600 !important; letter-spacing: .3px; }
input[type=checkbox], input[type=radio] { accent-color: var(--rb-green-600); width: 18px; height: 18px; }

/* ---------- notices / toasts ---------- */
.notice { border-radius: 12px !important; display: flex; align-items: center; gap: 10px; animation: rb-slide-down var(--rb-slow) var(--rb-ease-spring); }
.notice.success { background: var(--rb-success-bg) !important; border: 1px solid var(--rb-success-bd) !important; color: var(--rb-success) !important; }
.notice.error { background: var(--rb-danger-bg) !important; border: 1px solid var(--rb-danger-bd) !important; color: var(--rb-danger) !important; }
.notice.info { background: var(--rb-info-bg) !important; border: 1px solid var(--rb-info-bd) !important; color: var(--rb-info) !important; }
.rb-toast-host { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10000; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.rb-toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--rb-navy-900); color: #fff; box-shadow: var(--rb-shadow-pop); font-size: 14px; animation: rb-toast-in var(--rb-slow) var(--rb-ease-spring); }
.rb-toast.out { animation: rb-toast-out var(--rb-med) var(--rb-ease) forwards; }
.rb-toast svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--rb-green-400); }
.rb-toast.error svg { color: #fda29b; }

/* ---------- skeleton ---------- */
.rb-skel { position: relative; overflow: hidden; background: #eaeef3; border-radius: 8px; min-height: 12px; }
.rb-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: rb-shimmer 1.2s infinite; }

/* ---------- empty state ---------- */
.rb-empty { text-align: center; padding: 36px 16px; color: var(--rb-muted); }
.rb-empty svg { width: 40px; height: 40px; color: var(--rb-border-strong); margin-bottom: 10px; }

/* ==========================================================================
   Motion
   ========================================================================== */
/* page content aane pe halka upar se fade; bachche ek-ek karke (stagger) */
.emp-content > *, .payroll-content > *, .hq-content > * { animation: rb-rise var(--rb-slow) var(--rb-ease) both; }
.emp-content > *:nth-child(2), .payroll-content > *:nth-child(2), .hq-content > *:nth-child(2) { animation-delay: 50ms; }
.emp-content > *:nth-child(3), .payroll-content > *:nth-child(3), .hq-content > *:nth-child(3) { animation-delay: 100ms; }
.emp-content > *:nth-child(4), .payroll-content > *:nth-child(4), .hq-content > *:nth-child(4) { animation-delay: 150ms; }
.emp-content > *:nth-child(5), .payroll-content > *:nth-child(5), .hq-content > *:nth-child(5) { animation-delay: 200ms; }
.emp-content > *:nth-child(n+6), .payroll-content > *:nth-child(n+6), .hq-content > *:nth-child(n+6) { animation-delay: 240ms; }
/* grid ke andar cards bhi stagger */
.rb-stagger > * { animation: rb-rise var(--rb-slow) var(--rb-ease) both; }
.rb-stagger > *:nth-child(1) { animation-delay: 60ms; } .rb-stagger > *:nth-child(2) { animation-delay: 110ms; }
.rb-stagger > *:nth-child(3) { animation-delay: 160ms; } .rb-stagger > *:nth-child(4) { animation-delay: 210ms; }
.rb-stagger > *:nth-child(5) { animation-delay: 250ms; } .rb-stagger > *:nth-child(n+6) { animation-delay: 290ms; }

/* sidebar drawer (mobile) */
.emp-sidebar, .payroll-sidebar, .hq-sidebar { transition: transform var(--rb-med) var(--rb-ease) !important; }
.sidebar-overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background: rgba(7, 18, 29, .45) !important; }
.sidebar-overlay.show { animation: rb-fade var(--rb-med) var(--rb-ease); }

/* page badalne pe (PWA + Chrome/Android): cross-document view transition */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: rb-vt-out 160ms var(--rb-ease) both; }
::view-transition-new(root) { animation: rb-vt-in 260ms var(--rb-ease) both; }
::view-transition-group(rb-sidebar), ::view-transition-group(rb-topbar), ::view-transition-group(rb-bottomnav) { animation: none; }

@keyframes rb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes rb-scale-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rb-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rb-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes rb-shimmer { to { transform: translateX(100%); } }
@keyframes rb-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rb-toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes rb-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes rb-vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .form-control { font-size: 16px !important; } /* iPhone zoom na kare */
  .card, .hq-card { border-radius: var(--rb-r) !important; }
}
@media print {
  .emp-sidebar, .payroll-sidebar, .hq-sidebar, .emp-topbar, .payroll-topbar, .hq-topbar, .rb-bottomnav, #aa-fab, .aa-fab, .rb-toast-host { display: none !important; }
  .emp-content > *, .payroll-content > *, .hq-content > * { animation: none !important; }
}

/* ---------- HQ specifics ---------- */
.hq-topbar-title { font-size: 16px !important; margin: 0; }
.hq-logout { display: inline-flex !important; align-items: center; gap: 6px; }
.hq-logo-icon { width: 36px !important; height: 36px !important; padding: 0 !important; background: transparent !important; }
.hq-nav .nav-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  .hq-logout span { display: none; }
  .hq-topbar-right { gap: 6px !important; }
  .hq-topbar-right form input[type=month] { width: 130px !important; }
}

/* ---------- Employee app: bottom navigation (mobile / PWA) ---------- */
.rb-bottomnav { display: none; }
@media (max-width: 768px) {
  .rb-bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--rb-border); view-transition-name: rb-bottomnav;
  }
  .rb-bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center;
    color: var(--rb-muted); text-decoration: none; font-size: 11px; font-weight: 600; border-radius: 14px;
    transition: color var(--rb-fast) var(--rb-ease);
  }
  .rb-bn-icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background var(--rb-med) var(--rb-ease), transform var(--rb-med) var(--rb-ease-spring); }
  .rb-bn-icon svg { width: 21px; height: 21px; }
  .rb-bn-item:active .rb-bn-icon { transform: scale(.9); }
  .rb-bn-item.active { color: var(--rb-green-600); }
  .rb-bn-item.active .rb-bn-icon { background: var(--rb-green-50); animation: rb-pill var(--rb-med) var(--rb-ease-spring); }
  .emp-content { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  #aa-fab, .aa-fab { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}
@keyframes rb-pill { from { transform: scaleX(.4); opacity: .4; } to { transform: none; opacity: 1; } }

/* PWA install / notification banners (employee app) */
.rb-banner { animation: rb-banner-in var(--rb-slow) var(--rb-ease-spring) both; border-radius: 16px !important; box-shadow: var(--rb-shadow-pop) !important; }
@keyframes rb-banner-in { from { opacity: 0; transform: translate(-50%, 18px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 769px) { .rb-banner { bottom: 24px !important; } }

/* Logo ka sirf ₹B nishaan (icon-512 se crop) - chhote size pe poora logo padha nahi jaata */
.rb-mark { display: inline-block; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: #0b1b2b url(/icons/icon-512.png) 45% 41.4% / 380% no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* rb-ui.js emoji ki jagah jo icon lagata hai */
.rb-ei, svg.rb-ei { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: .35em; stroke-width: 2.2; flex-shrink: 0; }

/* ---------- Modals (HQ edit / reset / attendance / documents) ---------- */
.rb-modal { background: rgba(7, 18, 29, .55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rb-modal-box {
  background: #fff !important; color: var(--rb-text); box-sizing: border-box;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  border: 1px solid var(--rb-border) !important; border-radius: 20px !important; box-shadow: var(--rb-shadow-pop) !important;
  animation: rb-modal-in 280ms var(--rb-ease-spring) both;
}
#docsModal .rb-modal-box { width: min(560px, 100%); }
.rb-modal-box .form-label { color: var(--rb-text-2) !important; }
.rb-modal-box .btn { min-height: 44px; }
@keyframes rb-modal-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }

/* ---------- Mobile / tablet: page screen se chauda na ho ---------- */
.hq-main, .payroll-main, .emp-main { min-width: 0; }
@media (max-width: 1100px) {
  .hq-card, .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
  .hq-main, .payroll-main, .emp-main { max-width: 100vw; }
  .hq-topbar { height: auto !important; min-height: 56px; flex-wrap: wrap; gap: 8px; padding: 8px 12px !important; }
  .hq-topbar-left { flex: 1 1 auto; min-width: 0; }
  .hq-topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hq-topbar-right { flex-wrap: wrap; justify-content: flex-end; }
  .hq-topbar-right:has(form, .btn) { order: 3; flex: 1 1 100%; justify-content: flex-start; padding-bottom: 2px; }
  .hq-topbar-right form { flex-wrap: wrap; }
  .hq-topbar-right .hq-logout { margin-left: auto; }
  .hq-table { min-width: 560px; }
  .hq-content [style*="grid-template-columns"], .payroll-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .hq-card-header, .card-hd { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 768px) { .rb-slip { padding: 16px !important; overflow-x: auto; } .rb-slip table { min-width: 340px; } }
@media print { .rb-slip { overflow: visible !important; } }
@media (max-width: 768px) {
  #topbarDate, .topbar-date { display: none !important; }
  .payroll-topbar .logout-btn { padding: 6px 10px !important; }
}