/* ==========================================================================
   Network Asset Center — theme.css
   Generated from DESIGN.md design tokens.
   Corporate Modern + Glassmorphism, Enterprise Blue / Heritage Red.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- surfaces (light / default) ---- */
  --surface:#faf8ff;
  --surface-dim:#d9d9e5;
  --surface-bright:#faf8ff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f3f3fe;
  --surface-container:#ededf9;
  --surface-container-high:#e7e7f3;
  --surface-container-highest:#e1e2ed;
  --on-surface:#191b23;
  --on-surface-variant:#434655;
  --inverse-surface:#2e3039;
  --inverse-on-surface:#f0f0fb;
  --outline:#737686;
  --outline-variant:#c3c6d7;

  /* ---- brand ---- */
  --primary:#004ac6;
  --on-primary:#ffffff;
  --primary-container:#2563eb;
  --on-primary-container:#eeefff;
  --inverse-primary:#b4c5ff;
  --secondary:#b90e1a;           /* Heritage Red */
  --on-secondary:#ffffff;
  --secondary-container:#dd2f2f;
  --on-secondary-container:#fffbff;
  --tertiary:#943700;
  --on-tertiary:#ffffff;
  --tertiary-container:#bc4800;
  --on-tertiary-container:#ffede6;

  --error:#ba1a1a;
  --on-error:#ffffff;
  --error-container:#ffdad6;
  --on-error-container:#93000a;

  --background:#f9fafb;
  --on-background:#191b23;
  --brand-navy:#1E1B4B;
  --success:#10B981;
  --warning:#F59E0B;
  --critical:#EF4444;
  --glass-surface: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.5);

  /* ---- type ---- */
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* ---- shape / spacing ---- */
  --radius-card:12px;
  --radius-control:8px;
  --radius-full:9999px;
  --gutter:24px;
  --margin-page:32px;
  --stack-compact:8px;
  --stack-default:16px;
  --stack-loose:32px;
}

[data-theme="dark"]{
  --surface:#101425;
  --surface-dim:#0b0e1a;
  --surface-bright:#1a2038;
  --surface-container-lowest:#0b0e1a;
  --surface-container-low:#131829;
  --surface-container:#171d33;
  --surface-container-high:#1c2339;
  --surface-container-highest:#222a44;
  --on-surface:#eef0ff;
  --on-surface-variant:#aab0cf;
  --outline:#454c6c;
  --outline-variant:#2a3050;
  --background:#0F172A;
  --on-background:#eef0ff;
  --glass-surface: rgba(23,29,51,0.65);
  --glass-border: rgba(180,197,255,0.12);
  --primary:#5f8dff;
  --on-primary:#00174b;
  --primary-container:#2563eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(0,74,198,0.08), transparent),
    radial-gradient(800px 400px at -10% 110%, rgba(185,14,26,0.05), transparent),
    var(--background);
  color:var(--on-background);
  font-size:14px;
  line-height:20px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary); color:var(--on-primary)}
a{color:var(--primary); text-decoration:none}
code, .mono{font-family:var(--font-mono)}

h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.01em}
.headline-xl{font-size:36px; font-weight:700; line-height:44px; letter-spacing:-0.02em}
.headline-lg{font-size:28px; font-weight:600; line-height:36px; letter-spacing:-0.01em}
.headline-md{font-size:20px; font-weight:600; line-height:28px}
.label-md{font-size:12px; font-weight:500; line-height:16px; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-surface-variant)}

/* ---------------- layout ---------------- */
/* Full-height app shell: the page itself no longer scrolls (height, not
   min-height) — #content is the one scrolling region, so the data view
   always fills the remaining viewport height under the topbar/sub-nav
   instead of only being as tall as whatever a page happens to render. */
