/* =====================================================================
   ArdiNET UI — sistemi i dizajnit (ridizajni 2026-10)
   Ngarkohet pas app.css (Vite) te components/metal-layout.blade.php.
   Ngjyrat janë variabla: light te :root, dark te html.cd (butoni te topbar-i).
   Faqet nuk kanë nevojë për ndryshim që të marrin pamjen e re.
   ===================================================================== */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #dfe2e7;
  --line2: #eceef1;
  --head: #f7f8fa;
  --zebra: #fafbfc;
  --hover: #f0f4fb;
  --text: #14171c;
  --text2: #3b424d;
  --muted: #5f6773;
  --soft: #eef0f3;
  --pri: #1f4fbf;
  --priH: #1a43a3;
  --priSoft: #e8effc;
  --link: #1a4fd6;
  --field: #b9c0ca;
  --fieldH: #8d96a3;
  --focus: #2563eb;
  --ring: rgba(37, 99, 235, .18);
  --ok: #0b6b35;   --okBg: #e3f3e9;   --okLn: #b9dfc8;
  --bad: #a8202c;  --badBg: #fbe7e8;  --badLn: #f0c2c6;
  --warn: #87500a; --warnBg: #fbf0dc; --warnLn: #ecd3a5;
  --info: #1d4ed8; --infoBg: #e8effc; --infoLn: #c3d3f5;
  --nav: #12161d;
  --navText: #aeb6c2;
  --navHover: #1c222c;
  --navLine: #222936;
  --navMuted: #6b7482;
  --alert: #e5484d;
}

html.cd {
  color-scheme: dark;
  --bg: #0c0f14;
  --panel: #12161d;
  --line: #262d38;
  --line2: #1d232c;
  --head: #161b23;
  --zebra: #141920;
  --hover: #18212e;
  --text: #e4e8ee;
  --text2: #c3cad4;
  --muted: #98a1ae;
  --soft: #1c222b;
  --pri: #3d6fe0;
  --priH: #5583ee;
  --priSoft: #17243a;
  --link: #7aa5ff;
  --field: #3b4553;
  --fieldH: #5a6676;
  --focus: #6d95ff;
  --ring: rgba(109, 149, 255, .25);
  --ok: #5fd18e;   --okBg: #10261a;   --okLn: #1d4630;
  --bad: #ff7d87;  --badBg: #2c1316;  --badLn: #55242a;
  --warn: #f0b14c; --warnBg: #2b2010; --warnLn: #4f3b16;
  --info: #8cb0ff; --infoBg: #16223a; --infoLn: #26406b;
  --nav: #0a0d11;
  --navHover: #161b23;
  --navLine: #1d232c;
}

