/* ============================================================
   MASAR SCADA — css/system.css
   THE DESIGN SYSTEM LAYER.

   This file is loaded last and it governs. The six stylesheets under
   it grew a page at a time, and it showed: fourteen different corner
   radii, sixty-six runs of 700-weight uppercase micro-caps, four
   elevations used interchangeably, and a card that looked slightly
   different on every page that drew one.

   The rules this file enforces, in one place so they can be argued
   with in one place:

   SHAPE     Four radii and nothing between them — 8 for a chip, 12
             for a control, 16 for a card, 24 for a floating surface.
             A shape scale is what makes a screenful of unrelated
             components read as one product.

   TYPE      A label is 500-weight sentence case, never 700-weight
             caps. Caps at 9.5px are a shout that carries no
             information; they were on every card in the product and
             they were the loudest thing on most of them.

   DEPTH     A card does not float. It is a hairline and a whisper of
             shadow, because twenty of them on a screen with real
             shadows is a relief map. Only something that genuinely
             sits above the page — a modal, a drawer, a menu, a toast
             — gets to cast one.

   COLOUR    Al Adaam is the identity and appears once per surface,
             as a mark or a rule, never as a state. Skyline is the
             interaction colour: if it is blue you can press it or
             you are on it. Red, amber and green mean only what they
             mean. Nothing decorative is allowed any of the three.
   ============================================================ */

/* ============================================================
   1 · WHERE THE IDENTITY LIVES

   Two wrong answers before the right one, and both are worth writing
   down because they are the two ways a "brand pattern" usually fails.

   The first put the star lattice behind the whole working surface.
   It was invisible and it deserved to be: every page here is a
   screenful of edge-to-edge cards, so there is almost no page
   background left to decorate. Wallpaper nobody can see is not
   identity, it is a file that loads.

   The second painted it as a layer behind each hero card. It
   computed perfectly and still showed nothing, because every pixel
   of those cards is covered by opaque children. A pattern underneath
   a panel is a pattern underneath a panel.

   So it is baked into the BACKGROUND OF THE SURFACES THAT OWN THEIR
   OWN EMPTY SPACE — the hero panel, the head of a popup, the head of
   the sidebar, an empty state. The alpha is in the stroke colour, so
   there is no opacity to be overridden and nothing to stack. The
   eight-point star lattice is the geometry that runs through Qatari
   architecture; at this scale and weight it reads as woven ground
   rather than as pattern, and it never sits under a number.
   ============================================================ */
