/* MGIoT Professional UI/UX System
   Visual polish only: keeps MGIoT brand, routes, APIs, and business logic unchanged.
   Loaded last to normalize the dashboard with a cleaner enterprise layout. */

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

:root{
  --mgo-primary:#0B5CA8;
  --mgo-primary-dark:#083D70;
  --mgo-primary-soft:#EAF4FF;
  --mgo-primary-100:#D9EBFB;
  --mgo-primary-200:#B9D9F3;
  --mgo-accent:#16A3B8;
  --mgo-accent-soft:#E8FAFC;
  --mgo-bg:#F5F7FB;
  --mgo-surface:#FFFFFF;
  --mgo-surface-2:#F8FAFC;
  --mgo-border:#E2E8F0;
  --mgo-border-2:#CBD5E1;
  --mgo-text:#0F172A;
  --mgo-muted:#64748B;
  --mgo-soft:#94A3B8;
  --mgo-success:#059669;
  --mgo-warning:#D97706;
  --mgo-danger:#DC2626;
  --mgo-radius-sm:10px;
  --mgo-radius:14px;
  --mgo-radius-lg:20px;
  --mgo-radius-xl:26px;
  --mgo-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --mgo-shadow:0 10px 28px rgba(15,23,42,.08);
  --mgo-shadow-lg:0 22px 60px rgba(15,23,42,.14);
  --mgo-sidebar:286px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif!important;
  color:var(--mgo-text)!important;
  background:
    radial-gradient(900px 480px at 100% -180px, rgba(11,92,168,.10), transparent 65%),
    radial-gradient(800px 460px at 0% 100px, rgba(22,163,184,.07), transparent 62%),
    var(--mgo-bg)!important;
  -webkit-font-smoothing:antialiased;
}