#shell{display:flex; height:100vh; overflow:hidden}
#sidebar{
  width:280px; flex-shrink:0; position:fixed; top:0; bottom:0; left:0; z-index:1030;
  background:var(--glass-surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column; transition:transform .25s ease;
}
.brand-block{padding:24px 20px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--outline-variant)}
.brand-mark{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--brand-navy));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
  box-shadow:0 4px 14px rgba(0,74,198,.35);
}
.brand-title{font-size:14.5px; font-weight:700; line-height:1.25; color:var(--on-surface)}
.brand-sub{font-size:10.5px; color:var(--on-surface-variant); letter-spacing:.08em; text-transform:uppercase}

#navList{padding:14px 12px; overflow-y:auto; flex:1}
.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-surface-variant); padding:14px 10px 6px; font-weight:600}
.navlink{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-control);
  color:var(--on-surface); font-size:14px; font-weight:600; cursor:pointer; margin-bottom:4px;
  border:1px solid transparent; transition:background .18s, border-color .18s, transform .18s;
  --nav-color: var(--primary);
}
.navlink .nav-icon-badge{
  width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--nav-color) 16%, transparent);
  color:var(--nav-color); font-size:16px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
}
.navlink i{width:18px; text-align:center; color:var(--on-surface-variant); font-size:13px}
.navlink .nav-icon-badge i{width:auto; color:inherit; font-size:inherit}
.navlink:hover{background:var(--surface-container-high); transform:translateX(3px)}
.navlink:hover .nav-icon-badge{
  transform:scale(1.15) rotate(-6deg);
  box-shadow:0 4px 14px -2px color-mix(in srgb, var(--nav-color) 55%, transparent);
}
.navlink.active{
  background:linear-gradient(90deg, color-mix(in srgb, var(--nav-color) 14%, transparent), color-mix(in srgb, var(--nav-color) 2%, transparent));
  border-color:color-mix(in srgb, var(--nav-color) 35%, transparent); color:var(--nav-color);
}
.navlink.active .nav-icon-badge{
  background:var(--nav-color); color:#fff;
  box-shadow:0 4px 14px -2px color-mix(in srgb, var(--nav-color) 60%, transparent);
  animation:navBadgePulse 2.2s ease-in-out infinite;
}
.navlink .count{margin-inline-start:auto; background:var(--surface-container-highest); color:var(--on-surface-variant); font-weight:600; font-size:10.5px; padding:1px 8px; border-radius:var(--radius-full)}
@keyframes navBadgePulse{
  0%,100%{box-shadow:0 4px 14px -2px color-mix(in srgb, var(--nav-color) 60%, transparent)}
  50%{box-shadow:0 4px 20px 1px color-mix(in srgb, var(--nav-color) 80%, transparent)}
}

#main{flex:1; margin-left:280px; min-width:0; height:100vh; display:flex; flex-direction:column; overflow:hidden}

/* ---------------- Full RTL layout (Arabic UI) ----------------
   <html dir="rtl"> is set for Arabic (see app.js setLanguage()). Flex/inline
   layouts throughout this file mirror on their own once dir flips — this
   block only covers the spots that use fixed/absolute positioning or a
   physical left/right value, which never mirror automatically. */
html[dir="rtl"] #sidebar{
  left:auto; right:0; border-right:none; border-left:1px solid var(--glass-border);
}
html[dir="rtl"] #main{ margin-left:0; margin-right:280px; }
@media (max-width: 960px){
  html[dir="rtl"] #sidebar{ transform:translateX(100%); }
  html[dir="rtl"] #sidebar.open{ transform:translateX(0); }
  html[dir="rtl"] #main{ margin-right:0; }
}
html[dir="rtl"] .navlink:hover{ transform:translateX(-3px); }
html[dir="rtl"] .navlink:hover .nav-icon-badge{ transform:scale(1.15) rotate(6deg); }
html[dir="rtl"] .cat-tile:hover .cat-tile-icon{ transform:scale(1.12) rotate(4deg); }
html[dir="rtl"] .floating-fab:hover{ transform:scale(1.08) rotate(4deg); }

