/* ============================================================================
   MGIoT — Unified Premium Design System (STRUCTURAL redesign layer)
   ----------------------------------------------------------------------------
   Loads LAST. Unlike mgiot-theme-2026.css (which only re-skins colors), this
   layer rebuilds the LAYOUT + STRUCTURE of the shared mg-* components so every
   inner page matches the premium dashboard concept: equal-height stat cards
   with icon chips, grouped filter toolbars, modern rounded data tables,
   document/entity cards, consistent action button groups, and real
   empty / loading / error states. RTL-first + fully responsive.

   Visual + layout only. No JS, routes, APIs, permissions, data, or business
   logic touched. Web dashboard files only → APK rebuild NOT required.
   Scoped under .app-page .main so it never leaks into the login screen.
   ========================================================================== */

/* ── 0. Page rhythm ─────────────────────────────────────────────────────── */
.app-page .main .view{ padding-top:14px; }
.app-page .main .mg-page{
  display:flex; flex-direction:column; gap:16px;
  max-width:1320px; margin-inline:auto; width:100%;
}

/* ── 1. Page + section headers — clean accent strip, stacked title/subtitle ─
   Authoritative: resets any inherited pill/border/background so the heading
   is just [accent bar] + [title over subtitle], with actions on the far side. */
.app-page .main .mg-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:0;
}
.app-page .main .mg-pagehead{ padding:18px 22px; }
.app-page .main .mg-card-title-wrap{
  display:flex !important; flex-direction:row !important; align-items:center;
  gap:13px; min-width:0;
  border:0 !important; background:none !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
}
[dir="rtl"] .app-page .main .mg-card-title-wrap{ flex-direction:row !important; }
.app-page .main .mg-card-title-wrap > div,
.app-page .main .mg-head-text{
  display:flex; flex-direction:column; gap:3px; min-width:0;
  border:0 !important; background:none !important; padding:0 !important; box-shadow:none !important;
}
.app-page .main .mg-strip{
  width:4px !important; height:38px !important; min-height:38px;
  border-radius:999px !important; flex-shrink:0; align-self:center;
  background:var(--mg2-grad-brand) !important;
}
.app-page .main .mg-card-title{
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  font-size:20px !important; font-weight:900 !important; letter-spacing:-.3px;
  line-height:1.25; color:var(--mg2-text) !important;
}
.app-page .main .mg-card-subtitle{
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  font-size:13px !important; font-weight:600 !important; line-height:1.35;
  color:var(--mg2-muted) !important; white-space:normal;
}
.app-page .main .mg-head-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:640px){
  .app-page .main .mg-card-head{ flex-direction:column; align-items:stretch; gap:12px; }
  .app-page .main .mg-head-actions{ width:100%; }
}