/* ---------- Baza ---------- */
.ui [x-cloak] { display: none !important; }
body.ui {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
.ui a { color: inherit; }
.ui hr { border-color: var(--line); }
.ui ::selection { background: var(--priSoft); }

/* ---------- Struktura ---------- */
.ui .mt-shell { display: flex; min-height: 100vh; background: var(--bg); }
.ui .mt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.ui .mt-main > main { flex: 1; }

/* ---------- Sidebar ---------- */
.ui .mt-sidebar {
  width: 224px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
  background: var(--nav); box-shadow: none; padding: 14px 10px 16px;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: #2a313d transparent;
}
.ui .mt-brand { display: flex; align-items: baseline; gap: 0; padding: 2px 10px 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ui .mt-logo-a { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.ui .mt-logo-b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ff3b4f; }
.ui .mt-brand-tag { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--navMuted); }
.ui .mt-profile { display: none; }
.ui .mt-nav { display: flex; flex-direction: column; gap: 1px; }
.ui .mt-group { color: var(--navMuted); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 18px 10px 6px; margin: 0; }
.ui .mt-link {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; margin: 0; padding: 0 10px;
  font-size: 13px; font-weight: 500; color: var(--navText); text-align: left; background: none; border: 0;
  border-radius: 4px; cursor: pointer; box-shadow: none; transition: background .12s, color .12s;
}
.ui .mt-link .ti { font-size: 17px; }
.ui .mt-link:hover { background: var(--navHover); color: #fff; }
.ui .mt-link.mt-active {
  background: var(--navHover); color: #fff; font-weight: 500; margin: 0; width: 100%; padding-left: 10px;
  border-radius: 4px; box-shadow: inset 2px 0 0 var(--pri);
}
.ui .mt-chev { margin-left: auto; font-size: 13px !important; color: var(--navMuted); transition: transform .15s; }
.ui .mt-rot { transform: rotate(90deg); }
.ui .mt-sub { margin: 2px 0 6px 18px; border-left: 1px solid var(--navLine); padding-left: 8px; }
.ui .mt-sub a { display: block; padding: 5px 10px; font-size: 13px; color: var(--navText); border-radius: 4px; }
.ui .mt-sub a:hover { color: #fff; background: var(--navHover); }
.ui .mt-sub a.mt-sub-active { color: #fff; font-weight: 500; background: var(--navHover); }
.ui .mt-foot { margin-top: auto; color: var(--navMuted); font-size: 11px; padding: 16px 10px 0; border-top: 1px solid var(--navLine); }

/* ---------- Topbar ---------- */
.ui .mt-topbar {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
.ui .mt-top-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ui .mt-icon-btn {
  position: relative; width: 32px; height: 32px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px; background: none; border: 0; cursor: pointer;
}
.ui .mt-icon-btn:hover { background: var(--soft); color: var(--text); }
.ui .mt-count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--alert); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--panel);
}
.ui .mt-burger { display: none; }
.ui .mt-user { position: relative; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.ui .mt-user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.ui .mt-user-btn .ti { color: var(--muted); font-size: 14px; }
.ui .mt-avatar, .ui .mt-avatar-sm {
  width: 28px; height: 28px; margin: 0; border-radius: 4px; border: 0; box-shadow: none;
  background: var(--soft); color: var(--text); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ui .mt-uname { font-size: 13px; }
.ui .mt-drop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 4px; z-index: 50;
}
.ui .mt-drop a, .ui .mt-drop button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; font-size: 13px; color: var(--text);
  border-radius: 4px; background: none; border: 0; text-align: left; cursor: pointer;
}
.ui .mt-drop a:hover, .ui .mt-drop button:hover { background: var(--soft); }
.ui .mt-overlay { position: fixed; inset: 0; background: rgba(10, 13, 17, .5); z-index: 35; }

/* ---------- Titulli i faqes (slot header) ---------- */
.ui .mt-header { margin: 0; padding: 18px 24px 2px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.ui .mt-header h1, .ui .mt-header h2 { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--text) !important; line-height: 1.3; }
.ui .mt-header p { color: var(--muted); }
.ui .mt-header form { display: inline-flex; margin: 0; }
.ui .mt-header :is(a, button):not(.mt-keep) {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px !important; min-height: 0 !important;
  padding: 0 12px !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
  text-decoration: none !important; white-space: nowrap; border: 1px solid var(--line) !important;
  background: var(--panel) !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important;
  color: var(--text) !important; transition: background .12s, border-color .12s;
}
.ui .mt-header :is(a, button):not(.mt-keep):hover { background: var(--head) !important; border-color: var(--fieldH) !important; }
.ui .mt-header :is(a, button):not(.mt-keep) i.ti { font-size: 15px; color: var(--muted) !important; }
.ui .mt-header .pn-pri { background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; }
.ui .mt-header .pn-pri:hover { background: var(--priH) !important; border-color: var(--priH) !important; }
.ui .mt-header .pn-pri i.ti { color: #fff !important; }
.ui .mt-header .pn-danger { color: var(--bad) !important; border-color: var(--badLn) !important; }
.ui .mt-header .pn-danger:hover { background: var(--badBg) !important; }
.ui .mt-header .pn-danger i.ti, .ui .mt-header i.ti.pn-red { color: var(--bad) !important; }
.ui .mt-header .pn-warn { color: var(--warn) !important; border-color: var(--warnLn) !important; }
.ui .mt-header .pn-warn:hover { background: var(--warnBg) !important; }
.ui .mt-header .pn-warn i.ti { color: var(--warn) !important; }

/* ---------- Përmbajtja ---------- */
.ui main > .py-8, .ui main > .py-6, .ui main > .py-12, .ui main > div > .py-8 { padding-top: 18px; padding-bottom: 28px; }
.ui main .max-w-6xl, .ui main .max-w-7xl { max-width: 1480px; }
.ui main .rounded-lg, .ui main .rounded-xl, .ui main .rounded-2xl { border-radius: 6px; }
.ui main .shadow-sm, .ui main .shadow { box-shadow: none; }
.ui footer { color: var(--muted) !important; border-color: var(--line) !important; font-size: 11px !important; }

/* Kartat */
.ui .card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; color: var(--text);
}
.ui .card:hover { box-shadow: none; }
.ui .mt-stat { background: var(--panel) !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: 6px; box-shadow: none !important; }
.ui .mt-num { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }

/* Titujt e seksioneve */
.ui .section-title {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text2) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  border-bottom: 1px solid var(--line2); padding-bottom: 8px; margin-bottom: 14px;
}

/* ---------- Kartat e numrave (x-stat) dhe dashboard-i ---------- */
.ui .dash-sec { margin-bottom: 22px; }
.ui .dash-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ui .dash-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.ui .dash-h span, .ui .dash-h > a { font-size: 12.5px; color: var(--muted); }
.ui .dash-h a { color: var(--link); }
.ui .dash-box-h { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ui .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ui .stat-grid-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ui .stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); text-decoration: none;
  transition: border-color .12s, background .12s;
}
.ui a.stat:hover { border-color: var(--fieldH); background: var(--hover); }
.ui .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui .stat-lbl { font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .stat-ico { font-size: 17px; color: var(--muted); }
.ui .stat-num { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.ui .stat-sub { font-size: 12px; color: var(--muted); }
.ui .stat-ok .stat-ico { color: var(--ok); }
.ui .stat-bad .stat-ico { color: var(--bad); }
.ui .stat-warn .stat-ico { color: var(--warn); }
.ui .stat-info .stat-ico { color: var(--info); }
.ui .stat-hot { box-shadow: inset 3px 0 0 var(--warn); }
.ui .stat-hot.stat-bad { box-shadow: inset 3px 0 0 var(--bad); }
.ui .stat-hot.stat-bad .stat-num { color: var(--bad); }
.ui .stat-hot.stat-warn .stat-num { color: var(--warn); }
.ui .stat-big .stat-num { font-size: 30px; }
.ui .stat-big .stat-lbl { font-size: 14px; color: var(--text); }
.ui .meter { display: block; height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.ui .meter > span { display: block; height: 100%; background: #16a34a; }
.ui .meter-stack { display: flex; height: 10px; }
.ui .m-ok { background: #16a34a !important; }
.ui .m-warn { background: #d97706 !important; }
.ui .m-bad { background: #dc2626 !important; }
.ui .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text2); }
.ui .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ui .olt-row { display: block; margin-bottom: 9px; text-decoration: none; }
.ui .olt-row:last-child { margin-bottom: 0; }
.ui .olt-row-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text2); margin-bottom: 4px; }
.ui .olt-row:hover .olt-row-t { color: var(--text); }

/* ---------- Fushat ---------- */
.ui .field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text2); margin-bottom: 5px; }
.ui .field-grid { gap: 14px 16px; }
.ui .field-grid-3 { gap: 14px 16px; }
.ui :is(.field-input,
  main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]):not([type=color]),
  main select,
  main textarea,
  .mt-header input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .mt-header select) {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--field);
  border-radius: 3px;
  background-color: var(--panel);
  color: var(--text);
  font-size: 13px;
  transition: box-shadow .12s;
}
.ui :is(.field-input, main input, main select, .mt-header input, .mt-header select):not(textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]) { min-height: 32px; }
.ui .field-input { padding: 0 10px; width: 100%; }
.ui textarea.field-input, .ui main textarea { padding: 8px 10px; line-height: 1.5; }
.ui :is(.field-input, main input, main select, main textarea, .mt-header input, .mt-header select):hover { box-shadow: inset 0 0 0 1px var(--fieldH); }
.ui :is(.field-input, main input, main select, main textarea, .mt-header input, .mt-header select):focus {
  outline: 0; border: 0; box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--ring);
}
.ui :is(.field-input, main input, main textarea)::placeholder { color: var(--muted); opacity: .7; }
.ui :is(select.field-input, main select, .mt-header select) {
  -webkit-appearance: none; appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%;
  background-size: 4px 4px; background-repeat: no-repeat;
}
.ui :is(.field-input, main input, main select, main textarea):disabled { background-color: var(--head); color: var(--muted); }
.ui :is(input[type=checkbox], input[type=radio], .checkbox-brand) { accent-color: var(--pri); }
.ui main input[type=checkbox], .ui main input[type=radio] { color: var(--pri); border-color: var(--fieldH); }
.ui main input[type=checkbox]:focus, .ui main input[type=radio]:focus { --tw-ring-color: var(--ring); }
.ui main input[type=file] { font-size: 12.5px; color: var(--muted); }
.ui main input[type=file]::file-selector-button {
  height: 28px; margin-right: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--text); font: 500 12.5px Inter, sans-serif; cursor: pointer;
}

