/* ============================================================================
   MGIoT Dashboard — Design Parity Patch
   Keeps existing color tokens and applies the screenshot layout system:
   white cards, rounded sections, RTL right sidebar, consistent tables/buttons.
   ============================================================================ */
:root{--sidebar-width:260px;--page-gap:22px;--card-radius:22px;--soft-shadow:0 14px 36px rgba(15,23,42,.06);--line:var(--border,#e7ebf0);--brand-main:var(--primary,var(--mg-brand,#0B4A93));--brand-accent:var(--orange,#F59E0B);--brand-success:var(--green,var(--mg-success-strip,#10B981));}
html{direction:rtl;min-height:100%;background:var(--bg,#fff)}
html[dir="rtl"] body{direction:rtl;text-align:right;overflow-x:hidden;background:var(--bg,#fff);}
body.mgiot-guest{background:var(--bg-soft,#f7f9fc)}
.app-page.active{display:block!important;min-height:100vh;background:var(--bg,#fff);}
.app-page.active>.sidebar{position:fixed!important;top:0!important;right:0!important;left:auto!important;width:var(--sidebar-width)!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--surface,#fff)!important;border-left:1px solid var(--line)!important;border-right:0!important;z-index:40!important;box-shadow:none!important;transform:none!important;}
.app-page.active>.main{width:calc(100% - var(--sidebar-width))!important;margin-right:var(--sidebar-width)!important;margin-left:0!important;min-height:100vh!important;padding:28px 32px!important;overflow-x:hidden!important;background:var(--bg,#fff)!important;}
.sidebar-backdrop{display:none;}
.sidebar-header{padding:28px 18px 22px!important;text-align:center!important;border-bottom:1px solid var(--line)!important;}
.sidebar-logo-box{width:78px!important;height:78px!important;border-radius:24px!important;margin:0 auto 10px!important;background:var(--surface,#fff)!important;box-shadow:var(--soft-shadow)!important;display:grid!important;place-items:center!important;}
.sidebar-logo-box img{max-width:62px!important;max-height:62px!important;object-fit:contain!important;}
.sidebar-header h2{margin:0!important;font-size:18px!important;font-weight:900!important;color:var(--brand-accent)!important;letter-spacing:.02em!important;}
.sidebar-header p{margin:6px 0 0!important;color:var(--text-soft,#475569)!important;font-weight:800!important;}
.sidebar-nav{padding:14px 14px 92px!important;}
.nav-section{margin-bottom:8px!important;}
.nav-section-hdr,.nav-item{height:54px!important;border-radius:16px!important;padding:0 14px!important;display:flex!important;align-items:center!important;gap:12px!important;color:var(--text-soft,#475569)!important;font-weight:800!important;cursor:pointer!important;transition:background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease!important;}
.nav-section-hdr{justify-content:flex-start!important;}
.nav-item:hover,.nav-section-hdr:hover{background:var(--hover,#f2f5fa)!important;color:var(--text,#0f172a)!important;text-decoration:none!important;}
.nav-item.active{background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(245,158,11,.08))!important;color:var(--brand-accent)!important;border-right:4px solid var(--brand-success)!important;box-shadow:0 12px 30px rgba(15,23,42,.05)!important;}
.nav-item .icon,.nav-section .icon{width:34px!important;height:34px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:var(--gray-soft,#f1f5f9)!important;flex:0 0 auto!important;}
.nav-item.active .icon{background:rgba(245,158,11,.18)!important;}
.nav-text,.section-label{flex:1!important;text-align:right!important;}
.section-arrow{font-size:11px!important;color:var(--text-muted,#94a3b8)!important;}
.nav-section.collapsed .nav-section-body{display:none!important;}
.sidebar-footer{position:sticky!important;bottom:0!important;background:linear-gradient(to top,var(--surface,#fff) 75%,rgba(255,255,255,.88))!important;padding:12px 14px 18px!important;border-top:1px solid rgba(231,235,240,.7)!important;}
.footer-brand{display:flex!important;align-items:center!important;gap:10px!important;}
.footer-logo{width:42px!important;height:42px!important;border-radius:14px!important;object-fit:contain!important;background:#fff!important;box-shadow:var(--shadow-md,0 4px 12px rgba(15,23,42,.06))!important;padding:6px!important;}
.footer-meta{flex:1!important;color:var(--text-muted,#94a3b8)!important;font-size:11px!important;}
.footer-logout{width:38px!important;height:38px!important;border-radius:12px!important;border:1px solid var(--red-border,#fca5a5)!important;background:var(--red-soft,#fef2f2)!important;color:var(--red,#ef4444)!important;display:grid!important;place-items:center!important;}
.main-header{min-height:106px!important;background:var(--surface,#fff)!important;border:1px solid transparent!important;border-radius:0 0 28px 28px!important;box-shadow:var(--soft-shadow)!important;padding:22px 32px!important;margin:0 0 26px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;}
.main-header h1,#viewTitle{font-size:34px!important;line-height:1.2!important;margin:0!important;color:var(--text,#0f172a)!important;font-weight:900!important;}
.main-header p,#viewDesc{margin:7px 0 0!important;color:var(--text-soft,#475569)!important;font-weight:700!important;}
.sidebar-toggle{display:none!important;width:44px!important;height:44px!important;border-radius:14px!important;border:1px solid var(--line)!important;background:var(--surface,#fff)!important;color:var(--text,#0f172a)!important;}
.view{display:none!important;}
.view.active{display:block!important;animation:mgFadeIn .16s ease both;}
@keyframes mgFadeIn{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
.mg-page,.view.active>div:not(.mg-page){display:flex!important;flex-direction:column!important;gap:var(--page-gap)!important;}
.card,.panel,.section,.data-card,.form-card,.mg-card{background:var(--surface,#fff)!important;border:1px solid var(--line)!important;border-radius:var(--card-radius)!important;box-shadow:var(--soft-shadow)!important;padding:22px 24px!important;overflow:hidden!important;}
.mg-card-head,.card-head,.section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-bottom:18px!important;}
.mg-card-title,.card-title,.section-title{font-size:18px!important;font-weight:900!important;color:var(--text,#0f172a)!important;}
.mg-strip{background:var(--brand-accent)!important;width:4px!important;height:22px!important;border-radius:999px!important;}
.mg-stat-grid,.stats-grid,.summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
.stat-card,.mg-stat,.summary-card{background:var(--surface,#fff)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:var(--soft-shadow)!important;min-height:92px!important;padding:18px 20px!important;position:relative!important;overflow:hidden!important;}
.stat-card:before,.summary-card:before{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background:var(--brand-accent);}
input,select,textarea,.mg-input,.mg-select,.mg-search-input{border:1px solid var(--line)!important;background:var(--surface,#fff)!important;border-radius:14px!important;min-height:46px!important;padding:10px 14px!important;color:var(--text,#0f172a)!important;font-family:inherit!important;font-weight:700!important;outline:none!important;box-shadow:none!important;}
input:focus,select:focus,textarea:focus,.mg-search-input:focus{border-color:var(--brand-accent)!important;box-shadow:0 0 0 4px rgba(245,158,11,.13)!important;background:#fff!important;}
input::placeholder,textarea::placeholder{color:var(--text-muted,#94a3b8)!important;font-weight:600!important;}
button,.btn,.mg-btn{border-radius:14px!important;min-height:42px!important;border:1px solid var(--line)!important;font-family:inherit!important;font-weight:900!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important;}
button:hover,.btn:hover,.mg-btn:hover{transform:translateY(-1px)!important;text-decoration:none!important;}
.btn-primary,.mg-btn--primary,.btn-warning{background:linear-gradient(135deg,var(--brand-accent),#fbbf24)!important;border-color:transparent!important;color:#111827!important;box-shadow:0 12px 24px rgba(245,158,11,.18)!important;}
.btn-success,.mg-btn--success{background:var(--brand-success)!important;border-color:var(--brand-success)!important;color:#fff!important;}
.btn-danger,.mg-btn--danger{background:var(--red,#ef4444)!important;border-color:var(--red,#ef4444)!important;color:#fff!important;}
.btn-secondary,.mg-btn:not(.mg-btn--primary):not(.mg-btn--success):not(.mg-btn--danger){background:var(--surface,#fff)!important;color:var(--text-soft,#475569)!important;}
.mg-toolbar,.toolbar,.filter-bar{background:var(--surface,#fff)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:var(--soft-shadow)!important;padding:14px!important;display:grid!important;gap:12px!important;align-items:center!important;}
.mg-table-wrap,.table-wrap{width:100%!important;overflow:auto!important;border:1px solid var(--line)!important;border-radius:18px!important;background:#fff!important;}
table,.mg-table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;}
th,td,.mg-table th,.mg-table td{padding:15px 16px!important;border-bottom:1px solid var(--border,#e7ebf0)!important;text-align:right!important;vertical-align:middle!important;white-space:nowrap!important;}
th,.mg-table th{background:var(--surface-alt,#f7f9fc)!important;color:var(--text-soft,#475569)!important;font-size:12px!important;font-weight:900!important;}
td,.mg-table td{font-size:14px!important;color:var(--text,#0f172a)!important;font-weight:650!important;}
tbody tr:hover{background:var(--hover,#f2f5fa)!important;}
.mg-badge,.badge,.status-badge{border-radius:999px!important;padding:7px 12px!important;font-weight:900!important;font-size:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.modal-bg,.mg-modal-overlay{position:fixed!important;inset:0!important;background:rgba(15,23,42,.48)!important;backdrop-filter:blur(6px)!important;z-index:120!important;align-items:center!important;justify-content:center!important;padding:20px!important;}
.modal-bg.show{display:flex!important;}
.modal-card,.mg-modal{width:min(680px,calc(100vw - 32px))!important;max-height:calc(100vh - 38px)!important;overflow:auto!important;background:var(--surface,#fff)!important;border:1px solid var(--line)!important;border-radius:26px!important;box-shadow:0 28px 80px rgba(15,23,42,.22)!important;}
.modal-hd,.mg-modal-head{height:auto!important;min-height:68px!important;padding:18px 22px!important;border-bottom:1px solid var(--line)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
.modal-hd h3,.mg-modal-title{font-size:18px!important;font-weight:900!important;color:var(--text,#0f172a)!important;margin:0!important;}
.modal-body,.mg-modal-body{padding:20px 22px!important;}
.modal-x,.mg-modal-x{width:38px!important;height:38px!important;border-radius:14px!important;background:transparent!important;border:0!important;color:var(--text-muted,#94a3b8)!important;font-size:22px!important;}
.form-row,.form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-bottom:12px!important;}
.form-row>*{min-width:0!important;}
.readonly-field{background:var(--surface-alt,#f7f9fc)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:12px 14px!important;font-weight:800!important;}
.mg-empty,.empty-state{padding:38px 20px!important;text-align:center!important;color:var(--text-muted,#94a3b8)!important;background:var(--surface,#fff)!important;border:1px dashed var(--line)!important;border-radius:20px!important;}
.mg-loading,.mg-error{padding:22px!important;border-radius:18px!important;background:var(--surface-alt,#f7f9fc)!important;border:1px solid var(--line)!important;font-weight:800!important;text-align:center!important;}
.mg-error{color:var(--red,#ef4444)!important;background:var(--red-soft,#fef2f2)!important;border-color:var(--red-border,#fca5a5)!important;}
.action-btn,.icon-btn{width:42px!important;height:42px!important;border-radius:14px!important;padding:0!important;}
@media(max-width:1200px){.mg-stat-grid,.stats-grid,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.app-page.active>.main{padding:22px!important}.main-header h1,#viewTitle{font-size:28px!important}}
@media(max-width:768px){.app-page.active>.sidebar{z-index:130!important;transform:translateX(105%)!important;transition:transform .24s ease!important;box-shadow:0 24px 70px rgba(15,23,42,.22)!important}.app-page.active>.main{width:100%!important;margin-right:0!important;padding:14px!important}.sidebar-toggle{display:inline-grid!important;place-items:center!important}body.sidebar-open .app-page.active>.sidebar{transform:translateX(0)!important}body.sidebar-open .sidebar-backdrop{display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.42)!important;z-index:120!important;backdrop-filter:blur(3px)!important}.main-header{border-radius:22px!important;padding:18px!important;min-height:auto!important}.main-header h1,#viewTitle{font-size:24px!important}.mg-stat-grid,.stats-grid,.summary-grid{grid-template-columns:1fr!important}.form-row,.form-grid{grid-template-columns:1fr!important}.mg-card-head,.card-head,.section-head{align-items:flex-start!important;flex-direction:column-reverse!important}.mg-toolbar,.toolbar,.filter-bar{grid-template-columns:1fr!important}th,td,.mg-table th,.mg-table td{padding:12px 10px!important;font-size:12px!important}.modal-bg,.mg-modal-overlay{padding:12px!important}.modal-card,.mg-modal{width:100%!important;border-radius:22px!important}}
@media(print){.sidebar,.sidebar-backdrop,.main-header,.no-print{display:none!important}.app-page.active>.main{margin:0!important;width:100%!important;padding:0!important}.card,.mg-card{box-shadow:none!important}}