/* Floating widgets anchor to the LEFT in RTL — the sidebar now occupies the
   right edge, so this both avoids overlap and matches the mirrored layout. */
html[dir="rtl"] #reminderHolder{ right:auto; left:20px; }
html[dir="rtl"] .floating-fab{ right:auto; left:24px; }
html[dir="rtl"] .floating-panel{ right:auto; left:24px; }
html[dir="rtl"] #toastHolder{ right:auto; left:20px; }
@media (max-width: 960px){
  html[dir="rtl"] .floating-fab{ left:16px; right:auto; }
}

/* Physical border/margin accents (timeline rail, reminder/toast side-stripe,
   stat-card icon badge) mirror to the opposite edge in RTL. */
html[dir="rtl"] .timeline-item{ border-left:none; border-right:2px solid var(--outline-variant); padding-left:0; padding-right:14px; margin-left:0; margin-right:6px; }
html[dir="rtl"] .timeline-item::before{ left:auto; right:-6px; }
html[dir="rtl"] .reminder-card{ border-left:none; border-right:4px solid var(--warning); }
html[dir="rtl"] .toast{ border-left:none; border-right:3px solid var(--success); }
html[dir="rtl"] .toast.bad{ border-right-color:var(--critical); }
html[dir="rtl"] .toast.info{ border-right-color:var(--primary); }
html[dir="rtl"] .stat-card .stat-icon{ right:auto; left:14px; }

/* Directional chevrons (calendar month navigation, etc.) point the other
   way in RTL — "previous" moves visually right-to-left instead. */
html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-arrow-right{
  transform:scaleX(-1);
}

/* ---------------- Floating calendar / reminders widget ---------------- */
#reminderHolder{
  position:fixed; top:76px; right:20px; z-index:2050;
  display:flex; flex-direction:column; gap:10px; width:320px; max-width:calc(100vw - 32px);
}
.reminder-card{ padding:14px 16px; border-left:4px solid var(--warning); animation:reminderPop .3s ease }
.reminder-bell{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; background:rgba(245,158,11,.15); color:var(--warning);
  display:flex; align-items:center; justify-content:center; animation:navBadgePulse 1.8s ease-in-out infinite;
  --nav-color: var(--warning);
}
@keyframes reminderPop{ from{opacity:0; transform:translateY(-10px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)} }

.floating-fab{
  position:fixed; bottom:24px; right:24px; z-index:1950;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--primary), var(--brand-navy)); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,74,198,.5); transition:transform .2s ease;
}
.floating-fab:hover{ transform:scale(1.08) rotate(-4deg) }
.floating-panel{
  position:fixed; bottom:88px; right:24px; z-index:1940; width:340px; max-width:calc(100vw - 32px);
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-card);
  box-shadow:0 24px 60px -12px rgba(16,24,40,.35); overflow:hidden;
}
.cal-event-row{ display:flex; align-items:center; gap:8px; padding:10px 4px; border-bottom:1px solid var(--surface-container-high) }
.cal-event-row:last-child{ border-bottom:none }

.cal-grid-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px }
.cal-grid-weekdays div{ text-align:center; font-size:10px; font-weight:700; color:var(--on-surface-variant); text-transform:uppercase }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal-grid-cell{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:8px; cursor:pointer; font-size:12px; color:var(--on-surface); position:relative;
  transition:background .15s;
}
.cal-grid-cell.empty{ cursor:default }
.cal-grid-cell:not(.empty):hover{ background:var(--surface-container-high) }
.cal-grid-cell.today .cal-grid-daynum{ color:var(--primary); font-weight:700 }
.cal-grid-cell.selected{ background:rgba(0,74,198,.14) }
.cal-grid-dot{ width:5px; height:5px; border-radius:50%; background:var(--warning) }
.cal-grid-cell.has-events .cal-grid-daynum{ font-weight:700 }