/* ---------- Format me seksione (titulli majtas, fushat djathtas) ---------- */
.ui .form-sections > * + * { margin-top: 0; }
.ui .form-sections > div:has(> .section-title) {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--line2);
}
.ui .form-sections > div:has(> .section-title):first-of-type { border-top: 0; padding-top: 4px; }
.ui .form-sections > div:has(> .section-title) > .section-title {
  margin: 6px 0 0; padding: 0; border: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text) !important;
}
.ui .form-sections .form-block { padding: 20px 0; border-top: 1px solid var(--line2); }
.ui .form-sections .form-block .section-title { border: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text) !important; padding: 0; }
.ui .form-actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin: 8px -20px -20px; padding: 12px 20px;
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px;
}
.ui .opt-on { border-color: var(--pri) !important; background: var(--priSoft) !important; box-shadow: inset 0 0 0 1px var(--pri) !important; }
@media (max-width: 860px) {
  .ui .form-sections > div:has(> .section-title) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ui .form-actions { margin: 8px -12px -12px; padding: 10px 12px; }
}

/* ---------- Butonat ---------- */
.ui :is(.btn-brand, .btn-primary, .btn-secondary, .btn-outline, .mt-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 14px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1;
  text-shadow: none; box-shadow: none; background-image: none; filter: none; transition: background .12s, border-color .12s;
  white-space: nowrap; cursor: pointer;
}
.ui :is(.btn-brand, .btn-primary, .mt-btn) { background: var(--pri); border: 1px solid var(--pri); color: #fff; }
.ui :is(.btn-brand, .btn-primary, .mt-btn):hover { background: var(--priH); border-color: var(--priH); box-shadow: none; }
.ui :is(.btn-secondary, .btn-outline) { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.ui :is(.btn-secondary, .btn-outline):hover { background: var(--head); border-color: var(--fieldH); }
.ui :is(.btn-brand, .btn-primary, .btn-secondary, .btn-outline):active { transform: none; }
.ui :is(.btn-brand, .btn-primary, .btn-secondary, .btn-outline):disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Filtrat si çipa (statusi, periudha) ---------- */
.ui .chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--text2); background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; white-space: nowrap; transition: border-color .12s, background .12s;
}
.ui .chip:hover { border-color: var(--fieldH); color: var(--text); }
.ui .chip.on { background: var(--priSoft); color: var(--pri); border-color: var(--pri); }
.ui .case-row { background: var(--panel); }
.ui .case-row:hover { background: var(--hover); }
.ui main i.ti { vertical-align: -2px; }

