*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- BRAND: Drone Star Production -------------------------
   Star Gold    #c4921a  - primary accent (always)
   Midnight Navy #122231 - primary dark background
   Mission Green #1b6b3a - operational / active
   Command Red   #b01c2e - critical / terminate
   Terra Warning #c94a1f - caution / alert
   Slate         #6a7b8b - inactive / muted
   Forest Command #1a3a2a - alt bg / section accents
------------------------------------------------------------ */

:root {
  --accent:       #c4921a;
  --accent-dark:  #a87818;
  --accent-light: #fef3c7;
  --red:          #b01c2e;
  --yellow:       #c94a1f;
  --green:        #1b6b3a;
  --cyan:         #0e7490;
  --purple:       #7c3aed;
  --orange:       #c94a1f;

  --gray-50:  #f5f5f3;
  --gray-100: #ededea;
  --gray-200: #e0ddd8;
  --gray-300: #c4c8cc;
  --gray-400: #9aa3ac;
  --gray-500: #6a7b8b;
  --gray-600: #4a5a6a;
  --gray-700: #2d3e4f;
  --gray-800: #1b2e40;
  --gray-900: #122231;

  --bg:       #f5f5f3;
  --bg-card:  #ffffff;
  --border:   #e0ddd8;
  --text:     #1b2e40;
  --text-muted: #6a7b8b;

  --navbar-bg: #122231;
  --navbar-h:  48px;
  --radius:    6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 1px 4px rgba(0,0,0,.10);
  --shadow-md: 0 4px 12px rgba(0,0,0,.14);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:       #122231;
  --bg-card:  #1b2e40;
  --border:   #253d52;
  --text:     #f7f7f7;
  --text-muted: #6a7b8b;

  --gray-50:  #122231;
  --gray-100: #1b2e40;
  --gray-200: #253d52;
  --gray-300: #3a5166;
  --gray-400: #556b80;
  --gray-500: #6a7b8b;
  --gray-600: #a0b0bc;
  --gray-700: #c4cdd5;
  --gray-800: #e8ecef;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.65);
  color-scheme: dark;
}

html { background: var(--bg); overflow-y: scroll; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .8rem; color: var(--text-muted); }
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
dialog::backdrop { background: rgba(0,0,0,.55); }
html.in-modal { padding: 0; margin: 0; }
html.in-modal .navbar { display: none; }
html.in-modal body { margin: 0; padding: 0; }
html.in-modal .container { padding-top: 0; }

/* --- TOP NAV --------------------------------------------- */
.navbar {
  background: var(--navbar-bg);
  color: #fff;
  height: var(--navbar-h);
  display: flex;
  align-items: stretch;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
  gap: 0;
}
.nav-brand { display: flex; align-items: center; gap: 0; text-decoration: none; margin-right: 1.5rem; flex-shrink: 0; }
.brand-wordmark { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: .35em; text-transform: uppercase; color: #fff; }
.brand-divider { width: 1px; height: 1.4em; background: rgba(255,255,255,.25); margin: 0 .65rem; }
.brand-division { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: .35em; text-transform: uppercase; color: var(--accent); }
.nav-links { display: flex; align-items: stretch; gap: 0; flex: 1; }
.nav-links a { display: flex; align-items: center; color: rgba(255,255,255,.65); text-decoration: none; font-size: .8125rem; padding: 0 .875rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.nav-links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.3); text-decoration: none; }
.nav-links a.nav-active { color: #fff; border-bottom-color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }
.theme-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; padding: .25rem .4rem; border-radius: 4px; color: rgba(255,255,255,.65); line-height: 1; transition: color .15s, background .15s; }
.theme-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-switcher { display: flex; align-items: center; gap: .2rem; }
.lang-btn { color: rgba(255,255,255,.55); font-size: .7rem; font-weight: 600; letter-spacing: .05em; padding: .2rem .35rem; border-radius: 3px; transition: color .15s, background .15s; text-decoration: none; }
.lang-btn:hover { color: #fff; text-decoration: none; }
.lang-active { color: #fff !important; background: rgba(255,255,255,.15); }
.lang-sep { color: rgba(255,255,255,.25); font-size: .7rem; }
.nav-divider { width: 1px; height: 1.4em; background: rgba(255,255,255,.2); margin: 0 .3rem; }
.nav-user { color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 500; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout { color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 500; padding: .2rem .45rem; border-radius: 3px; text-decoration: none; transition: color .15s, background .15s; }
.nav-logout:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }

/* --- LAYOUT ---------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.25rem; }

/* --- PAGE HEADER ----------------------------------------- */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.page-header h1 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.header-actions { display: flex; gap: .5rem; }

/* --- SECTION HEADER -------------------------------------- */
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 1.25rem 0 .75rem; }
.section-header h2 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0; }