/* ---------------- Speed gauge (topbar) ---------------- */
.speed-gauge-btn{ display:flex !important; align-items:center; gap:7px; padding:6px 10px !important }
.speed-gauge-ring{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;
  border:2px solid var(--outline-variant); color:var(--on-surface-variant); transition:border-color .3s, color .3s;
}
.speed-gauge-ring.speed-good{ border-color:var(--success); color:var(--success) }
.speed-gauge-ring.speed-ok{ border-color:var(--warning); color:var(--warning) }
.speed-gauge-ring.speed-bad{ border-color:var(--critical); color:var(--critical) }
.speed-gauge-ring.testing{ animation:speedSpin 1s linear infinite; border-style:dashed }
@keyframes speedSpin{ to{ transform:rotate(360deg) } }

@media (max-width: 960px){
  .floating-panel{ right:12px !important; left:12px !important; width:auto }
  .floating-fab{ right:16px; bottom:16px }
  #reminderHolder{ right:12px; left:12px; width:auto }
  .speed-gauge-btn span:last-child{ display:none } /* hide numeric label on small screens, keep the ring */
}
#topbar{
  position:sticky; top:0; z-index:1020; padding:16px var(--margin-page); flex-shrink:0;
  background:var(--glass-surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-border);
  display:flex; align-items:center; gap:16px;
}
#subNavBar{ flex-shrink:0; }
/* The one scrolling region in the app shell (see #shell/#main above) — this
   is "the window that shows the data" for every page, and it now always
   fills whatever vertical space is left under the topbar/sub-nav bar,
   rather than only being as tall as that page's own content. */
#content{padding:var(--margin-page); flex:1; overflow-y:auto; min-height:0}

/* ---------------- cards / glass ---------------- */
.glass-card{
  background:var(--glass-surface); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:var(--radius-card);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -8px rgba(16,24,40,.10);
}
.stat-card{padding:18px 20px; position:relative; overflow:hidden}
.stat-card .stat-icon{
  position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:14px; opacity:.9;
}
.stat-num{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--on-surface)}
.stat-label{color:var(--on-surface-variant); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-top:6px; font-weight:600}

/* ---------------- buttons ---------------- */
.btn{
  font-family:var(--font-body); font-size:13px; font-weight:600; border-radius:var(--radius-control);
  padding:8px 16px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:box-shadow .15s, background .15s, transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{box-shadow:0 0 0 4px rgba(0,74,198,.18)}
.btn-secondary{background:transparent; border-color:var(--outline-variant); color:var(--on-surface)}
.btn-secondary:hover{background:var(--surface-container-high)}
.btn-danger{background:transparent; border-color:var(--critical); color:var(--critical)}
.btn-danger:hover{background:rgba(239,68,68,.08)}
.btn-sm{padding:6px 11px; font-size:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------------- forms ---------------- */
.field{margin-bottom:0}
.field label{display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--on-surface-variant); margin-bottom:5px}
.input, select.input, textarea.input{
  width:100%; background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-control); padding:9px 12px; font-family:var(--font-body); font-size:13.5px;
  color:var(--on-surface); transition:border-color .15s, box-shadow .15s;
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,74,198,.15);
}
.input.mono{font-family:var(--font-mono)}

/* ---------------- table ---------------- */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse}
table.data thead th{
  text-align:start; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--on-surface-variant); padding:10px 14px; border-bottom:1px solid var(--outline-variant); white-space:nowrap;
}
table.data tbody td{padding:10px 14px; font-size:13px; border-bottom:1px solid var(--surface-container-high); color:var(--on-surface)}
table.data tbody tr:hover{background:var(--surface-container-low)}
.mono-cell{font-family:var(--font-mono); font-size:12px}

