/* MASAR 360 r3 enterprise layer.
   Loaded last on purpose: it respects runtime branding variables and keeps older
   UI layers from shrinking logos or freezing tenant colors. */
:root{
  --brand-radius:var(--radius,18px);
  --brand-shadow:0 18px 46px rgba(15,23,42,.08);
  --brand-shadow-strong:0 28px 70px rgba(15,23,42,.14);
  --surface-subtle:color-mix(in srgb,var(--card,#fff) 88%,var(--bg,#f8fafc));
}

html,body{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--bg,#f8fafc) 84%,#fff) 0%,var(--bg,#f8fafc) 48%,color-mix(in srgb,var(--accent,#2dd4bf) 7%,var(--bg,#f8fafc)) 100%)!important;
  color:var(--ink,#111827)!important;
  font-family:"IBM Plex Sans Arabic","Tajawal","Segoe UI",Tahoma,Arial,sans-serif!important;
  text-rendering:optimizeLegibility;
}

button,input,select,textarea{font-family:inherit!important}
h1,h2,h3,h4,b,strong{letter-spacing:0!important}

.login-screen{
  background:
    radial-gradient(circle at 12% 25%,color-mix(in srgb,var(--accent,#2dd4bf) 16%,transparent),transparent 28%),
    linear-gradient(135deg,#f8fbff 0%,#eefcf8 48%,#f7fafc 100%)!important;
}
.login-shell{
  max-width:1260px!important;
  min-height:760px!important;
  border-radius:28px!important;
  box-shadow:0 34px 95px rgba(10,25,47,.16)!important;
  overflow:hidden!important;
}
.login-panel{padding:54px 66px!important}
.brand-login{
  display:grid!important;
  justify-items:center!important;
  text-align:center!important;
  gap:16px!important;
  margin:54px 0 42px!important;
}
.brand-login .product-logo{
  width:min(250px,68vw)!important;
  height:112px!important;
  max-width:none!important;
  object-fit:contain!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.brand-login h1{font-size:32px!important;line-height:1.35!important;color:var(--primary,#0a192f)!important}
.brand-login p,.brand-login small{color:var(--muted,#64748b)!important}
.login-form input{
  min-height:52px!important;
  border-radius:15px!important;
  border-color:color-mix(in srgb,var(--line,#e5e7eb) 78%,var(--accent,#2dd4bf))!important;
  background:#fff!important;
}
.login-button,.primary-button{
  background:linear-gradient(135deg,var(--primary,#0a192f),color-mix(in srgb,var(--primary,#0a192f) 72%,var(--accent,#2dd4bf)))!important;
  color:#fff!important;
  border-radius:14px!important;
  box-shadow:0 15px 34px color-mix(in srgb,var(--primary,#0a192f) 22%,transparent)!important;
}

.app-screen{background:transparent!important}
.sidebar{
  width:min(var(--sidebar,320px),380px)!important;
  background:linear-gradient(180deg,var(--primary-dark,var(--primary,#0a192f)) 0%,var(--primary,#0a192f) 58%,color-mix(in srgb,var(--primary,#0a192f) 78%,#000) 100%)!important;
  box-shadow:18px 0 46px rgba(10,25,47,.12)!important;
}
html[dir="ltr"] .sidebar{box-shadow:-18px 0 46px rgba(10,25,47,.12)!important}
.sidebar-brand{
  min-height:154px!important;
  padding:22px 18px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
}
.sidebar-brand .product-logo{
  width:112px!important;
  height:112px!important;
  flex:0 0 112px!important;
  object-fit:contain!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  filter:none!important;
  box-shadow:none!important;
}
.sidebar-brand>div{
  display:block!important;
  min-width:0!important;
}
.sidebar-brand h1{
  display:block!important;
  margin:0 0 5px!important;
  font-size:21px!important;
  line-height:1.25!important;
  color:#fff!important;
  white-space:nowrap!important;
}
.sidebar-brand p{
  display:block!important;
  margin:0!important;
  color:#7ee7dc!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:1.4px!important;
}
.sidebar-brand .powered-product{display:none!important}
.tenant-brand-card{
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.nav-item.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#2dd4bf) 25%,transparent),rgba(255,255,255,.075))!important;
  color:#fff!important;
  box-shadow:inset -4px 0 0 var(--accent,#2dd4bf),0 12px 26px rgba(0,0,0,.10)!important;
}
html[dir="ltr"] .nav-item.active{box-shadow:inset 4px 0 0 var(--accent,#2dd4bf),0 12px 26px rgba(0,0,0,.10)!important}
.nav-icon{border-radius:12px!important}

.topbar{
  min-height:86px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid color-mix(in srgb,var(--line,#e5e7eb) 85%,var(--accent,#2dd4bf))!important;
}
.content{
  max-width:1760px!important;
  padding:28px 30px 42px!important;
}
.page-head,.card,.v16-metric,.v16-chart,.entity-card,.report-card{
  border-color:color-mix(in srgb,var(--line,#e5e7eb) 83%,var(--accent,#2dd4bf))!important;
  border-radius:var(--brand-radius)!important;
  box-shadow:var(--brand-shadow)!important;
}
.page-head{
  background:linear-gradient(180deg,#fff,var(--surface-subtle))!important;
  margin-bottom:18px!important;
}
.page-head h3{font-size:24px!important;line-height:1.45!important}
.page-head p{font-size:13.5px!important;line-height:1.8!important}

.form-control,input,select,textarea{
  border-radius:14px!important;
  border-color:color-mix(in srgb,var(--line,#e5e7eb) 86%,var(--accent,#2dd4bf))!important;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent,#2dd4bf)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#2dd4bf) 17%,transparent)!important;
}
.mini-button,.secondary-button,.pill-button,.icon-button{
  border-radius:13px!important;
}
.secondary-button,.mini-button{
  background:color-mix(in srgb,var(--accent,#2dd4bf) 10%,#fff)!important;
  color:color-mix(in srgb,var(--primary,#0a192f) 85%,var(--accent,#2dd4bf))!important;
  border:1px solid color-mix(in srgb,var(--accent,#2dd4bf) 22%,var(--line,#e5e7eb))!important;
}

.v16-dashboard-hero{
  border-radius:28px!important;
  padding:30px!important;
  background:
    radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--accent,#2dd4bf) 25%,transparent),transparent 28%),
    linear-gradient(135deg,var(--primary,#0a192f),color-mix(in srgb,var(--primary,#0a192f) 68%,var(--accent,#2dd4bf)))!important;
  box-shadow:var(--brand-shadow-strong)!important;
}
.v16-metric{
  min-height:128px!important;
  padding:18px!important;
  border-inline-start:5px solid var(--accent,#2dd4bf)!important;
}
.v16-metric b{color:var(--primary,#0a192f)!important}
.v16-metric.warning{border-inline-start-color:var(--warning,#f59e0b)!important}
.v16-metric.danger{border-inline-start-color:var(--danger,#dc2626)!important}
.v16-metric.accent{border-inline-start-color:var(--accent,#2dd4bf)!important}

.v16-settings-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(420px,.82fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.v16-settings-grid>.card{
  padding:22px!important;
  background:linear-gradient(180deg,#fff,var(--surface-subtle))!important;
}
.v16-settings-grid h4{
  margin:0 0 16px!important;
  font-size:17px!important;
  color:var(--primary,#0a192f)!important;
}
.v16-brand-preview{
  display:grid!important;
  grid-template-columns:132px 1fr!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px!important;
  border-radius:22px!important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--primary,#0a192f) 8%,#fff),#fff)!important;
  border:1px solid color-mix(in srgb,var(--accent,#2dd4bf) 20%,var(--line,#e5e7eb))!important;
}
.v16-brand-logo-preview{
  width:120px!important;
  height:120px!important;
  border-radius:24px!important;
  background:#fff!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:0 16px 34px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}
.v16-brand-logo-preview img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.v16-brand-preview b{display:block!important;font-size:22px!important;color:var(--ink,#111827)!important}
.v16-brand-preview small{display:block!important;margin:4px 0 12px!important;color:var(--muted,#64748b)!important}
.v16-brand-preview i{
  display:inline-block!important;
  width:46px!important;
  height:18px!important;
  border-radius:999px!important;
  margin-inline-end:7px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important;
}
.v16-presets{
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;
}
.v16-presets button{
  min-height:66px!important;
  border-radius:17px!important;
  border-color:color-mix(in srgb,var(--line,#e5e7eb) 80%,var(--accent,#2dd4bf))!important;
}
.v16-presets button.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#2dd4bf) 16%,#fff),#fff)!important;
  border-color:var(--accent,#2dd4bf)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent,#2dd4bf) 14%,transparent)!important;
}
.v16-color-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;
  gap:12px!important;
}
.v16-color-field{
  min-height:82px!important;
  border:1px solid color-mix(in srgb,var(--line,#e5e7eb) 82%,var(--accent,#2dd4bf))!important;
  border-radius:18px!important;
  padding:12px!important;
  background:#fff!important;
  display:grid!important;
  grid-template-columns:1fr 58px!important;
  grid-template-areas:"label color" "hex color"!important;
  gap:5px 12px!important;
  align-items:center!important;
}
.v16-color-field span{grid-area:label;font-weight:900!important;color:var(--ink,#111827)!important}
.v16-color-field b{grid-area:hex;color:var(--muted,#64748b)!important;font-size:12px!important}
.v16-color-field input{
  grid-area:color!important;
  width:58px!important;
  height:48px!important;
  padding:3px!important;
  border-radius:14px!important;
}
.v16-brand-controls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.v16-brand-controls label{
  display:grid!important;
  gap:9px!important;
  padding:14px!important;
  border-radius:17px!important;
  background:#fff!important;
  border:1px solid var(--line,#e5e7eb)!important;
}
.v16-brand-files{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.v16-brand-files label{
  position:relative!important;
  min-height:150px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1.5px dashed color-mix(in srgb,var(--accent,#2dd4bf) 32%,var(--line,#e5e7eb))!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  cursor:pointer!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.v16-brand-files label:hover{
  transform:translateY(-2px)!important;
  border-color:var(--accent,#2dd4bf)!important;
  box-shadow:0 16px 34px rgba(15,23,42,.08)!important;
}
.v16-brand-files label.is-uploading{
  opacity:.72!important;
  pointer-events:none!important;
}
.v16-brand-files input[type=file]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
}
.v16-brand-files label>div{
  width:96px!important;
  height:76px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.v16-brand-files img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}

.v16-table th,.v16-table td,table th,table td{
  font-size:12.5px!important;
  line-height:1.65!important;
}
.v16-file-name{
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  min-width:180px!important;
  font-weight:800!important;
  color:var(--ink,#111827)!important;
}
.v16-vehicle-alerts{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:0 0 16px!important;
  padding:10px 12px!important;
  border:1px solid #e2edf3!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#fbfdff,#f4fafb)!important;
}
.v16-vehicle-alerts span{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  background:#fff7e6!important;
  border:1px solid #ffd890!important;
  color:#744700!important;
  font-size:12px!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(145,105,24,.07)!important;
  white-space:nowrap!important;
}
.v16-vehicle-alerts span::before{
  content:"تنبيه"!important;
  display:grid!important;
  place-items:center!important;
  min-width:44px!important;
  height:22px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#f59e0b!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
}
.v16-vehicle-alerts span.doc-missing::before{content:"وثيقة"!important}
.v16-vehicle-alerts span.custody-missing::before{content:"عهدة"!important;background:#0f766e!important}
.v16-vehicle-alerts span.auth-missing::before{content:"تم"!important;background:#0b5ea8!important}
.v16-vehicle-alerts span.custody-missing{background:#ecfdf7!important;border-color:#bdebdc!important;color:#075b4f!important}
.v16-vehicle-alerts span.auth-missing{background:#eef7ff!important;border-color:#c7e4fb!important;color:#0b4f82!important}
.v16-badge,.status,.status-badge,.doc-pill,.badge{
  font-size:11px!important;
  padding:6px 10px!important;
}

.v16-photo-panel .card-title{
  align-items:flex-start!important;
}
.v16-photo-uploadbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.v16-photo-uploadbar select{
  min-width:150px!important;
  min-height:40px!important;
}
.v16-photo-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:14px!important;
}
.v16-photo-card{
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--line,#e5e7eb) 78%,var(--accent,#2dd4bf))!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
}
.v16-photo-card img,.v16-photo-placeholder{
  width:100%!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#2dd4bf) 12%,#fff),#f8fafc)!important;
  display:grid!important;
  place-items:center!important;
  color:var(--muted,#64748b)!important;
  font-weight:900!important;
}
.v16-photo-card div{
  padding:12px!important;
  display:grid!important;
  gap:4px!important;
}
.v16-photo-card b{color:var(--primary,#0a192f)!important}
.v16-photo-card small,.v16-photo-card span{
  color:var(--muted,#64748b)!important;
  font-size:11px!important;
}

.v16-about{
  max-width:980px!important;
  min-height:250px!important;
  padding:26px!important;
  border-radius:26px!important;
  background:
    linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent,#2dd4bf) 6%,#fff))!important;
  box-shadow:var(--brand-shadow)!important;
}
.v16-about img{width:250px!important;max-width:36vw!important}

@media(max-width:1180px){
  .v16-settings-grid{grid-template-columns:1fr!important}
  .content{padding:20px!important}
}
@media(max-width:760px){
  .login-shell{min-height:auto!important;border-radius:0!important}
  .login-panel{padding:34px 24px!important}
  .brand-login .product-logo{width:min(220px,72vw)!important;height:96px!important}
  .sidebar-brand{min-height:132px!important;padding:18px 15px!important}
  .sidebar-brand .product-logo{width:92px!important;height:92px!important;flex-basis:92px!important}
  .sidebar-brand h1{font-size:18px!important}
  .topbar{min-height:auto!important}
  .content{padding:14px!important}
  .v16-brand-preview{grid-template-columns:1fr!important;text-align:center!important}
  .v16-brand-logo-preview{margin:auto!important}
  .v16-brand-controls,.v16-brand-files{grid-template-columns:1fr!important}
}