/* ---------- Statuset ---------- */
.ui :is(.badge-active, .badge-inactive, .badge-danger, .badge-pending) {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; border: 1px solid;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-shadow: none; box-shadow: none; background-image: none;
}
.ui .badge-active { background: var(--okBg); color: var(--ok); border-color: var(--okLn); }
.ui .badge-danger { background: var(--badBg); color: var(--bad); border-color: var(--badLn); }
.ui .badge-pending { background: var(--warnBg); color: var(--warn); border-color: var(--warnLn); }
.ui .badge-inactive { background: var(--soft); color: var(--muted); border-color: var(--line); }

/* Etiketat e vogla (tag) */
.ui .tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--soft); color: var(--text2);
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.ui .tag .ti { font-size: 13px; }
.ui .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui .tag-ok { background: var(--okBg); color: var(--ok); border-color: var(--okLn); }
.ui .tag-bad { background: var(--badBg); color: var(--bad); border-color: var(--badLn); }
.ui .tag-warn { background: var(--warnBg); color: var(--warn); border-color: var(--warnLn); }
.ui .tag-info { background: var(--infoBg); color: var(--info); border-color: var(--infoLn); }
.ui :is(.btn-brand, .btn-primary, .btn-secondary, .btn-outline).btn-sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.ui .row-actions { display: table-cell; }
.ui .row-actions > :is(a, form, button) { margin-left: 4px; }
.ui main table tr.row-sel > td { background: var(--priSoft) !important; }
.ui main table tr.row-sel > td:first-child { box-shadow: inset 3px 0 0 var(--pri); }