/* ---------------- status ---------------- */
.status-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  padding:4px 10px; border-radius:var(--radius-full); text-transform:uppercase;
}
.status-pill .dot{width:6px; height:6px; border-radius:50%}
.status-Working{background:rgba(16,185,129,.12); color:var(--success)}
.status-Working .dot{background:var(--success); box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.status-Faulty{background:rgba(239,68,68,.12); color:var(--critical)}
.status-Faulty .dot{background:var(--critical)}
.status-Maintenance{background:rgba(245,158,11,.14); color:var(--warning)}
.status-Maintenance .dot{background:var(--warning)}
.status-Retired{background:var(--surface-container-highest); color:var(--on-surface-variant)}
.status-Retired .dot{background:var(--on-surface-variant)}

/* heartbeat pulse for "live" indicators */
@keyframes heartbeat{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.pulse{animation:heartbeat 2s infinite}

/* ---------------- misc ---------------- */
.chip{display:inline-block; padding:3px 10px; border-radius:var(--radius-full); background:var(--surface-container-high); border:1px solid var(--outline-variant); font-size:11px; color:var(--on-surface-variant); margin-inline-end:4px}
.small-muted{color:var(--on-surface-variant); font-size:12px}
.divider{border:none; border-top:1px solid var(--outline-variant); margin:16px 0}
#toastHolder{position:fixed; bottom:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px}
.toast{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-left:3px solid var(--success);
  color:var(--on-surface); padding:11px 16px; border-radius:var(--radius-control); font-size:13px; min-width:240px;
  box-shadow:0 12px 28px -8px rgba(16,24,40,.20);
}
.toast.bad{border-left-color:var(--critical)}
.toast.info{border-left-color:var(--primary)}

.modal-backdrop-custom{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); z-index:1900; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-box{
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-card);
  box-shadow:0 24px 64px -12px rgba(16,24,40,.35);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--outline-variant)}
.modal-body{padding:22px}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--outline-variant)}
.close-x{background:none; border:none; font-size:16px; color:var(--on-surface-variant); cursor:pointer}

.dropzone{border:2px dashed var(--outline-variant); border-radius:var(--radius-card); padding:30px; text-align:center; color:var(--on-surface-variant); cursor:pointer}
.dropzone:hover{border-color:var(--primary); color:var(--primary)}

.timeline-item{border-left:2px solid var(--outline-variant); padding-left:14px; margin-left:6px; position:relative; padding-bottom:14px}
.timeline-item::before{content:''; position:absolute; left:-6px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--primary)}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{width:100%; max-width:400px; padding:36px 32px}
.login-logo{width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, var(--primary), var(--brand-navy)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; margin:0 auto 18px; box-shadow:0 8px 24px rgba(0,74,198,.35)}

@media (max-width: 960px){
  #sidebar{transform:translateX(-100%)}
  #sidebar.open{transform:translateX(0)}
  #main{margin-left:0}
  #sidebarToggle{display:inline-flex !important}
}

/* ---------------- Notification Center: dashboard news-bar ---------------- */
/* flex-wrap:nowrap is the fix for the reported bug — on a wide dashboard the
   row could wrap, dropping the OK button underneath the scrolling text. Every
   child below is also pinned to a fixed width (icon/button) or min-width:0 +
   overflow:hidden (the track), so nothing can force a wrap regardless of how
   long the message is or how wide the screen gets. */
.news-bar{
  display:flex; flex-wrap:nowrap; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--primary) 12%, var(--surface-container-lowest));
  color:var(--on-surface); border-radius:var(--radius-control); padding:8px 10px 8px 16px;
  overflow:hidden; position:relative;
  border:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.25);
}
/* Same rounded badge + hover motion as the sidebar's nav-icon-badge. */
.news-bar-icon{
  width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--on-primary); font-size:14px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  animation:navBadgePulse 2.2s ease-in-out infinite;
}
.news-bar:hover .news-bar-icon{ transform:scale(1.15) rotate(-6deg); }
html[dir="rtl"] .news-bar:hover .news-bar-icon{ transform:scale(1.15) rotate(6deg); }
.news-bar-track{
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden;
  font-size:13px; font-weight:600;
}
/* width:100% (not inline-block/shrink-to-fit) so translateX(±100%) always
   moves it exactly one bar-width off each side, however long the message
   is — otherwise a very long message's own text width would throw off the
   sweep's timing and distance. */