:root{--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2810%2C54%2C80%2C0.10%29%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M60%2018%20L74%2032%20L94%2032%20L94%2052%20L108%2066%20L94%2080%20L94%20100%20L74%20100%20L60%20114%20L46%20100%20L26%20100%20L26%2080%20L12%2066%20L26%2052%20L26%2032%20L46%2032%20Z%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2266%22%20r%3D%2215%22%2F%3E%3Cpath%20d%3D%22M0%206%20L14%2020%20M120%206%20L106%2020%20M0%20126%20L14%20112%20M120%20126%20L106%20112%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
body.dark{--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28138%2C181%2C206%2C0.13%29%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M60%2018%20L74%2032%20L94%2032%20L94%2052%20L108%2066%20L94%2080%20L94%20100%20L74%20100%20L60%20114%20L46%20100%20L26%20100%20L26%2080%20L12%2066%20L26%2052%20L26%2032%20L46%2032%20Z%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2266%22%20r%3D%2215%22%2F%3E%3Cpath%20d%3D%22M0%206%20L14%2020%20M120%206%20L106%2020%20M0%20126%20L14%20112%20M120%20126%20L106%20112%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

/* the ground under the cards: warm paper with a Skyline wash in the
   corner the eye enters from — depth, in the gaps, costing nothing */
main{
  background:
    radial-gradient(1100px 620px at 10% -8%, color-mix(in srgb,var(--b500) 8%,transparent), transparent 60%),
    var(--surface-2);
}
html[dir="rtl"] main{
  background:
    radial-gradient(1100px 620px at 90% -8%, color-mix(in srgb,var(--b500) 8%,transparent), transparent 60%),
    var(--surface-2);
}
body.dark main{
  background:
    radial-gradient(1100px 620px at 10% -8%, color-mix(in srgb,var(--b500) 14%,transparent), transparent 60%),
    var(--surface-2);
}
.page{position:absolute;z-index:1;background:transparent}

/* ---- the motif surfaces ----
   As a layer behind the content, with a mask so it fades in from the
   trailing edge: woven ground on the empty half, clean surface under
   the words. It works on these four because none of them has an
   opaque child to hide it — which is exactly why they were chosen. */
.dh-main,.md-head,.side .side-head,.empty,.tbl-empty,.mm-off{
  position:relative;isolation:isolate
}
.dh-main::before,.md-head::before,.side .side-head::before,
.empty::before,.tbl-empty::before,.mm-off::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--motif) right top / 132px 132px repeat;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 58%);
  mask-image:linear-gradient(to left,#000 0%,transparent 58%);
}
html[dir="rtl"] .dh-main::before,html[dir="rtl"] .md-head::before,
html[dir="rtl"] .side .side-head::before{
  background-position:left top;
  -webkit-mask-image:linear-gradient(to right,#000 0%,transparent 58%);
  mask-image:linear-gradient(to right,#000 0%,transparent 58%);
}
/* an empty card is the one place it may sit in the middle */
.empty::before,.tbl-empty::before,.mm-off::before{
  background-position:center;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 70%);
}
.side .side-head::before{background-size:104px 104px}
/* a popup head is only eighty pixels tall — the tile has to be
   smaller or all that shows is a corner of one star */
.md-head::before{background-size:96px 96px}

/* ============================================================
   2 · SHAPE — four radii, nothing between them
   ============================================================ */
.card,.modal,.drawer,.inspector{border-radius:var(--r)}
.btn,.seg,.psrch,.srch,.fld input,.fld select,.fld textarea,
.lfld input,select.btn,.conbtn,.tbl-wrap{border-radius:var(--r-sm)}
.tag,.pill,.chip,.itag,.vchip,.al-tag,.al-sev,.dtc-c,.wbtag,.svt-n{border-radius:var(--r-xs)}
.icon-btn,.pop-x{border-radius:50%}
.modal,.tm-menu,.conmenu,.pop,.mpop,.chatdock{border-radius:var(--r-lg)}

/* ============================================================
   3 · TYPE — a label is not a shout

   Every column head, KPI caption and section label in the product
   was 9.5px, 700-weight, uppercase, letterspaced. That is the
   typographic setting of a warning label, applied to the word
   "Zone". They are 500-weight sentence case at a readable size now,
   and the few that are genuinely caps keep a gentle tracking.
   ============================================================ */
.zr.head > span,.al-head span,.tbl thead th,.dz-r.head > span,
.svr.head > span,.cn-r.head > span,.cl-r.head > span,.svc-cat.head > span,
.t-l,.dsf-l,.in-t span,.vdf span,.mgroup,.tq-bh b,.sf-t,.kv > span,
.svr-t,.lg-badge,.dh-lbl,.ms-l,.wbl-c,.sms span,.sect-title h2{
  text-transform:none;
  letter-spacing:.01em;
  font-weight:500;
}
.zr.head > span,.al-head span,.tbl thead th,.dz-r.head > span,
.svr.head > span,.cn-r.head > span,.cl-r.head > span,.svc-cat.head > span{
  font-size:11px;color:var(--muted)
}
.t-l,.dsf-l,.in-t span,.vdf span,.ms-l{font-size:10.5px;color:var(--muted)}
/* the one place caps still earn their keep: a two-word section rule */
.lg-badge,.dh-lbl{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}

/* ============================================================
   4 · DEPTH — a card does not float
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(28,26,23,.04);
  transition:border-color var(--t-1,.14s) var(--ease,ease),
             box-shadow var(--t-1,.14s) var(--ease,ease);
}
body.dark .card{box-shadow:none;border-color:var(--line)}
/* only a card you can press lifts, and only a little */
.card.click:hover,button.card:hover,.svc:hover,.lcard:hover{
  border-color:var(--line-2);
  box-shadow:0 2px 6px rgba(28,26,23,.07)
}
/* things that genuinely sit above the page */
.modal{box-shadow:0 24px 60px -12px rgba(5,31,47,.34),0 0 0 1px rgba(28,26,23,.06)}
.drawer,.inspector{box-shadow:0 0 44px -8px rgba(5,31,47,.24)}
.tm-menu,.conmenu,.pop,.mpop{box-shadow:0 16px 40px -10px rgba(5,31,47,.28),0 0 0 1px rgba(28,26,23,.06)}
.toast{box-shadow:0 12px 30px -8px rgba(5,31,47,.34)}

/* a card header is a line of text, not a band */
.card-h{border-bottom:1px solid var(--line);padding:15px 18px 14px;gap:12px}
.card-h h3{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.card-h .sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.card-h .sub b{font:500 11.5px var(--mono);color:var(--text)}
.card-h .sub em{font-style:normal}
.card-b{padding:16px 18px}

/* ============================================================
   5 · CONTROLS
   ============================================================ */
.btn{font-weight:500;letter-spacing:0}
.btn.primary{background:var(--b600);color:#fff;border-color:var(--b600)}
.btn.primary:hover{background:var(--b700);border-color:var(--b700)}
body.dark .btn.primary{background:var(--b500);border-color:var(--b500)}
.btn.ghost{background:var(--surface);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn.soft{background:var(--b50);color:var(--b700);border:1px solid transparent}
.btn.soft:hover{background:var(--b100)}
body.dark .btn.soft{background:rgba(44,122,153,.20);color:var(--b200)}

.seg{background:var(--surface-2);border:1px solid var(--line);padding:3px;gap:2px}
.seg button{border-radius:calc(var(--r-sm) - 4px);font-weight:500;color:var(--muted);
  transition:background var(--t-1,.13s) var(--ease,ease),color var(--t-1,.13s) var(--ease,ease)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--b700);box-shadow:0 1px 2px rgba(28,26,23,.10)}
body.dark .seg button.on{background:var(--surface-3);color:var(--b200)}

/* every state chip in the product, one shape and one weight */
.tag,.pill,.itag,.chip{font-weight:500;letter-spacing:0}

/* ============================================================
   6 · THE POPUP — one shell, forty-one call sites

   Every modal in the product is drawn by UI.modal, so the chrome is
   fixed once here: a quieter scrim, a header that does not shout, a
   body that breathes, and a footer that sits on the surface rather
   than in a tinted tray.
   ============================================================ */
.modal-wrap{
  background:color-mix(in srgb,var(--b950) 46%,transparent);
  backdrop-filter:saturate(1.2) blur(7px);
  padding:28px;
  animation:mdFade .2s var(--ease,ease)
}
@keyframes mdFade{from{opacity:0}to{opacity:1}}
.modal{
  border:0;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;
  animation:mdIn .3s cubic-bezier(.2,.9,.3,1)
}
@keyframes mdIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.md-head{
  position:relative;padding:20px 24px 18px;border-bottom:1px solid var(--line);
  background:var(--surface);flex:0 0 auto
}
/* the identity, once, on the surface that is asking for a decision */
.md-head::after{content:'';position:absolute;bottom:-1px;inset-inline-start:24px;
  width:32px;height:2px;border-radius:1px;background:var(--brand)}
.md-head h3{font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.md-head .sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
.md-head .icon-btn{margin-inline-start:auto}
.md-body{padding:22px 24px;overflow-y:auto;flex:1 1 auto;min-height:0}
.md-foot{
  padding:16px 24px;border-top:1px solid var(--line);background:var(--surface);
  gap:10px;flex:0 0 auto;position:static
}
.modal .fld{margin-bottom:16px}
.modal .fld > span{font-size:11.5px;font-weight:500;color:var(--muted);margin-bottom:7px;display:block}
.modal .fld input,.modal .fld select,.modal .fld textarea{
  height:44px;padding:0 14px;border:1px solid var(--line-2);background:var(--surface);
  font-size:13.5px;color:var(--ink);width:100%}
.modal .fld textarea{height:auto;padding:12px 14px;line-height:1.6}
.modal .fld input:hover,.modal .fld select:hover,.modal .fld textarea:hover{border-color:var(--b300)}
.modal .fld input:focus,.modal .fld select:focus,.modal .fld textarea:focus{
  outline:0;border-color:var(--b600);box-shadow:0 0 0 3px rgba(13,66,97,.13)}
.modal .kv{padding:9px 0;border-bottom:1px solid var(--line)}
.modal .kv:last-child{border-bottom:0}
.modal .kv > span{font-size:11.5px;color:var(--muted)}
.modal .kv b{font-size:12.5px;font-weight:500;color:var(--ink)}

/* ---- the drawer and the inspector are popups that happen to dock ---- */
.drawer,.inspector{border-radius:0}
.dr-head{height:56px;padding:0 18px;border-bottom:1px solid var(--line)}
.dr-head b{font-size:14px;font-weight:500}

/* ---- menus ---- */
.tm-menu,.conmenu{border:0;padding:7px}
.tm-row,.conmenu button{border-radius:var(--r-sm);font-size:12.8px;font-weight:400}

/* ============================================================
   7 · EMPTY STATES — the same voice everywhere
   ============================================================ */
.empty,.tbl-empty{padding:34px 22px;text-align:center;color:var(--muted)}
.empty .e-ic,.tbl-empty .e-ic{
  width:48px;height:48px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-3);color:var(--dim)}
.empty b{display:block;font-size:13.5px;font-weight:500;color:var(--text);margin-bottom:4px}
.empty span{font-size:12px;line-height:1.6;max-width:36ch;margin:0 auto;display:block}

/* ============================================================
   8 · COLOUR DISCIPLINE

   Al Adaam was leaking into places that are not the identity — a
   progress fill, a chart series, a number that happened to be large.
   It belongs to the mark, the rules under the mark, and the round
   figure on the dashboard hero that IS the product's one headline.
   Everything else that was using it is interaction or status, and
   takes the colour of what it actually is.
   ============================================================ */
.zr-bar i,.svc-bar i,.in-bar i,.vr-bar i,.mrow .sw{background-image:none}
/* focus is one ring, one colour, everywhere */
*:focus-visible{outline:2px solid var(--b500);outline-offset:2px}
.card :focus-visible,.zr:focus-visible{outline-offset:-2px}

/* ============================================================
   9 · SCROLLBARS — present, quiet, consistent
   ============================================================ */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box}

/* ============================================================
   10 · LEGIBILITY — the popups were washed out

   The palette's two line tokens are very light warm greys —
   #e7e1d6 and #dcd5c9. As a hairline between cards that is exactly
   right. As the BORDER OF A TEXT FIELD it is about 1.5:1 against
   white, which is not a box you can see; it is a suggestion of one.
   Stack six of those in a dialog with 11.5px muted labels over a
   blurred scrim and the whole thing reads as fog.

   A control you are meant to type into gets its own border token,
   a darker label and full-strength text. The scrim goes darker and
   the blur comes down, because blur turns the page behind into mush
   and the eye reads mush as "this screen is out of focus".
   ============================================================ */
:root{
  /* the edge of something you can type in — darker than the hairline
     that separates cards, because a field has to look like a box */
  --field:#b9b1a2;
  --field-hover:#8f8678;
}
body.dark{--field:#4a453d;--field-hover:#6a6459}

/* ---- the scrim ---- */
.modal-wrap{
  background:color-mix(in srgb,var(--b950) 62%,transparent);
  backdrop-filter:saturate(1.05) blur(3px);
}
.modal{box-shadow:0 32px 70px -14px rgba(5,31,47,.46),0 0 0 1px rgba(28,26,23,.10)}

/* ---- every field in the product, not only the ones in dialogs ---- */
.fld > span,.lfld > span,.modal .fld > span{
  font-size:12px;font-weight:500;color:var(--text);margin-bottom:7px
}
.fld input,.fld select,.fld textarea,
.modal .fld input,.modal .fld select,.modal .fld textarea,
.lfld input,.psrch input,.srch input,.top-search input{
  border-color:var(--field);
  color:var(--ink);
}
.fld input,.fld select,.modal .fld input,.modal .fld select{font-size:13.5px}
.fld input:hover,.fld select:hover,.fld textarea:hover,
.modal .fld input:hover,.modal .fld select:hover,.modal .fld textarea:hover,
.lfld input:hover{border-color:var(--field-hover)}
.fld input:focus,.fld select:focus,.fld textarea:focus,
.modal .fld input:focus,.modal .fld select:focus,.modal .fld textarea:focus,
.lfld input:focus,.psrch input:focus,.top-search input:focus{
  border-color:var(--b600);box-shadow:0 0 0 3px rgba(13,66,97,.16)
}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}

/* a select must look like a select: the chevron was the same colour as
   the border it sat next to */
.fld select,.modal .fld select,select.btn{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-inline-end:36px;
}
html[dir="rtl"] .fld select,html[dir="rtl"] .modal .fld select,html[dir="rtl"] select.btn{
  background-position:17px calc(50% + 1px),12px calc(50% + 1px);
  padding-inline-end:14px;padding-inline-start:36px;
}

/* ---- the popup's own text ---- */
.md-head .sub{color:var(--text)}
.md-body{color:var(--text);font-size:13px;line-height:1.7}
.md-body p{color:var(--text)}
.md-body .tiny.muted,.md-body .dim{color:var(--muted)}
.modal .kv > span{color:var(--muted);font-size:12px}
.modal .kv b{color:var(--ink)}

/* the two-way choice at the top of a dialog reads as a choice */
.modal .seg,.modal .segbar{background:var(--surface-2);border:1px solid var(--field)}
.modal .seg button,.modal .segbar .seg{font-size:12.8px;height:36px}
.modal .seg button.on,.modal .segbar .seg.on{
  background:var(--b600);color:#fff;box-shadow:none;font-weight:500}
body.dark .modal .seg button.on,body.dark .modal .segbar .seg.on{background:var(--b500)}

/* ---- and the same problem in the side panels ---- */
.inspector .kv > span,.drawer .kv > span{color:var(--muted)}
.inspector .kv b,.drawer .kv b{color:var(--ink)}