.ui .cust-name { color: var(--link); font-weight: 600; text-decoration: none; }
.ui .cust-name:hover { text-decoration: underline; }

/* ---------- Tabelat ---------- */
.ui main table:not([data-noui]) { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui main table:not([data-noui]) > thead > tr > th,
.ui .table-header th {
  background: var(--head); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line2); white-space: nowrap; vertical-align: middle;
}
.ui .table-header { background: var(--head); color: var(--muted); }
.ui main table:not([data-noui]) > tbody > tr > td {
  padding: 8px 12px; height: 38px; border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); vertical-align: middle;
}
.ui main table:not([data-noui]) > :is(thead, tbody) > tr > :last-child { border-right: 0; }
.ui main table:not([data-noui]) > tbody > tr:last-child > td { border-bottom: 0; }
.ui main table:not([data-noui]) > tbody > tr:nth-child(even) > td { background: var(--zebra); }
.ui main table:not([data-noui]) > tbody > tr:hover > td { background: var(--hover); }
.ui .table-row { border-top: 0; }
.ui .table-row:hover { background: transparent; }
.ui main table th[data-sort-key], .ui main table th.ts-sortable { cursor: pointer; }
.ui main table th[data-sort-key]:hover { color: var(--text); }

/* Faqosja (paginate) */
.ui main nav[role=navigation] span[aria-current] > span,
.ui main nav[role=navigation] a { border-radius: 4px; }

/* ---------- Ngjyrat e Tailwind → variablat (light + dark) ---------- */
.ui .bg-white { background-color: var(--panel); }
.ui :is(.bg-slate-50, .bg-gray-50) { background-color: var(--head); }
.ui :is(.bg-slate-100, .bg-gray-100, .bg-slate-200, .bg-gray-200) { background-color: var(--soft); }
.ui :is(.hover\:bg-slate-50, .hover\:bg-gray-50, .hover\:bg-slate-100, .hover\:bg-gray-100):hover { background-color: var(--hover); }
.ui :is(.border-slate-100, .border-gray-100) { border-color: var(--line2); }
.ui :is(.border-slate-200, .border-gray-200, .border-slate-300, .border-gray-300) { border-color: var(--line); }
.ui :is(.divide-slate-100, .divide-gray-100, .divide-slate-200, .divide-gray-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--line2); }
.ui :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800, .text-black) { color: var(--text); }
.ui :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600) { color: var(--text2); }
.ui :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) { color: var(--muted); }

.ui :is(.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100) { background-color: var(--okBg); }
.ui :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900, .text-green-600, .text-green-700, .text-green-800, .text-green-900) { color: var(--ok); }
.ui :is(.border-emerald-100, .border-emerald-200, .border-emerald-300, .border-green-100, .border-green-200, .border-green-300) { border-color: var(--okLn); }
.ui :is(.bg-rose-50, .bg-rose-100, .bg-red-50, .bg-red-100) { background-color: var(--badBg); }
.ui :is(.text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-red-500, .text-red-600, .text-red-700, .text-red-800) { color: var(--bad); }
.ui :is(.border-rose-100, .border-rose-200, .border-rose-300, .border-red-100, .border-red-200, .border-red-300) { border-color: var(--badLn); }
.ui :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100, .bg-orange-50, .bg-orange-100) { background-color: var(--warnBg); }
.ui :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-700, .text-yellow-800, .text-orange-600, .text-orange-700, .text-orange-800) { color: var(--warn); }
.ui :is(.border-amber-100, .border-amber-200, .border-amber-300, .border-yellow-200, .border-orange-200) { border-color: var(--warnLn); }
.ui :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100, .bg-indigo-50, .bg-indigo-100) { background-color: var(--infoBg); }
.ui :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-sky-700, .text-indigo-600, .text-indigo-700) { color: var(--info); }
.ui :is(.border-blue-100, .border-blue-200, .border-sky-200, .border-indigo-200) { border-color: var(--infoLn); }
.ui :is(.hover\:text-blue-800, .hover\:text-slate-700, .hover\:text-slate-900):hover { color: var(--text); }