.news-bar-track-inner{
  display:block; width:100%;
  animation:newsBarScroll 40s linear infinite;
}
@keyframes newsBarScroll{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}
html[dir="rtl"] .news-bar-track-inner{ animation-direction:reverse; }
.news-bar-ok{
  flex-shrink:0; white-space:nowrap; background:var(--primary); border-color:transparent; color:var(--on-primary);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .2s;
}
.news-bar-ok:hover{ filter:brightness(1.08); transform:scale(1.06); }

/* ---------------- Category icon tile bar (top of Assets pages) ---------------- */
.cat-tile-bar{
  display:flex; gap:14px; overflow-x:auto; padding:6px 2px 16px;
  scrollbar-width:thin;
}
.cat-tile-bar::-webkit-scrollbar{height:6px}
.cat-tile-bar::-webkit-scrollbar-thumb{background:var(--outline-variant); border-radius:4px}
.cat-tile{
  --tile-color:var(--primary);
  flex:0 0 auto; width:112px; padding:16px 10px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-card); cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cat-tile:hover{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 14px 28px -10px color-mix(in srgb, var(--tile-color) 55%, transparent);
  border-color:var(--tile-color);
}
.cat-tile:active{ transform:translateY(-2px) scale(1.01); }
.cat-tile.active{
  background:color-mix(in srgb, var(--tile-color) 12%, var(--surface-container-lowest));
  border-color:var(--tile-color);
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--tile-color) 45%, transparent);
}
.cat-tile-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--tile-color) 16%, transparent); color:var(--tile-color);
  font-size:18px; transition:transform .18s ease;
}
.cat-tile:hover .cat-tile-icon{ transform:scale(1.12) rotate(-4deg); }
.cat-tile-label{ font-size:12px; font-weight:600; color:var(--on-surface); line-height:1.25; }
.cat-tile-count{ font-size:11px; color:var(--on-surface-variant); }

/* Sub-navigation bar (icon tiles for a group's members — Assets categories,
   People, Maintenance, Operations, etc.) sits between the topbar and the
   page content, sharing the page's horizontal padding. */
#subNavBar{padding:0 var(--margin-page)}
#subNavBar:empty{display:none}

/* Approvals — collapsed payload detail panel toggled by the "Details" arrow */
.hidden-collapse{display:none}

/* Row actions dropdown — replaces a strip of icon buttons with one menu.
   position:fixed (top/left set by JS in positionActionsMenu), and moved to
   a direct child of <body> while open (see toggleActionsMenu) — the table
   card it lives in uses backdrop-filter, which makes it the containing
   block for any position:fixed descendant, so leaving the menu in place
   would misposition and re-clip it. z-index above the modal layer (1900)
   since a menu can open from inside a modal (e.g. the employee-detail
   asset list). */
.actions-menu-list{
  position:fixed; z-index:1950; min-width:180px;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-control); box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px;
  display:flex; flex-direction:column; gap:2px;
}
/* Same specificity as .actions-menu-list above, so it must come after it in
   the file to win when both classes are on the element (closed by default,
   opened only via .hidden-collapse being removed by toggleActionsMenu()). */
.actions-menu-list.hidden-collapse{ display:none; }
.actions-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start; background:none; border:none;
  padding:8px 10px; border-radius:8px; font-size:12.5px; color:var(--on-surface); cursor:pointer;
}
.actions-menu-item:hover{ background:var(--surface-container-high); }
.actions-menu-item i{ width:14px; text-align:center; color:var(--on-surface-variant); }
.actions-menu-item.danger{ color:var(--critical); }
.actions-menu-item.danger i{ color:var(--critical); }
.actions-menu-chevron{ transition:transform .15s ease; }
.actions-menu-trigger.open .actions-menu-chevron{ transform:rotate(180deg); }