/* ── 2. Stat / KPI cards — equal height, icon chip, big number ──────────── */
.app-page .main .mg-stat-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
}
.app-page .main .mg-stat{
  position:relative; overflow:hidden;
  min-height:104px; display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:18px 20px 18px 22px;
  background:var(--mg2-surface) !important;
  border:1px solid var(--mg2-border) !important;
  border-radius:20px !important;
  box-shadow:var(--mg2-shadow-sm) !important;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.app-page .main .mg-stat:hover{
  box-shadow:var(--mg2-shadow-md) !important;
  border-color:var(--mgo-primary-100) !important;
  transform:translateY(-2px);
}
.app-page .main .mg-stat::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:5px !important; background:var(--mg2-grad-brand) !important;
}
.app-page .main .mg-stat-value{
  font-size:30px; font-weight:900; line-height:1; unicode-bidi:plaintext;
  color:var(--mg2-blue) !important;
}
.app-page .main .mg-stat-label{
  font-size:13px; font-weight:700; color:var(--mg2-muted) !important;
}
.app-page .main .mg-stat-sub{ font-size:12px; font-weight:600; color:var(--mg2-faint) !important; }
/* Optional icon chip when a page provides one */
.app-page .main .mg-stat-ic{
  position:absolute; inset-inline-end:16px; top:16px;
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(0,109,255,.14),rgba(0,194,255,.20));
  color:#2E8BFF;
}
.app-page .main .mg-stat-ic svg{ width:21px; height:21px; }
.app-page .main .mg-stat--success::before{ background:linear-gradient(180deg,#12B981,#0F9D6B) !important; }
.app-page .main .mg-stat--success .mg-stat-value{ color:#0F9D6B !important; }
.app-page .main .mg-stat--success .mg-stat-ic{ background:linear-gradient(135deg,rgba(15,157,107,.16),rgba(18,185,129,.24)); color:#12A878; }
.app-page .main .mg-stat--warn::before{ background:linear-gradient(180deg,#F6A609,#E08A0B) !important; }
.app-page .main .mg-stat--warn .mg-stat-value{ color:#C9780A !important; }
.app-page .main .mg-stat--warn .mg-stat-ic{ background:linear-gradient(135deg,rgba(224,138,11,.16),rgba(246,166,9,.24)); color:#E0900F; }
.app-page .main .mg-stat--danger::before{ background:linear-gradient(180deg,#F4566F,#E23D5A) !important; }
.app-page .main .mg-stat--danger .mg-stat-value{ color:#D43A55 !important; }
.app-page .main .mg-stat--danger .mg-stat-ic{ background:linear-gradient(135deg,rgba(226,61,90,.14),rgba(244,86,111,.22)); color:#E23D5A; }
.app-page .main .mg-stat--info::before{ background:var(--mg2-grad-brand) !important; }

/* ── 3. Cards / panels — rounded, soft, hover lift ──────────────────────── */
.app-page .main .mg-card{
  background:var(--mg2-surface) !important;
  border:1px solid var(--mg2-border) !important;
  border-radius:20px !important;
  box-shadow:var(--mg2-shadow-sm) !important;
  padding:20px;
}
.app-page .main .mg-card + .mg-card{ margin-top:0; }

/* ── 4. Filter toolbar — grouped, search grows, mobile stacks ───────────── */
.app-page .main .mg-toolbar,
.app-page .main .inst-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:14px;
}
.app-page .main .mg-toolbar .mg-search,
.app-page .main .inst-toolbar .mg-search{ flex:1 1 280px; min-width:220px; }
.app-page .main .mg-search{
  position:relative; display:flex; align-items:center;
  background:var(--mg2-input-bg); border:1px solid var(--mg2-border);
  border-radius:12px; padding:0 12px; height:44px; gap:8px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.app-page .main .mg-search:focus-within{ border-color:var(--mg2-electric); box-shadow:var(--mg2-ring); }
.app-page .main .mg-search-icon{ color:var(--mg2-faint); font-size:16px; flex-shrink:0; }
.app-page .main .mg-search-input{
  border:0 !important; outline:0; background:transparent !important;
  height:100%; width:100%; font-size:14px; color:var(--mg2-text); box-shadow:none !important;
}
.app-page .main .mg-select{
  height:44px; padding:0 36px 0 14px; border-radius:12px !important;
  border:1px solid var(--mg2-border) !important; background:var(--mg2-input-bg) !important;
  color:var(--mg2-text); font-size:14px; font-weight:700; cursor:pointer; min-width:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center;
}
[dir="ltr"] .app-page .main .mg-select{ padding:0 14px 0 36px; background-position:right 12px center; }
.app-page .main .mg-toolbar-spacer{ flex:1 1 auto; }

/* ── 5. Buttons — unified sizing, variants, wrapping action groups ──────── */
.app-page .main .mg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:42px; padding:0 16px; border-radius:12px !important;
  border:1px solid var(--mg2-border); background:var(--mg2-surface);
  color:var(--mg2-text); font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.app-page .main .mg-btn:hover{ background:var(--mgo-primary-soft); border-color:var(--mgo-primary-100); box-shadow:var(--mg2-shadow-sm); }
.app-page .main .mg-btn:active{ transform:translateY(1px); }
.app-page .main .mg-btn--primary{
  background:var(--mg2-grad-brand) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 10px 22px rgba(0,109,255,.24) !important;
}
.app-page .main .mg-btn--primary:hover{ filter:brightness(1.05); }
.app-page .main .mg-btn--success{ background:#E7F8F0; color:#0B7A52; border-color:#AEE9CE; }
.app-page .main .mg-btn--danger,
.app-page .main .inst-btn--delete{ background:#FDECEF !important; color:#B92742 !important; border-color:#F6C4CE !important; }
.app-page .main .mg-btn--ghost-brand{ background:var(--mgo-primary-soft); color:var(--mg2-blue); border-color:var(--mgo-primary-100); }
.app-page .main .mg-btn-group,
.app-page .main .inst-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* ── 6. Modern data tables — rounded shell, premium header, zebra, hover ── */
.app-page .main .mg-table-wrap,
.app-page .main .table-wrap{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--mg2-border) !important; border-radius:16px !important;
  box-shadow:var(--mg2-shadow-sm); background:var(--mg2-surface); margin-top:14px;
}
.app-page .main .mg-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:680px; }
.app-page .main .mg-table thead th,
.app-page .main table:not(.bare) thead th{
  position:sticky; top:0; z-index:1;
  background:var(--mg2-th-bg) !important; color:var(--mg2-th-text) !important;
  font-weight:800 !important; font-size:12px; text-align:inherit;
  padding:13px 16px; white-space:nowrap; border-bottom:1px solid var(--mg2-border) !important;
}
.app-page .main .mg-table tbody td,
.app-page .main table:not(.bare) tbody td{
  padding:13px 16px; color:#2A3C5A !important; border-bottom:1px solid var(--mg2-row-border) !important;
  vertical-align:middle;
}
.app-page .main .mg-table tbody tr:nth-child(even) td{ background:rgba(244,248,252,.45); }
.app-page .main .mg-table tbody tr:hover td{ background:var(--mg2-row-hover) !important; }
.app-page .main .mg-table tbody tr:last-child td{ border-bottom:0; }

/* ── 7. Status badges — consistent pills (text + color, a11y) ───────────── */
.app-page .main .mg-badge,
.app-page .main .status-badge,
.app-page .main .badge{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:999px !important; font-weight:800 !important; font-size:12px;
  padding:4px 11px !important; border:1px solid transparent; white-space:nowrap;
}
.app-page .main .mg-badge--success,.app-page .main .badge.success{ background:#E7F8F0 !important; color:#0B7A52 !important; border-color:#AEE9CE !important; }
.app-page .main .mg-badge--warn,.app-page .main .badge.warning{ background:#FFF6E6 !important; color:#A8650A !important; border-color:#FBE0A6 !important; }
.app-page .main .mg-badge--danger,.app-page .main .badge.danger{ background:#FDECEF !important; color:#B92742 !important; border-color:#F6C4CE !important; }
.app-page .main .mg-badge--info,.app-page .main .badge.info{ background:var(--mg2-cyan-soft) !important; color:#066A8C !important; border-color:#B7EAFA !important; }
.app-page .main .mg-badge--neutral{ background:#EEF2F8 !important; color:#5A6B85 !important; border-color:#DCE5F1 !important; }

/* ── 8. Entity / document / record card grids ───────────────────────────── */
.app-page .main .inst-grid,
.app-page .main .mg-card-grid{
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.app-page .main .inst-card,
.app-page .main .mg-data-card{
  background:var(--mg2-surface); border:1px solid var(--mg2-border);
  border-radius:18px; padding:16px 18px; box-shadow:var(--mg2-shadow-sm);
  display:flex; flex-direction:column; gap:12px; cursor:pointer; min-width:0;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.app-page .main .inst-card:hover,
.app-page .main .mg-data-card:hover{
  box-shadow:var(--mg2-shadow-md); border-color:var(--mgo-primary-100); transform:translateY(-2px);
}
.app-page .main .inst-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.app-page .main .inst-customer{
  font-size:15px; font-weight:900; color:var(--mg2-text);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.app-page .main .inst-subline{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; font-size:12px; color:var(--mg2-faint); }
.app-page .main .inst-dot{ opacity:.5; }
.app-page .main .inst-detail-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px 14px;
  padding:12px; background:var(--mg2-surface-2); border-radius:12px;
}
.app-page .main .inst-detail{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.app-page .main .inst-detail-label{ font-size:11px; font-weight:700; color:var(--mg2-faint); }
.app-page .main .inst-detail-val{ font-size:13px; font-weight:700; color:var(--mg2-text); overflow:hidden; text-overflow:ellipsis; }
.app-page .main .inst-actions{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; border-top:1px solid var(--mg2-row-border); margin-top:2px; }
.app-page .main .inst-actions:empty{ display:none; }
.app-page .main .inst-btn{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px;
  border-radius:11px !important; border:1px solid var(--mg2-border); background:var(--mg2-surface);
  color:var(--mg2-text); font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap;
}
.app-page .main .inst-btn--success{ background:#E7F8F0; color:#0B7A52; border-color:#AEE9CE; }
.app-page .main .inst-btn--danger{ background:#FDECEF; color:#B92742; border-color:#F6C4CE; }

/* ── 9. States — empty / loading / error ────────────────────────────────── */
.app-page .main .mg-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:48px 24px; color:var(--mg2-muted);
}
.app-page .main .mg-empty-icon{
  width:66px; height:66px; border-radius:20px; display:grid; place-items:center; font-size:30px;
  background:linear-gradient(135deg,rgba(0,109,255,.10),rgba(0,194,255,.14)); color:#2E8BFF; margin-bottom:4px;
}
.app-page .main .mg-empty-title{ font-size:16px; font-weight:900; color:var(--mg2-text); }
.app-page .main .mg-empty-text{ font-size:13px; color:var(--mg2-faint); max-width:420px; }
.app-page .main .mg-loading{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:44px 24px; color:var(--mg2-muted); font-weight:700; font-size:14px;
}
.app-page .main .mg-loading::before{
  content:""; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--mgo-primary-100); border-top-color:var(--mg2-electric);
  animation:mg-spin .7s linear infinite;
}
@keyframes mg-spin{ to{ transform:rotate(360deg); } }
.app-page .main .mg-error{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:34px 24px; color:#B92742; font-weight:800; font-size:14px;
  background:#FDECEF; border:1px solid #F6C4CE; border-radius:14px; margin-top:8px;
}
.app-page .main .mg-skeleton-row{
  height:64px; border-radius:14px; margin-bottom:10px;
  background:linear-gradient(90deg,#EEF3FA 25%,#F6F9FD 37%,#EEF3FA 63%);
  background-size:400% 100%; animation:mg-shimmer 1.4s ease infinite;
}
@keyframes mg-shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ── 10. Modals / form panels ───────────────────────────────────────────── */
.app-page .main .mg-form-panel,
.modal-card{
  background:var(--mg2-surface) !important; border:1px solid var(--mg2-border);
  border-radius:24px !important; box-shadow:var(--mg2-shadow-lg) !important;
}
.modal-bg.show{ background:rgba(6,27,58,.5) !important; backdrop-filter:blur(8px); }
.app-page .main .mg-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

/* ── 11. Result-count + small meta ──────────────────────────────────────── */
.app-page .main .mg-result-count{ font-size:12.5px; font-weight:700; color:var(--mg2-faint); }

/* ── 12. Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .app-page .main .mg-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .app-page .main .inst-grid,
  .app-page .main .mg-card-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
}
@media (max-width:640px){
  .app-page .main .mg-page{ gap:12px; }
  .app-page .main .mg-card{ padding:15px; border-radius:16px !important; }
  .app-page .main .mg-stat-grid{ grid-template-columns:1fr !important; }
  .app-page .main .mg-stat{ min-height:88px; }
  .app-page .main .mg-stat-value{ font-size:26px; }
  .app-page .main .mg-toolbar > *,
  .app-page .main .inst-toolbar > *{ width:100%; min-width:0; }
  .app-page .main .mg-card-head{ align-items:flex-start; }
  .app-page .main .inst-grid,
  .app-page .main .mg-card-grid{ grid-template-columns:1fr; }
  .app-page .main .mg-card-title{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  .app-page .main .mg-stat,
  .app-page .main .inst-card,
  .app-page .main .mg-data-card,
  .app-page .main .mg-btn{ transition:none !important; }
  .app-page .main .mg-loading::before,
  .app-page .main .mg-skeleton-row{ animation:none !important; }
}

/* ── Sidebar label legibility fix (2026-06-10) ───────────────────────────────
   The active layout renders the sidebar on a light/white surface, but the
   inherited nav-label colour was pale (theme-2026 #C6D4EA) so page names were
   nearly invisible. Force resting labels to a dark, high-contrast ink. The
   selected item keeps its white-on-blue text via its higher-specificity
   .active rule (re-asserted below for safety), and open section headers keep
   their existing dark-blue ink. Last-loaded layer + !important = authoritative. */
.sidebar .nav-item,
.sidebar .nav-top-item,
.sidebar .nav-section-hdr{
  color:#0f1f3a !important;
}
.sidebar .nav-item.active,
.sidebar .nav-top-item.active,
.sidebar .nav-item.active .nav-text,
.sidebar .nav-item.active > span:not(.nav-item-icon):not(.sidebar-badge),
.sidebar .nav-top-item.active > span:not(.section-icon){
  color:#ffffff !important;
}

/* ── Sidebar HOVER / FOCUS legibility fix (2026-06-14) ───────────────────────
   The sidebar sits on a WHITE surface (.app-page.active>.sidebar => #fff wins on
   specificity), but an inherited theme-2026 rule set the hover/focus label to
   pure white (`.sidebar .nav-item:hover{color:#FFFFFF}`), making page names
   disappear on hover. Re-assert a dark, high-contrast brand colour on a soft
   light-blue hover tint so labels stay readable in BOTH RTL and LTR (colours are
   direction-agnostic; the existing translateX nudge in mgiot-polish.css keeps
   its per-direction behaviour). Selected (.active) rows keep white-on-blue.
   Last-loaded layer + !important = authoritative. */
.sidebar .nav-item:hover,
.sidebar .nav-top-item:hover,
.sidebar .nav-section-hdr:hover,
.sidebar .nav-item:focus,
.sidebar .nav-item:focus-visible,
.sidebar .nav-top-item:focus,
.sidebar .nav-top-item:focus-visible,
.sidebar .nav-section-hdr:focus,
.sidebar .nav-section-hdr:focus-visible{
  background:rgba(10,88,202,.10) !important;
  color:#0A58CA !important;
}
/* keep nested label spans in step with the row colour on hover/focus */
.sidebar .nav-item:hover .nav-text,
.sidebar .nav-item:hover > span:not(.nav-item-icon):not(.sidebar-badge),
.sidebar .nav-top-item:hover > span:not(.section-icon),
.sidebar .nav-section-hdr:hover > span:not(.section-icon):not(.section-arrow),
.sidebar .nav-item:focus-visible .nav-text{
  color:#0A58CA !important;
}
/* hovered icon chip stays visible (not washed-out white) */
.sidebar .nav-item:hover .nav-item-icon,
.sidebar .nav-top-item:hover .section-icon,
.sidebar .nav-section-hdr:hover .section-icon{
  background:rgba(10,88,202,.14) !important;
  color:#0A58CA !important;
}
/* keyboard focus ring for accessibility */
.sidebar .nav-item:focus-visible,
.sidebar .nav-top-item:focus-visible,
.sidebar .nav-section-hdr:focus-visible{
  outline:2px solid rgba(10,88,202,.45) !important;
  outline-offset:2px !important;
}
/* the SELECTED item keeps white-on-blue even while hovered / focused */
.sidebar .nav-item.active:hover,
.sidebar .nav-top-item.active:hover,
.sidebar .nav-item.active:focus,
.sidebar .nav-item.active:focus-visible,
.sidebar .nav-top-item.active:focus,
.sidebar .nav-top-item.active:focus-visible{
  background:var(--mg2-grad-brand) !important;
}
.sidebar .nav-item.active:hover,
.sidebar .nav-item.active:hover .nav-text,
.sidebar .nav-item.active:hover > span:not(.nav-item-icon):not(.sidebar-badge),
.sidebar .nav-top-item.active:hover,
.sidebar .nav-top-item.active:hover > span:not(.section-icon),
.sidebar .nav-item.active:focus-visible,
.sidebar .nav-item.active:focus-visible .nav-text{
  color:#ffffff !important;
}
.sidebar .nav-item.active:hover .nav-item-icon,
.sidebar .nav-top-item.active:hover .section-icon{
  background:rgba(255,255,255,.22) !important;
  color:#ffffff !important;
}