/* Alarmet e kuqe me sfond të plotë */
.ui div:is(.bg-rose-600, .bg-red-600) { background: var(--badBg) !important; color: var(--bad) !important; border: 1px solid var(--badLn) !important; }
.ui div:is(.bg-rose-600, .bg-red-600) :is(p, span, div, a, strong) { color: var(--bad) !important; }

/* ---------- Ngjyrat e shkruara direkt te faqet (style="...") ---------- */
.ui [style*="color:#E60000" i], .ui [style*="color: #E60000" i], .ui [style*="color:#C40000" i] { color: var(--link) !important; }
.ui [style*="accent-color:#E60000" i] { accent-color: var(--pri) !important; }
.ui [style*="border:1px solid #E60000" i], .ui [style*="border-color:#E60000" i], .ui [style*="border-color: #E60000" i] { border-color: var(--pri) !important; }
.ui [style*="background:#FDE8E8" i], .ui [style*="background-color:#FDE8E8" i], .ui [style*="background:#FEF2F2" i], .ui [style*="background-color:#FEF2F2" i], .ui [style*="background-color: #FEF2F2" i] { background: var(--priSoft) !important; }
.ui [style*="inset 3px 0 0 #E60000" i] { box-shadow: inset 3px 0 0 var(--pri) !important; }
.ui [style*="background:#E60000" i], .ui [style*="background: #E60000" i], .ui [style*="background-color:#E60000" i], .ui [style*="background-color: #E60000" i], .ui [style*="background-color:#C40000" i] {
  background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}