/* Login */
.login-page.active{
  display:flex!important;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(22,163,184,.20), transparent 58%),
    radial-gradient(1000px 600px at 100% 100%, rgba(11,92,168,.24), transparent 62%),
    linear-gradient(135deg,#082F57 0%, #0B5CA8 52%, #05345F 100%)!important;
}
.login-card{
  width:min(420px,calc(100vw - 32px))!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:28px!important;
  box-shadow:0 32px 90px rgba(2,20,40,.38)!important;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(18px);
}
.login-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--mgo-primary),var(--mgo-accent));}
.login-brand,.login-card .login-brand{gap:8px!important;margin-bottom:18px!important}
.login-card .brand-mark,.login-card img.brand-mark{width:92px!important;max-height:92px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(11,92,168,.24));}
.login-card h1,.brand-title{font-size:27px!important;color:var(--mgo-primary)!important;font-weight:800!important;letter-spacing:.5px!important;}
.login-card input{
  min-height:48px!important;
  border:1px solid var(--mgo-border)!important;
  background:var(--mgo-surface-2)!important;
  border-radius:14px!important;
  padding:12px 14px!important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease!important;
}
.login-card input:focus{outline:none!important;background:#fff!important;border-color:var(--mgo-primary)!important;box-shadow:0 0 0 4px rgba(11,92,168,.12)!important;}
.login-card button:not(.ghost),.login-card button[onclick="doLogin()"]{
  border:0!important;border-radius:14px!important;min-height:48px!important;font-weight:800!important;
  background:linear-gradient(135deg,var(--mgo-primary),var(--mgo-primary-dark))!important;color:#fff!important;
  box-shadow:0 14px 28px rgba(11,92,168,.24)!important;transition:transform .12s ease,filter .2s ease!important;
}
.login-card button:hover{filter:brightness(1.04)}
.login-card button:active{transform:translateY(1px)}
.lang-toggle-header button{border-radius:999px!important;border:1px solid var(--mgo-border)!important;background:#fff!important;color:var(--mgo-primary)!important;box-shadow:var(--mgo-shadow-sm)!important;}

/* Shell */
.app-page.active{background:var(--mgo-bg)!important;}
.sidebar{
  width:var(--mgo-sidebar)!important;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%)!important;
  color:var(--mgo-text)!important;
  border-inline-end:1px solid var(--mgo-border)!important;
  box-shadow:0 20px 55px rgba(15,23,42,.07)!important;
}
html[dir="rtl"] .app-page.active>.sidebar{right:0!important;left:auto!important}
html[dir="ltr"] .app-page.active>.sidebar{left:0!important;right:auto!important}
html[dir="rtl"] .app-page.active>.main{margin-right:var(--mgo-sidebar)!important;margin-left:0!important;width:calc(100% - var(--mgo-sidebar))!important;}
html[dir="ltr"] .app-page.active>.main{margin-left:var(--mgo-sidebar)!important;margin-right:0!important;width:calc(100% - var(--mgo-sidebar))!important;}
.sidebar-header{padding:20px 18px!important;border-bottom:1px solid var(--mgo-border)!important;background:linear-gradient(180deg,#fff,#F8FAFC)!important;}
.sidebar-logo-box{width:56px!important;height:56px!important;border-radius:18px!important;background:var(--mgo-primary-soft)!important;border:1px solid var(--mgo-primary-100)!important;box-shadow:0 10px 24px rgba(11,92,168,.10)!important;display:grid!important;place-items:center!important;}
.sidebar-logo-box img{max-width:44px!important;max-height:44px!important;object-fit:contain!important;filter:drop-shadow(0 5px 10px rgba(11,92,168,.14));}
.sidebar-header h2{font-weight:800!important;color:var(--mgo-primary)!important;margin:0!important;}
.sidebar-header p{color:var(--mgo-muted)!important;margin-top:3px!important;font-weight:600!important;}
.sidebar-nav{padding:14px 12px!important;gap:8px!important;}
.nav-section{border:1px solid transparent!important;border-radius:18px!important;margin:0 0 8px!important;overflow:hidden!important;}
.nav-section:not(.collapsed){background:#fff!important;border-color:var(--mgo-border)!important;box-shadow:var(--mgo-shadow-sm)!important;}
.nav-section-hdr,.nav-top-item{
  min-height:46px!important;border-radius:14px!important;padding:10px 12px!important;
  color:#334155!important;font-weight:800!important;display:flex!important;align-items:center!important;gap:10px!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.nav-section-hdr:hover,.nav-top-item:hover{background:var(--mgo-primary-soft)!important;color:var(--mgo-primary)!important;}
.nav-top-item.active,.nav-top-item[data-active="true"]{background:linear-gradient(135deg,var(--mgo-primary),var(--mgo-primary-dark))!important;color:#fff!important;box-shadow:0 12px 24px rgba(11,92,168,.20)!important;}
.nav-section:not(.collapsed) .nav-section-hdr{color:var(--mgo-primary)!important;background:var(--mgo-primary-soft)!important;}
.section-icon,.nav-item-icon{width:24px!important;min-width:24px!important;height:24px!important;display:grid!important;place-items:center!important;font-size:15px!important;}
.nav-section-body{padding:6px!important;border:0!important;background:transparent!important;}
.nav-item{
  min-height:42px!important;border-radius:12px!important;padding:9px 10px!important;margin:2px 0!important;
  color:#475569!important;font-weight:700!important;background:transparent!important;display:flex!important;align-items:center!important;gap:8px!important;
}
.nav-item:hover{background:#F1F5F9!important;color:var(--mgo-primary)!important;}
.nav-item.active{background:var(--mgo-primary)!important;color:#fff!important;box-shadow:0 10px 22px rgba(11,92,168,.20)!important;}
.sidebar-badge{border-radius:999px!important;background:#E11D48!important;color:#fff!important;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:11px;font-weight:800;}

.main{background:transparent!important;padding:22px!important;}
.topbar,.main-header,.page-header,.view-header{
  background:rgba(255,255,255,.88)!important;border:1px solid var(--mgo-border)!important;border-radius:22px!important;box-shadow:var(--mgo-shadow-sm)!important;
  backdrop-filter:blur(12px);padding:16px 18px!important;margin-bottom:18px!important;
}
.main h1,.view-title,.page-title{color:var(--mgo-text)!important;font-weight:800!important;letter-spacing:-.2px;}
.main h2,.card h2,.panel h2{font-weight:800!important;color:var(--mgo-text)!important;}

/* Cards, sections, statistics */
.card,.panel,.section-card,.mg-card,.stat-card,.kpi-card,.quote-card,.table-card,.form-card,[class*="card"]:not(.login-card):not(.nav-card):not(.brand-card){
  border:1px solid var(--mgo-border)!important;background:#fff!important;border-radius:20px!important;box-shadow:var(--mgo-shadow-sm)!important;
}
.card:hover,.mg-card:hover,.stat-card:hover,.kpi-card:hover{box-shadow:var(--mgo-shadow)!important;}
.stats-grid,.cards-grid,.kpi-grid,.dashboard-grid{gap:16px!important;}
.stat-card,.kpi-card{position:relative;overflow:hidden;padding:18px!important;}
.stat-card:before,.kpi-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--mgo-primary),var(--mgo-accent));opacity:.95;}
.stat-card .value,.kpi-card .value,.stat-value{font-size:28px!important;font-weight:800!important;color:var(--mgo-primary)!important;}
.stat-card .label,.kpi-card .label,.stat-label{color:var(--mgo-muted)!important;font-weight:700!important;}

/* Tables */
.table-wrap,.table-container,.data-table-wrap{border:1px solid var(--mgo-border)!important;background:#fff!important;border-radius:20px!important;box-shadow:var(--mgo-shadow-sm)!important;overflow:auto!important;}
table{border-collapse:separate!important;border-spacing:0!important;width:100%;}
th{background:#F8FAFC!important;color:#475569!important;font-weight:800!important;border-bottom:1px solid var(--mgo-border)!important;padding:12px 14px!important;white-space:nowrap;}
td{padding:12px 14px!important;border-bottom:1px solid #F1F5F9!important;color:#334155!important;vertical-align:middle!important;}
tr:hover td{background:#FBFDFF!important;}
tbody tr:last-child td{border-bottom:0!important;}

/* Forms */
input,select,textarea{
  font-family:inherit!important;border:1px solid var(--mgo-border)!important;background:#fff!important;border-radius:13px!important;min-height:42px!important;color:var(--mgo-text)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--mgo-primary)!important;box-shadow:0 0 0 4px rgba(11,92,168,.10)!important;background:#fff!important;}
label,.label,.quote-label{font-weight:800!important;color:#334155!important;margin-bottom:6px!important;}
.form-row,.form-grid,.quote-grid{gap:12px!important;}

/* Buttons */
button,.btn,.action-btn,.primary-btn,.secondary-btn,.quote-btn{
  font-family:inherit!important;border-radius:13px!important;font-weight:800!important;min-height:38px;transition:transform .12s ease,filter .18s ease,box-shadow .18s ease,background .18s ease!important;
}
button:hover,.btn:hover,.action-btn:hover{filter:brightness(1.03)}
button:active,.btn:active,.action-btn:active{transform:translateY(1px)}
.btn-primary,.primary-btn,button.primary,[data-action="save"],button.save{
  background:linear-gradient(135deg,var(--mgo-primary),var(--mgo-primary-dark))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(11,92,168,.20)!important;
}
.btn-secondary,.secondary-btn,button.secondary{background:#fff!important;color:var(--mgo-primary)!important;border:1px solid var(--mgo-primary-100)!important;}
.btn-danger,button.danger,.danger-btn{background:#FEF2F2!important;color:var(--mgo-danger)!important;border:1px solid #FECACA!important;}
.btn-success,button.success,.success-btn{background:#ECFDF5!important;color:var(--mgo-success)!important;border:1px solid #A7F3D0!important;}

/* Modals */
.modal-bg.show,.modal-backdrop.show{display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(15,23,42,.48)!important;backdrop-filter:blur(8px)!important;padding:20px!important;}
.modal,.dialog,.modal-card,.quote-modal{border:1px solid rgba(255,255,255,.72)!important;border-radius:26px!important;background:#fff!important;box-shadow:var(--mgo-shadow-lg)!important;overflow:hidden!important;}
.modal h2,.dialog h2,.modal-title{font-weight:800!important;color:var(--mgo-primary)!important;}

/* Badges */
.badge,.status,.pill,.tag{border-radius:999px!important;font-weight:800!important;border:1px solid transparent!important;padding:4px 10px!important;}
.badge.success,.status.success,.pill.success{background:#ECFDF5!important;color:#047857!important;border-color:#A7F3D0!important;}
.badge.warning,.status.warning,.pill.warning{background:#FFFBEB!important;color:#B45309!important;border-color:#FDE68A!important;}
.badge.danger,.status.danger,.pill.danger{background:#FEF2F2!important;color:#B91C1C!important;border-color:#FECACA!important;}
.badge.info,.status.info,.pill.info{background:var(--mgo-primary-soft)!important;color:var(--mgo-primary)!important;border-color:var(--mgo-primary-100)!important;}

@media(max-width:900px){
  :root{--mgo-sidebar:286px}
  .main{padding:14px!important;}
  html[dir="rtl"] .app-page.active>.main,html[dir="ltr"] .app-page.active>.main{margin:0!important;width:100%!important;}
  .sidebar{transform:translateX(105%);transition:transform .22s ease!important;}
  html[dir="ltr"] .sidebar{transform:translateX(-105%);}
  body.sidebar-open .sidebar{transform:translateX(0)!important;}
  .topbar,.main-header,.page-header,.view-header{border-radius:18px!important;}
  .card,.panel,.mg-card,.stat-card,.kpi-card,.table-wrap,.table-container{border-radius:18px!important;}
}