/* MASAR 360 v1.0.0-r2 Visual Polish
   Goal: match the approved Executive Dashboard mockup.
   Product version stays v1.0.0. Certified baseline stays 16.1.4-r9. */
:root{
  --primary:#0A192F!important;
  --primary-dark:#06111f!important;
  --primary-soft:#E9FFFB!important;
  --accent:#2DD4BF!important;
  --bg:#F8FAFC!important;
  --card:#FFFFFF!important;
  --ink:#111827!important;
  --muted:#64748B!important;
  --line:#E5E7EB!important;
  --success:#16A34A!important;
  --warning:#F59E0B!important;
  --danger:#DC2626!important;
  --radius:20px!important;
  --sidebar:288px!important;
}
html,body{background:var(--bg)!important;color:var(--ink)!important}
body{font-family:"IBM Plex Sans Arabic","Tajawal",Tahoma,Arial,sans-serif!important}

/* Shell / sidebar like the approved RTL mockup */
.app-screen{background:var(--bg)!important}
.sidebar{
  background:var(--primary)!important;
  color:#fff!important;
  border-inline-end:0!important;
  box-shadow:14px 0 34px rgba(10,25,47,.08)!important;
}
html[dir="rtl"] .sidebar{border-left:0!important;border-right:0!important}
.sidebar-brand{
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  padding:22px 20px!important;
}
.sidebar-brand h1{color:#fff!important;font-weight:900!important;letter-spacing:-.02em!important}
.sidebar-brand p,.sidebar-brand small{color:rgba(255,255,255,.58)!important}
.sidebar-brand .product-logo{width:58px!important;height:58px!important;object-fit:contain!important;filter:drop-shadow(0 10px 20px rgba(45,212,191,.16))!important}
.tenant-brand-card{
  margin:14px 14px 6px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.tenant-brand-card small{display:none!important}
.tenant-brand-card b{color:#fff!important;font-size:13px!important}
.customer-logo{background:#fff!important;border-radius:12px!important;padding:4px!important}
.nav{padding:13px 12px 18px!important}
.nav-section{
  color:rgba(255,255,255,.40)!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  padding:16px 10px 8px!important;
}
.nav-wrap{border-radius:16px!important;margin-bottom:4px!important}
.nav-item{
  color:rgba(255,255,255,.74)!important;
  border-radius:14px!important;
  padding:12px 13px!important;
  background:transparent!important;
  font-weight:700!important;
}
.nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.nav-item.active{
  background:rgba(45,212,191,.12)!important;
  color:var(--accent)!important;
  box-shadow:inset -4px 0 0 var(--accent)!important;
}
html[dir="ltr"] .nav-item.active{box-shadow:inset 4px 0 0 var(--accent)!important}
.nav-icon{
  background:rgba(255,255,255,.08)!important;
  color:inherit!important;
}
.nav-item.active .nav-icon{background:rgba(45,212,191,.18)!important;color:var(--accent)!important}
.nav-children{padding-inline-start:8px!important;border-inline-start:1px solid rgba(255,255,255,.06)!important;margin:3px 10px 8px 0!important}
html[dir="ltr"] .nav-children{margin:3px 0 8px 10px!important}
.nav-badge{background:var(--danger)!important;color:#fff!important}
.sidebar-footer{
  border-top:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.035)!important;
  padding:14px!important;
}
.sidebar-footer .profile-mini strong{color:#fff!important}
.sidebar-footer .profile-mini small{color:rgba(255,255,255,.58)!important}
.sidebar-footer .avatar,.profile-button .avatar{background:linear-gradient(135deg,var(--accent),#14B8A6)!important;color:var(--primary)!important;font-weight:900!important}
.logout-button{background:rgba(220,38,38,.15)!important;color:#fecaca!important}

/* Topbar / Global Search */
.app-main{background:var(--bg)!important}
.topbar{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.035)!important;
  backdrop-filter:blur(14px)!important;
}
.topbar h2{color:var(--ink)!important;font-weight:900!important}
.topbar p{color:var(--muted)!important}
.global-search{
  width:min(460px,38vw)!important;
  min-width:310px!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
  color:var(--accent)!important;
}
.global-search input{padding:12px 10px!important;color:var(--ink)!important;font-weight:600!important}
.global-search input::placeholder{color:#94A3B8!important;font-weight:500!important}
.global-search-results{
  border:1px solid #D7F5EF!important;
  border-radius:22px!important;
  box-shadow:0 26px 58px rgba(10,25,47,.18)!important;
}
.search-group h5{color:var(--primary)!important;font-weight:900!important}
.search-hit{border:1px solid transparent!important}
.search-hit:hover{background:#F0FDFA!important;border-color:#CCFBF1!important}
.search-hit span{background:#E6FFFA!important;color:#0F766E!important}
.icon-button,.pill-button,.secondary-button,.mini-button{border-radius:12px!important}
.pill-button{background:#ECFDF5!important;color:#0F766E!important}
.icon-button{background:#F8FAFC!important;border:1px solid var(--line)!important;color:var(--primary)!important}
.primary-button{
  background:linear-gradient(135deg,var(--primary),#12345F)!important;
  color:#fff!important;
  border-radius:13px!important;
  box-shadow:0 12px 24px rgba(10,25,47,.16)!important;
}
.secondary-button{
  background:#E6FFFA!important;
  color:#0F766E!important;
  border:1px solid #CCFBF1!important;
}
.primary-button:hover,.secondary-button:hover,.mini-button:hover{transform:translateY(-1px);transition:.18s ease}
.content{max-width:1780px!important;padding:28px!important}
.page-head{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  padding:18px 20px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.035)!important;
}
.page-head h3{font-size:23px!important;font-weight:900!important;color:var(--ink)!important}
.page-head p{font-size:13px!important;color:var(--muted)!important}

/* Dashboard matching the approved model */
.r1-live-state{
  background:#ECFDF5!important;
  color:#047857!important;
  border:1px solid #A7F3D0!important;
  border-radius:16px!important;
  padding:12px 16px!important;
  margin-bottom:16px!important;
  font-weight:800!important;
}
.r1-dashboard-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)!important;
  gap:18px!important;
  align-items:stretch!important;
  margin-bottom:20px!important;
  border-radius:28px!important;
  padding:28px!important;
  background:linear-gradient(135deg,#0A192F 0%,#102A4C 58%,#0F766E 130%)!important;
  color:#fff!important;
  box-shadow:0 28px 62px rgba(10,25,47,.18)!important;
  overflow:hidden!important;
  position:relative!important;
}
.r1-dashboard-hero::before{
  content:"";position:absolute;inset-inline-start:-105px;top:-120px;width:330px;height:330px;border-radius:50%;border:50px solid rgba(45,212,191,.08);pointer-events:none
}
.r1-dashboard-hero::after{
  content:"";position:absolute;inset-inline-end:-80px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:rgba(45,212,191,.08);filter:blur(1px);pointer-events:none
}
.r1-dashboard-hero>div{position:relative;z-index:1}
.r1-dashboard-hero span{color:var(--accent)!important;font-weight:900!important;letter-spacing:.08em!important;font-size:12px!important;text-transform:uppercase!important}
.r1-dashboard-hero h3{font-size:30px!important;line-height:1.55!important;margin:10px 0 8px!important;color:#fff!important;font-weight:900!important}
.r1-dashboard-hero p{color:#DDFBF7!important;line-height:1.9!important;margin:0 0 12px!important;max-width:820px!important}
.r1-dashboard-hero small{color:#B6EEE6!important;font-weight:700!important}
.r1-hero-actions{
  display:grid!important;
  align-content:center!important;
  gap:10px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:22px!important;
  padding:18px!important;
  backdrop-filter:blur(10px)!important;
}
.r1-hero-actions .primary-button{background:var(--accent)!important;color:var(--primary)!important;box-shadow:0 12px 24px rgba(45,212,191,.18)!important}
.r1-hero-actions .secondary-button{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important}
.r1-insight-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-bottom:22px!important;
}
.r1-insight{
  text-align:start!important;
  background:#fff!important;
  border:1px solid #EEF2F7!important;
  border-inline-start:0!important;
  border-inline-end:5px solid #CBD5E1!important;
  border-radius:22px!important;
  padding:20px!important;
  min-height:146px!important;
  box-shadow:0 14px 32px rgba(15,23,42,.055)!important;
  transition:.18s ease!important;
}
html[dir="ltr"] .r1-insight{border-inline-end:0!important;border-inline-start:5px solid #CBD5E1!important}
.r1-insight:hover{transform:translateY(-3px)!important;box-shadow:0 22px 42px rgba(15,23,42,.09)!important}
.r1-insight small{display:block!important;color:var(--muted)!important;font-size:13px!important;font-weight:900!important}
.r1-insight b{display:block!important;color:var(--ink)!important;font-size:34px!important;margin:13px 0 6px!important;line-height:1!important;font-weight:900!important}
.r1-insight em{font-style:normal!important;color:#64748B!important;font-size:12px!important;font-weight:800!important}
.r1-insight.success{border-inline-end-color:var(--success)!important}.r1-insight.warning{border-inline-end-color:var(--warning)!important}.r1-insight.danger{border-inline-end-color:var(--danger)!important}.r1-insight.info{border-inline-end-color:var(--accent)!important}
html[dir="ltr"] .r1-insight.success{border-inline-start-color:var(--success)!important}html[dir="ltr"] .r1-insight.warning{border-inline-start-color:var(--warning)!important}html[dir="ltr"] .r1-insight.danger{border-inline-start-color:var(--danger)!important}html[dir="ltr"] .r1-insight.info{border-inline-start-color:var(--accent)!important}
.r1-dashboard-body{
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(330px,.78fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.r1-charts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.r1-chart-card,.r1-alert-card{
  border-radius:24px!important;
  border:1px solid #EEF2F7!important;
  box-shadow:0 14px 32px rgba(15,23,42,.045)!important;
  background:#fff!important;
}
.card-title h4{font-size:16px!important;font-weight:900!important;color:var(--ink)!important;margin:0!important}
.card-title small{color:var(--muted)!important;font-weight:700!important}
.r1-chart-row{display:grid!important;grid-template-columns:minmax(80px,1fr) minmax(110px,1.7fr) auto!important;gap:10px!important;align-items:center!important;margin:13px 0!important}
.r1-chart-row span{color:#475569!important;font-size:12px!important;font-weight:800!important}
.r1-chart-row i{display:block!important;height:10px!important;background:#F1F5F9!important;border-radius:999px!important;overflow:hidden!important}
.r1-chart-row i em{display:block!important;height:100%!important;border-radius:999px!important;background:linear-gradient(90deg,var(--accent),#0EA5E9)!important}
.r1-chart-row b{font-size:12px!important;color:var(--primary)!important;font-weight:900!important}
.r1-alert-list{display:grid!important;gap:11px!important}
.r1-alert-list button{
  text-align:start!important;
  background:#FFF7ED!important;
  border:1px solid #FED7AA!important;
  border-radius:17px!important;
  padding:14px!important;
  color:#9A3412!important;
}
.r1-alert-list button:nth-child(2n){background:#FEF2F2!important;border-color:#FECACA!important;color:#991B1B!important}
.r1-alert-list button:nth-child(3n){background:#EFF6FF!important;border-color:#BFDBFE!important;color:#1D4ED8!important}
.r1-alert-list b{display:block!important;font-size:13px!important;margin-bottom:4px!important}
.r1-alert-list small{display:block!important;line-height:1.7!important;color:inherit!important;opacity:.86!important}
.r1-alert-list time{display:block!important;font-size:11px!important;margin-top:6px!important;opacity:.68!important}
.r1-empty-inline{padding:18px!important;border-radius:16px!important;background:#F8FAFC!important;color:var(--muted)!important;text-align:center!important;font-weight:700!important}

/* General cards/tables to match the model */
.card,.entity-card,.kpi-card,.report-card,.users-table-card,.users-toolbar-card{
  border-radius:22px!important;
  border:1px solid #EEF2F7!important;
  box-shadow:0 12px 32px rgba(15,23,42,.045)!important;
}
.v16-table th,.v16-table td{border-bottom:1px solid #EEF2F7!important}
.v16-table th{color:#64748B!important;font-size:12px!important;font-weight:900!important;background:#F8FAFC!important}
.v16-badge,.role-chip,.user-status{font-weight:900!important}
.users-admin-hero{background:linear-gradient(135deg,#0A192F,#0F766E 150%)!important;border-radius:28px!important}
.users-admin-hero small{color:var(--accent)!important}.users-admin-hero p{color:#DDFBF7!important}

/* Login screen aligned with the same visual identity */
.login-screen{background:linear-gradient(135deg,#F8FAFC 0%,#E6FFFA 55%,#F8FAFC 100%)!important}
.login-shell{border-radius:28px!important;box-shadow:0 28px 80px rgba(10,25,47,.18)!important}
.login-promo{background:linear-gradient(145deg,#0A192F 0%,#102A4C 65%,#0F766E 150%)!important;color:#fff!important}
.promo-chip{background:rgba(45,212,191,.14)!important;color:var(--accent)!important}
.promo-top h2,.promo-top h2 b{color:#fff!important}.promo-top p{color:#DDFBF7!important}
.visual-card{box-shadow:0 18px 44px rgba(10,25,47,.16)!important}
.brand-login .product-logo{width:118px!important;height:118px!important;object-fit:contain!important}
.login-form input:focus,.form-control:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(45,212,191,.16)!important}
.login-help{background:#F0FDFA!important;border-color:#CCFBF1!important;color:#0F766E!important}

@media(max-width:1320px){
  .r1-insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .r1-dashboard-body{grid-template-columns:1fr!important}
  .r1-charts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .content{padding:18px!important}
  .r1-dashboard-hero{grid-template-columns:1fr!important;padding:22px!important}
  .r1-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .global-search{width:260px!important;min-width:220px!important}
}
@media(max-width:760px){
  .sidebar{width:min(288px,88vw)!important}
  .topbar{gap:12px!important;align-items:flex-start!important}
  .topbar-actions{flex-wrap:wrap!important;justify-content:flex-end!important}
  .global-search{width:100%!important;min-width:0!important}
  .r1-insight-grid,.r1-charts{grid-template-columns:1fr!important}
  .r1-dashboard-hero h3{font-size:24px!important}
  .page-head{padding:16px!important}
}