/* --- HEADINGS -------------------------------------------- */
h1 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
h2 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 1.25rem 0 .75rem; }
h3 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: .5rem; }

/* --- BUTTONS --------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .375rem .875rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-size: .8125rem; font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; line-height: 1.4; }
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--gray-100); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--text); }
.btn-danger    { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-success   { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: #155e30; border-color: #155e30; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: .9rem; padding: .25rem; color: var(--gray-400); line-height: 1; }
.btn-icon:hover { color: var(--red); }
.btn-sm { padding: .25rem .6rem; font-size: .75rem; }

/* --- STAT CARDS ------------------------------------------ */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat-card { background: var(--bg-card); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); border: 1px solid var(--border); }
.stat-value { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.875rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-label { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }

/* --- TABLE ----------------------------------------------- */
.table-wrap { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; margin-bottom: 1rem; }
.table { width: 100%; border-collapse: collapse; }
.table th { background: var(--gray-50); text-align: left; padding: .5rem .75rem; font-size: .725rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
.table td { padding: .5rem .75rem; border-top: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: var(--gray-50); }
.table tbody tr:first-child td { border-top: none; }
.notes-cell { max-width: 220px; white-space: pre-wrap; font-size: .8rem; color: var(--text-muted); }
.row-danger td  { background: rgba(239,68,68,.08)  !important; }
.row-warning td { background: rgba(245,158,11,.08) !important; }
.totals-row td  { border-top: 2px solid var(--border) !important; background: var(--gray-50); font-weight: 600; }
.row-wt-preventivno td { background: rgba(6,182,212,.06)   !important; }
.row-wt-korektivno td  { background: rgba(249,115,22,.06)  !important; }
.row-wt-ciscenje td    { background: rgba(168,85,247,.06)  !important; }
.row-wt-ostalo td      { background: rgba(107,114,128,.05) !important; }
.row-cat-adhezija td      { background: rgba(234,179,8,.06)  !important; }
.row-cat-ekstrudiranje td { background: rgba(244,63,94,.06)  !important; }
.row-cat-hardver td       { background: rgba(99,102,241,.06) !important; }
.row-cat-slice_gcode td   { background: rgba(139,92,246,.06) !important; }
.row-cat-filament td      { background: rgba(34,197,94,.06)  !important; }
.row-cat-elektronika td   { background: rgba(249,115,22,.06) !important; }

/* --- BADGES ---------------------------------------------- */
.badge { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 600; white-space: nowrap; letter-spacing: .02em; }
.badge-danger    { background: #fbeaed; color: #b01c2e; border: 1px solid #f0b8c0; }
.badge-warning   { background: #fdf0eb; color: #c94a1f; border: 1px solid #f0c4b0; }
.badge-ok        { background: #e8f5ee; color: #1b6b3a; border: 1px solid #a8d5bc; }
.badge-info      { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-muted     { background: var(--gray-100); color: var(--text-muted); border: 1px solid var(--border); }
.badge-sev-low      { background: #e8f5ee; color: #1b6b3a; border: 1px solid #a8d5bc; }
.badge-sev-medium   { background: #fff4e0; color: #a87818; border: 1px solid #f0d090; }
.badge-sev-high     { background: #fdf0eb; color: #c94a1f; border: 1px solid #f0c4b0; }
.badge-sev-critical { background: #fbeaed; color: #b01c2e; border: 1px solid #f0b8c0; }
.badge-wt-preventivno { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.badge-wt-korektivno  { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.badge-wt-ciscenje    { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }
.badge-wt-ostalo      { background: var(--gray-100); color: var(--text-muted); border: 1px solid var(--border); }
.badge-cat-adhezija      { background: #fefce8; color: #ca8a04; border: 1px solid #fef08a; }
.badge-cat-ekstrudiranje { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.badge-cat-hardver       { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.badge-cat-slice_gcode   { background: #faf5ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.badge-cat-filament      { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.badge-cat-elektronika   { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.badge-tt-inspection  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-tt-cleaning    { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.badge-tt-lubrication { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }
.badge-tt-replacement { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.badge-tt-calibration { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.badge-status-aktivan    { background: #e8f5ee; color: #1b6b3a; border: 1px solid #a8d5bc; }
.badge-status-upozorenje { background: #fdf0eb; color: #c94a1f; border: 1px solid #f0c4b0; }
.badge-status-u-servisu  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-status-neaktivan  { background: var(--gray-100); color: var(--text-muted); border: 1px solid var(--border); }

/* --- FORMS ----------------------------------------------- */
.form-card { background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); max-width: 860px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.form-row.two-col { grid-template-columns: 1fr 1fr; }
.form-row.two-col > div { display: flex; flex-direction: column; gap: .3rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.form-group label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.form-group input, .form-group select, .form-group textarea { border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .65rem; font-size: .875rem; background: var(--bg-card); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,146,26,.15); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* --- FILTER BAR ------------------------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .625rem .75rem; }
.filter-bar select, .filter-bar input { border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem .6rem; font-size: .8125rem; background: var(--bg-card); color: var(--text); }
.filter-bar select:focus, .filter-bar input:focus { border-color: var(--accent); outline: none; }
.filter-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-right: .25rem; }

/* --- CARD GRID ------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* --- PRINTER CARDS --------------------------------------- */
.printer-card { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; display: flex; flex-direction: column; overflow: hidden; }
.printer-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); text-decoration: none; }
.printer-card-photo { width: 100%; height: 120px; object-fit: cover; display: block; }
.printer-card-photo-placeholder { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--gray-300); background: var(--gray-50); }
.printer-card-body { padding: .875rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.printer-card-name { font-weight: 600; font-size: .9375rem; }
.printer-card-model { font-size: .8rem; color: var(--text-muted); }
.printer-card-footer { padding: .5rem .875rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--gray-50); }

/* --- ACTION / ALERT LIST --------------------------------- */
.action-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.action-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .625rem .875rem; display: flex; align-items: center; gap: .75rem; box-shadow: var(--shadow-sm); }
.action-item.urgent  { border-left: 3px solid var(--red); }
.action-item.warning { border-left: 3px solid var(--yellow); }
.action-item-body { flex: 1; min-width: 0; }
.action-item-title { font-size: .875rem; font-weight: 500; }
.action-item-sub   { font-size: .775rem; color: var(--text-muted); margin-top: .15rem; }
.action-item-meta  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

/* --- PROGRESS BAR ---------------------------------------- */
.progress-wrap { background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 6px; background: var(--accent); border-radius: 3px; transition: width .3s; }
.progress-fill.danger  { background: var(--red); }
.progress-fill.warning { background: var(--yellow); }
.progress-fill.ok      { background: var(--green); }

/* --- MAINTENANCE TASK ROWS ------------------------------- */
.task-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; box-shadow: var(--shadow-sm); }
.task-row.overdue  { border-left: 3px solid var(--red); }
.task-row.soon     { border-left: 3px solid var(--yellow); }
.task-row-body     { flex: 1; min-width: 0; }
.task-name         { font-weight: 500; font-size: .875rem; }
.task-tips         { font-size: .775rem; color: var(--text-muted); margin-top: .2rem; }
.task-progress     { width: 120px; flex-shrink: 0; }

/* --- DASHBOARD PRINTER GRID ------------------------------ */
.printer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.printer-card-photo-wrap { display: block; text-decoration: none; overflow: hidden; }
.printer-card-photo-wrap img { width: 100%; height: 120px; object-fit: cover; display: block; transition: transform .2s; }
.printer-card:hover .printer-card-photo-wrap img { transform: scale(1.03); }
.printer-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.printer-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.printer-card-service { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .775rem; color: var(--text-muted); margin-top: .25rem; }
.printer-card-warning { border-color: var(--yellow); }
.printer-card-danger  { border-color: var(--red); }
.printer-card-warning .printer-card-photo-placeholder { background: #fffbeb; }
.printer-card-danger  .printer-card-photo-placeholder { background: #fef2f2; }

/* --- FILAMENT CARDS -------------------------------------- */
.filament-card { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.filament-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); text-decoration: none; }
.filament-card-swatch { width: 100%; height: 110px; object-fit: cover; display: block; }
.filament-card-swatch-div { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.filament-card-body { padding: .875rem; flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.filament-card-name { font-weight: 600; font-size: .9rem; }
.filament-card-sub  { font-size: .8rem; color: var(--text-muted); }
.filament-usage-bar { height: 5px; background: var(--gray-200); border-radius: 3px; margin-top: .4rem; overflow: hidden; }
.filament-usage-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }

/* --- TABS ------------------------------------------------ */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; margin-top: .75rem; }
.tab-btn { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; padding: .5rem 1.1rem; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--text-muted); transition: color .15s, border-color .15s; margin-bottom: -1px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.tab-visible { display: block; }

/* --- SERIAL / MONO --------------------------------------- */
.serial-link { font-family: monospace; font-size: .775rem; font-weight: 600; color: var(--text-muted); text-decoration: none; background: var(--gray-100); padding: .15rem .4rem; border-radius: 4px; border: 1px solid var(--border); }
.serial-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.serial-display { font-family: monospace; font-size: .9rem; color: var(--text-muted); }

/* --- INFO GRID ------------------------------------------- */
.info-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; background: var(--bg-card); padding: .875rem 1.125rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 1rem; }
.info-item { display: flex; flex-direction: column; gap: .2rem; }
.info-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.info-value { font-size: .9rem; }

/* --- SPOOL DOT / SWATCH ----------------------------------- */
.spool-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; margin-right: 2px; }

/* --- PRINTER THUMB --------------------------------------- */
.printer-thumb { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .35rem; border: 1px solid var(--border); }
.printer-detail-photo { width: 80px; height: 80px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); }

/* --- MISC ------------------------------------------------ */
.muted { color: var(--text-muted); font-size: .8125rem; }
.text-danger  { color: var(--red); }
.text-warning { color: var(--yellow); }
.text-success { color: var(--green); }
.text-accent  { color: var(--accent); }
.fw-600 { font-weight: 600; }
.mt-1 { margin-top: .5rem; }
.mb-1 { margin-bottom: .5rem; }

/* --- DARK MODE OVERRIDES --------------------------------- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-200); }
html[data-theme="dark"] .btn-secondary { background: var(--gray-100); color: var(--gray-800); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--gray-100); }
html[data-theme="dark"] .table th { background: var(--gray-100); }
html[data-theme="dark"] .table tr:hover td { background: var(--gray-100); }
html[data-theme="dark"] .filter-bar { background: var(--gray-100); }
html[data-theme="dark"] .serial-link { background: var(--gray-100); border-color: var(--gray-200); }
html[data-theme="dark"] .printer-card-footer { background: var(--gray-100); }
html[data-theme="dark"] .badge-danger    { background: #2d0a12; color: #f0929e; border-color: #6b1020; }
html[data-theme="dark"] .badge-warning   { background: #2d1408; color: #f0a080; border-color: #6b2e10; }
html[data-theme="dark"] .badge-ok        { background: #0a2418; color: #6dba96; border-color: #16502e; }
html[data-theme="dark"] .badge-info      { background: #0f1f3d; color: #7eb0f0; border-color: #1a3366; }
html[data-theme="dark"] .badge-muted     { background: var(--gray-100); color: var(--text-muted); }
html[data-theme="dark"] .badge-sev-critical { background: #2d0a12; color: #f0929e; border-color: #6b1020; }
html[data-theme="dark"] .badge-sev-high  { background: #2d1408; color: #f0a080; border-color: #6b2e10; }
html[data-theme="dark"] .badge-sev-medium{ background: #2d1e06; color: #e8b860; border-color: #6b4810; }
html[data-theme="dark"] .badge-sev-low   { background: #0a2418; color: #6dba96; border-color: #16502e; }
html[data-theme="dark"] .badge-status-aktivan    { background: #0a2418; color: #6dba96; border-color: #16502e; }
html[data-theme="dark"] .badge-status-upozorenje { background: #2d1408; color: #f0a080; border-color: #6b2e10; }
html[data-theme="dark"] .badge-status-u-servisu  { background: #0f1f3d; color: #7eb0f0; border-color: #1a3366; }