/* Vetëm në dark: sfonde/tekste të çelëta/errëta të shkruara direkt */
html.cd .ui [style*="background:#fff" i], html.cd .ui [style*="background: #fff" i], html.cd .ui [style*="background-color:#fff" i], html.cd .ui [style*="background-color: #fff" i], html.cd .ui [style*="background:white" i] { background: var(--panel) !important; }
html.cd .ui :is([style*="background:#f" i], [style*="background: #f" i], [style*="background-color:#f" i], [style*="background-color: #f" i], [style*="background:#e" i], [style*="background: #e" i], [style*="background-color:#e" i]):not([style*="background:#fff" i]):not([style*="background: #fff" i]):not([style*="background-color:#fff" i]) { background: var(--soft) !important; }
html.cd .ui :is([style*="color:#0"], [style*="color: #0"], [style*="color:#1"], [style*="color: #1"], [style*="color:#2"], [style*="color: #2"], [style*="color:#3"], [style*="color: #3"], [style*="color:#4"], [style*="color: #4"], [style*="color:black"]):not([style*="background"]) { color: var(--text) !important; }
html.cd .ui :is([style*="border:1px solid #e" i], [style*="border:1px solid #d" i], [style*="border:1px solid #c" i], [style*="border-color:#e" i], [style*="border-color:#d" i]) { border-color: var(--line) !important; }
html.cd .ui :is(h1, h2, h3, h4, label, strong, b, dt):not([class*="text-"]):not([style*="color"]) { color: var(--text); }
html.cd .ui .shadow-md, html.cd .ui .shadow-lg, html.cd .ui .shadow-xl { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html.cd .ui input::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ---------- Smart OLT / ONU / OLT (klasat so-, ou-, au-, uc-, mo-, sg-, op-) ---------- */
.ui :is(.so-box, .ou-box, .au-box, .uc-box, .mo-box, .sg-box, .so-card, .op-card) {
  background: var(--panel); background-image: none; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; color: var(--text);
}
.ui .op-card { border-top: 0; border-radius: 0 0 6px 6px; }
.ui .so-card:hover { border-color: var(--fieldH); }
.ui :is(.so-head, .ou-head, .au-head, .uc-head, .mo-head, .sg-head) {
  background: var(--head); background-image: none; color: var(--text); border-bottom: 1px solid var(--line);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
}
.ui :is(.so-head, .sg-head) h3 { font-size: 14px; color: var(--text); }
.ui :is(.so-head, .ou-head, .sg-head, .uc-head, .mo-head) :is(span, small) { color: var(--muted); }
.ui .ou-cfg-h { color: var(--link); }
.ui .ou-cfg-h:hover { color: var(--text); }

.ui :is(.ou-btn, .au-btn, .uc-btn, .mo-btn, .op-btn, .op-back) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 4px;
  font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--pri); background-image: none; color: #fff; border: 1px solid var(--pri); box-shadow: none; text-shadow: none;
}
.ui :is(.ou-btn, .au-btn, .uc-btn, .mo-btn, .op-btn, .op-back):hover { background: var(--priH); border-color: var(--priH); filter: none; }
.ui :is(.ou-btn, .au-btn, .uc-btn, .mo-btn).alt { background: var(--panel); color: var(--text); border-color: var(--line); }
.ui :is(.ou-btn, .au-btn, .uc-btn, .mo-btn).alt:hover { background: var(--head); border-color: var(--fieldH); }
.ui :is(.ou-btn.danger, .mo-btn.red, .op-btn.red) { background: #c42b35; border-color: #c42b35; color: #fff; }
.ui :is(.ou-btn.danger, .mo-btn.red, .op-btn.red):hover { background: #a8202c; border-color: #a8202c; }
.ui :is(.uc-btn.ok, .op-btn.green) { background: #12804a; border-color: #12804a; color: #fff; }
.ui .op-btn.sm, .ui .mo-btn.red { min-height: 26px; padding: 0 9px; font-size: 12px; }
.ui .op-link { color: var(--link); }

.ui .ou-tb { min-height: 28px; padding: 0 9px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 500; }
.ui .ou-tb:hover { background: var(--head); border-color: var(--fieldH); color: var(--text); }
.ui .ou-b { border-radius: 4px; font-weight: 500; box-shadow: none; text-shadow: none; }
.ui .ou-toolbar { background: var(--head); border: 1px solid var(--line); border-left: 3px solid var(--pri); border-radius: 4px; }

.ui .so-tabs {
  display: flex; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; width: auto; max-width: 100%;
  padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.ui .so-tabs::-webkit-scrollbar { display: none; }
.ui .so-tab {
  min-height: 40px; padding: 0; border-radius: 0; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap;
  background: none; text-shadow: none; box-shadow: inset 0 -2px 0 transparent;
}
.ui .so-tab .ti { font-size: 16px; }
.ui .so-tab:hover { background: none; color: var(--text); }
.ui .so-tab.on { background: none; color: var(--text); text-shadow: none; box-shadow: inset 0 -2px 0 var(--pri); }

.ui .op-tabs { border-bottom: 1px solid var(--line); }
.ui .op-tab { color: var(--muted); font-size: 13px; font-weight: 500; border-radius: 4px 4px 0 0; }
.ui .op-tab:hover { background: var(--soft); color: var(--text); }
.ui .op-tab.on { background: var(--panel); border-color: var(--line); color: var(--text); }

.ui .so-ico { border-radius: 6px; box-shadow: none; text-shadow: none; width: 40px; height: 40px; font-size: 20px; }
.ui .so-blue { background: var(--pri); }
.ui .so-green { background: #16a34a; }
.ui .so-gray { background: #64748b; }
.ui .so-amber { background: #d97706; }
.ui .so-red { background: #dc2626; }
.ui .so-num { color: var(--text); font-size: 30px; font-weight: 600; }
.ui :is(.so-lbl, .so-line, .so-upd, .so-fix small, .au-txt small, .ou-dl dt, .ou-head small) { color: var(--muted); }
.ui :is(.so-name, .au-txt b, .ou-dl dd, .so-fix b) { color: var(--text); }
.ui .so-foot { background: var(--head); background-image: none; border-top: 1px solid var(--line); color: var(--text2); }
.ui :is(.so-item, .so-fix) { border-color: var(--line2); }
.ui .so-bar { background: var(--soft); box-shadow: none; }
.ui .so-bar > div { background: #16a34a; }
.ui .so-pill { border-radius: 3px; text-shadow: none; }
.ui .sg-pill { min-height: 28px; padding: 0 10px; border-radius: 4px; font-weight: 500; color: var(--text2); background: var(--panel); border: 1px solid var(--line); text-shadow: none; }
.ui .sg-pill.on { background: var(--priSoft); color: var(--pri); border-color: var(--pri); text-shadow: none; }
.ui .ou-form label { color: var(--text2); font-weight: 500; }

.ui :is(.op-ok) { background: var(--okBg); border: 1px solid var(--okLn); color: var(--ok); }
.ui :is(.op-err, .ou-warn) { background: var(--badBg); border: 1px solid var(--badLn); color: var(--bad); }
.ui .op-warn { background: var(--warnBg); border: 1px solid var(--warnLn); color: var(--warn); }
.ui .mo-ok { color: var(--ok); }
.ui .sg-warn { color: var(--warn); }

@media (max-width: 767px) {
  .ui :is(.ou-actions, .ou-bar, .au-actions) { gap: 6px; }
  .ui :is(.ou-btn, .au-btn, .uc-btn, .mo-btn, .op-btn) { min-height: 38px; }
  .ui .so-tabs { gap: 16px; }
}

/* ---------- Flluska e chat-it ---------- */
.ui .sb-fab, .ui .sl-fab { background: var(--pri); box-shadow: 0 6px 18px rgba(15, 23, 42, .25); text-shadow: none; }
.ui .sb-head, .ui .sl-head { background: var(--nav); }
.ui .sb-send, .ui .sl-send { background: var(--pri); box-shadow: none; }
.ui .sl-new { border-color: var(--pri); }
.ui .sl-new svg { color: var(--pri); }

/* ---------- Faqja e hyrjes (layouts/guest) ---------- */
body.ui.guest { background: var(--panel); }
.ui .mt-login-left { background: var(--panel); box-shadow: inset -1px 0 0 var(--line); }
.ui .mt-login-right { background: var(--nav); }
.ui .mt-login-logo { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ui.guest .mt-logo-a { color: var(--text); }
.ui .mt-login-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ui .mt-login-slogan { position: absolute; left: 48px; bottom: 48px; }
.ui .mt-login-slogan .t1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.ui .mt-login-slogan .t2 { font-size: 14px; color: #aeb6c2; margin-top: 6px; }
.ui.guest .field-input { min-height: 38px; margin-top: 2px; }
.ui.guest .field-input:hover { box-shadow: inset 0 0 0 1px var(--fieldH); }
.ui.guest .field-input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--ring); }
.ui.guest .btn-brand { min-height: 38px; font-size: 14px; }
.ui.guest a { color: var(--link); }
.ui.guest :is(.text-red-600, .text-sm.text-red-600) { color: var(--bad); }

/* ---------- Telefoni ---------- */
.ui [x-data*="mobileNav"] > button:first-child,
.ui [x-data*="mobileNav"] > div:first-of-type { display: none !important; }
@media (max-width: 1023px) {
  .ui .mt-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  .ui .mt-sidebar.mt-open { transform: none; }
  .ui .mt-burger { display: inline-flex; }
}
@media (max-width: 767px) {
  .ui .mt-main { overflow-x: clip; }
  .ui main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .ui .mt-uname, .ui .mt-user-btn > span:not(.mt-avatar) { display: none; }
  .ui .mt-topbar { padding: 0 12px; }
  .ui .mt-header { padding: 14px 12px 0; }
  .ui .mt-header .flex { flex-wrap: wrap; row-gap: 8px; }
  .ui main { padding-left: 12px; padding-right: 12px; }
  .ui main .justify-between, .ui main .justify-end { flex-wrap: wrap; row-gap: 8px; }
  .ui main .grid-cols-2, .ui main .grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .ui main .max-w-7xl, .ui main .max-w-6xl { padding-left: 0; padding-right: 0; }
  .ui main :is(.btn-brand, .btn-secondary, .btn-outline) { min-height: 38px; }
  body.ui:has(textarea:focus, input:focus) :is(.sb-fab, .sl-fab) { display: none !important; }
}

/* ---------- Printimi: gjithmonë i bardhë, pa menu ---------- */
@media print {
  html.cd { color-scheme: light; --bg: #fff; --panel: #fff; --head: #f7f8fa; --zebra: #fff; --soft: #eef0f3; --line: #dfe2e7; --line2: #eceef1; --text: #14171c; --text2: #3b424d; --muted: #5f6773; --link: #1f4fbf; --field: #b9c0ca; }
  body.ui, .ui .mt-shell { background: #fff !important; color: #000 !important; }
  .ui .mt-sidebar, .ui .mt-topbar, .ui .sb, .ui .sl, .ui footer { display: none !important; }
  .ui * { box-shadow: none !important; }
}