/* =====================================================================
   SHELL.CSS  -  the seam between Omee's chrome and FengeDispatch's desk.

   Three jobs, and nothing else belongs in here:

     1. WHERE THE PAGE STARTS. Omee's header and sidebar are fixed, so
        whatever the page renders has to begin where they stop. 280px and
        80px are the template's own numbers, not new ones.

     2. THE DESK'S CHROME, now living in Omee's header. `dot`, `btn`,
        `tabs`, `active`, `show` and `hidden` are the six class names
        desk.css and Omee both define; inside `.omee` Omee's version
        wins, so the six elements that moved wear `fd-` names instead of
        arguing about specificity. The rules below are desk.css's,
        copied, with the names changed - the bar looks the same because
        it IS the same.

     3. FENGEDISPATCH'S OWN MARKS in the sidebar: the wordmark, and the
        grey for a menu item whose page has not been built.

   IT DOES NOT STYLE THE DESK. desk.css owns everything from `#app`
   inwards and this file never reaches in there.
   ===================================================================== */

/* ---- 0. hidden means hidden --------------------------------------
   `#app.desk` and `#dash` both carry a display of their own, and an id
   beats the browser's own [hidden] rule - so without these two the
   console would stay on screen for a signed-out visitor. One mechanism,
   said once. */
#app.desk[hidden], #dash[hidden], .omee[hidden]{display:none}

/* ---- 1. where the page starts ------------------------------------ */

/* THE TWO BOTTOM BORDERS ARE ONE LINE, and they were not.

   Omee sets no height on either block. The header is 20px of padding
   around a row of 40px controls, and the sidebar's logo block is 20px
   around a 40px IMAGE - both land on 80px by accident of content, and
   the template never had to say so. Ours says a wordmark in the sidebar
   (text, 28px tall) and the desk's clock and dots in the header, so the
   two blocks came out different heights and the corner where they meet
   showed a step.

   Pinned to the same number instead of left to their contents, which is
   also the number `#app.desk` above is offset by. border-box, because
   preflight - which is what makes everything border-box in a Tailwind
   page - was dropped when this sheet was namespaced, so height here
   would otherwise EXCLUDE the 1px border and put the two lines 1px
   apart again. */
.omee .codex-header,
.omee .codex-sidebar .logo-gridwrap{
  box-sizing:border-box;
  height:80px;
  padding-block:0;
  margin-block-end:0;
}
.omee .codex-header .header-contain{height:100%}

#app.desk{
  display:flex;flex-direction:column;   /* .main fills what is left */
  margin-inline-start:280px;   /* the sidebar's width, from Omee */
  padding-block-start:80px;    /* the header's height, from Omee */
  height:100vh;
  transition:margin .5s ease;  /* matches the sidebar's own transition */
}
/* Sidebar collapsed. The class goes on `.omee`, NOT on <body> - the
   template's own script puts it on the body, and that one line has to
   be retargeted when the toggle is wired. */
.omee.daactive-sidebar ~ #app.desk{margin-inline-start:0}

@media (max-width:991px){
  #app.desk{margin-inline-start:0}
}

/* ---- 0. THE TEMPLATE'S BASE lives in omee-base.css (Tailwind's reset,
   scoped to `.omee` by build-omee.mjs), loaded before omee.css. Roboto
   is loaded in index.php's <head>, as the template loads it. -------- */

/* DESK CLASSES USED INSIDE THE DASHBOARD PAGES are sized for the desk's
   dense panes (11-13px, monospace links). On a dashboard page they take
   the template's body size and face instead. */
.omee .setrow-help,.omee .setrow-rng,.omee .setrow-def,.omee .setrow-reset,
.omee .setgrp-h{font-size:14px}
.omee .mk .nm{font-size:13px}
.omee .btn{font-size:inherit;line-height:1}     /* desk.css sizes .btn at 13px; the template's inherits */
.omee .linkbox,.omee .linkbox .why,.omee .linkbox .cd{font-size:14px;color:#051722}
.omee .linkbox .lk{font:inherit;font-size:14px;margin:8px 0 12px}
.omee .linkbox .cd{color:#8392a5;margin:10px 0 0}

/* ---- 1a. DASHBOARD PAGES SCROLL. desk.css sets body{overflow:hidden}
   for the Jobs desk, which scrolls its own panes; index.php's tab() puts
   `fd-desk` on <body> only while the desk is showing. */
body:not(.fd-desk){overflow-y:auto}

/* ---- 1b. TABLES, AS THE TEMPLATE DRAWS THEM ------------------------
   Transcribed from the template's Data Table page (react-admin
   _genaral.scss `.datatable_list`, on PrimeReact's lara cell metrics):
   a bordered grid, every cell 1rem padded, centred and middle-aligned,
   text in the template's light grey, headings weight 600. Applied to
   every `.table` in a card so all lists read the same. Links and status
   words keep their own colours. */
.omee .card table.table{border:1px solid #e5e5e5;border-collapse:collapse;width:100%}
.omee .card table.table th,
.omee .card table.table td{padding:1rem;font-size:16px;line-height:1.5;color:#8392a5;
  text-align:center;vertical-align:middle;border-left:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5}
.omee .card table.table th{font-weight:600}
.omee .card table.table:not(:last-child){margin-bottom:20px}   /* the template's form-group gap */

/* Library ▸ Markers: the size slider, its number, and the chosen marker
   drawn at exactly that size beside it. */
.omee .fd-mksize-row{display:flex;align-items:center;gap:16px}
.omee .fd-mksize-row input[type=range]{width:280px;accent-color:var(--fd-primary)}
.omee .fd-mksize-n{min-width:48px;color:#051722}
.omee .fd-mkdef{color:#8392a5;font-weight:400;margin-left:6px}
.omee .fd-mksize-prev{height:72px;display:flex;align-items:flex-end}
.omee .fd-mksize-prev svg{display:block}
/* The chosen marker tile follows the primary colour, not a leftover blue. */
.omee .mk.on{border-color:var(--fd-primary);background:var(--fd-primary-soft);
  box-shadow:inset 0 0 0 1px var(--fd-primary)}
.omee .mk.on .nm{color:var(--fd-primary)}

/* The question box sits over EVERYTHING, the Jobs map included - the
   template's z-index of 9 is below the desk. Paragraphs in its body get
   the template's p colour and a gap between them. */
.omee #fdAsk{z-index:10000}
.omee #fdAsk .modal-body p+p{margin-top:10px}
.omee #fdAsk .modal-footer .btn+.btn{margin-inline-start:10px}

.omee .fd-listtbl tr.fd-row{cursor:pointer}
.omee .fd-listtbl tr.fd-row:hover td{background:var(--fd-primary-soft)}
.omee .fd-listtbl tr.fd-row.on td{background:var(--fd-primary-soft)}
.omee .fd-listtbl tr.fd-row.off td{opacity:.6}
.omee .fd-listtbl td.fd-cellpic{width:64px}
.omee .fd-listtbl td.fd-cellpic img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:inline-block}

/* Fleet ▸ History: the map inside its card. */
.omee .fd-histmap{height:520px;margin-top:20px;border:1px solid #e5e5e5;border-radius:5px;background:#f7f8f9}
.omee .fd-mapnote{height:100%;display:flex;align-items:center;justify-content:center;color:#8392a5}

/* FAQ banner. The template's picture behind it (images/pages/faq/1.jpg)
   ships as a "1550 x 360" placeholder, so it is not copied; the banner is
   the template's own overlay colour, #051722, on its own. */
.omee .faq-searchwrap .card-body{background-image:none;background-color:#051722}

/* ---- 2. the desk's chrome, in Omee's header ---------------------- */
.omee .fd-clock{display:flex;align-items:center;padding:0 4px 0 10px;font-size:14px;
  color:#555;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum"}

.omee .fd-live{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:14px;
  color:#777;white-space:nowrap}
.omee .fd-dot{width:8px;height:8px;border-radius:50%;background:#bbb;flex:0 0 auto}
.omee .fd-dot.ok{background:#2e9b3f}
.omee .fd-dot.busy{background:#e0a800}
.omee .fd-dot.err{background:#d9534f}

.omee .fd-snd{cursor:pointer;padding-left:2px;user-select:none}
.omee .fd-snd:hover{color:#333}
.omee .fd-snd .fd-gl{font-size:16px;line-height:1}
.omee .fd-snd.off .fd-gl{opacity:.5}

.omee .fd-vpick{display:flex;align-items:center;gap:7px;padding:0 14px;font-size:14px;
  color:#888;white-space:nowrap}
.omee .fd-vpick select{font:inherit;font-size:14px;color:var(--fd-primary);font-weight:600;
  padding:4px 6px;border:1px solid #ccc;border-radius:4px;background:#fff;max-width:170px}

.omee .fd-who{display:flex;align-items:center;gap:10px;padding:0 6px 0 14px;
  font-size:14px;color:#888;white-space:nowrap}
.omee .fd-btn{padding:3px 9px;border:1px solid #ccc;border-radius:4px;background:#fff;
  color:#333;font-size:14px;cursor:pointer;user-select:none}
.omee .fd-btn:hover{background:#f0f0f0}

/* ---- 3. FengeDispatch's own marks -------------------------------- */
.omee .fd-wordmark{font-size:21px;font-weight:600;color:#16202b;letter-spacing:-.01em}
.omee .fd-wordmark b{font-weight:400;color:var(--fd-primary)}
/* The collapse control is the template's - `.sidebar-action` inside a
   `.navicon-wrap`, feather's four squares - and Omee styles both. The
   only thing missing is the colour the icon inherits, because the
   template's version is drawn by a script that hard-codes its stroke. */
.omee .navicon-wrap{color:#8392a5;cursor:pointer}
/* The signed-in name and account under the logo. The template's h6 took
   its size from Tailwind's reset (inherit), which build-omee strips, so
   it had fallen to the browser's 0.67em. */
.omee #shellUser{font-size:16px}
.omee #shellTenant{font-size:16px}
/* Setup ▸ Phone app: two square boxes side by side. Square only where
   they ARE side by side; stacked on a narrow screen they take their
   content's height. */
@media (min-width:1280px){
  /* At least as tall as it is wide (100cqw = the column's width), and
     taller only if its content needs it. The grid stretches both
     columns to the taller, and each card fills its column, so the pair
     stays even. */
  .omee .fd-squarewrap{display:flex;container-type:inline-size}
  .omee .fd-square{flex:1 1 auto;min-height:100cqw}
}

/* A page that does not exist yet. Greyed and not clickable, the same
   answer Locate and Archive give on the Jobs toolbar - a control that
   cannot work says so rather than going nowhere. */
.omee .fd-soon a{opacity:.45;cursor:not-allowed}
.omee .fd-soon a:hover{color:#8392a5}
/* THE THIRD LEVEL (Setup > Library > People). omee.css has the
   `secondsubmenu-list` show/hide rules but gives it no indent in the
   codex menu; 45px is the template's own value for its second level
   (`.menu-list .secodnmenu-list a`), copied, not chosen. */
.omee .codex-menu .submenu-list .secondsubmenu-list a{padding-inline-start:45px}

/* ---- 4. the two places Omee's names met the desk's ----------------
   `danger` and `card-header`'s capitalisation are the only marks Omee
   left on the Setup page once it moved inside `.omee`. Both are the
   template asserting a look over content that already had one.

   `rowbtn danger` is the desk's red TEXT link - Revoke, Delete. Omee's
   `.danger` is a filled red BADGE, and it won on specificity, so a
   dispatcher was looking at a red block in the middle of a table. */
.omee .rowbtn{background:none;padding:0;border:0;font-size:inherit}
.omee .rowbtn.danger{background:none;color:#c0392b;padding:0}

/* A card's heading is a sentence we wrote, not a label to be title-cased.
   "Sign-ons - last 24 hours" is not "Sign-Ons - Last 24 Hours". */
.omee .card .card-header h4{text-transform:none}

/* =====================================================================
   5. THE FRONT DOOR

   Omee's auth card, with the parts that are ours: the two-way switch
   between signing in and creating an account, and the console address
   with its live check. Both sit inside `.omee bg-auth`, so these are
   the only rules needed on top of the template's own.
   ===================================================================== */

/* Omee title-cases headings. "Set up a new account. Takes about a
   minute." is a sentence, not a label - and "Create Your Account" reads
   like a form field. Same correction as the card headers. */
.omee .auth-header h3,
.omee .auth-header h6{text-transform:none}
.omee .auth-header h6{font-size:14px;color:#8392a5;font-weight:400}

/* Sign in / Create account. `t` and `on` were the desk's names for
   these; inside `.omee` they would have collided, so they are `fd-` -
   the same reason the header's chrome is. */
.omee .fd-doortabs{display:flex;gap:6px;margin:0 0 18px}
.omee .fd-doortab{flex:1;text-align:center;padding:9px 10px;cursor:pointer;
  border:1px solid #e5e5e5;border-radius:5px;color:#8392a5;font-size:14px;
  user-select:none;transition:all .2s ease}
.omee .fd-doortab:hover{color:#16202b}
.omee .fd-doortab.on{background:var(--fd-primary);border-color:var(--fd-primary);color:#fff}

/* THE CONSOLE ADDRESS. The suffix is part of the field, not a caption
   beside it: what is being chosen is the whole name, and a customer
   should see `fenge.dispatch.fengeassist.com` while they type `fenge`. */
.omee .fd-slugbox{display:flex;align-items:stretch}
.omee .fd-slugbox .form-control{border-start-end-radius:0;border-end-end-radius:0;
  border-inline-end:0;min-width:0}
.omee .fd-sfx{display:flex;align-items:center;padding:0 14px;white-space:nowrap;
  background:#f7f8f9;border:1px solid #e5e5e5;border-start-end-radius:5px;
  border-end-end-radius:5px;color:#8392a5;font-size:14px}

/* text-transform:none because Omee capitalises everything inside a
   breadcrumb, which turned "0 of 200 pictures" into "0 Of 200
   Pictures". A hint is a sentence, not a heading. */
.omee .fd-hint{font-size:14px;color:#8392a5;line-height:1.5;margin-top:5px;
  text-transform:none}
/* A hint that OPENS a card body sits the template's own 20px under the
   title - the 5px above is for hints under a field, not under a title. */
.omee .card-body>.fd-hint:first-child,
.omee .card-body>.form-group:first-child>.fd-hint:first-child{margin-top:0}

/* The one line that says whether the address is free. Its colour is set
   by the code that checks - green for free, grey for taken - so nothing
   here decides it. */
.omee #slugNote{min-height:1.2em}

/* Sign-in failures land here. The desk's banner, inside the card. */
.omee .banner{margin:0 0 14px}
.omee .banner:empty{margin:0}

/* The card's own buttons are full width: there is one thing to do on
   this page and it should be the width of the form. */
.omee .codex-authbox .btn{width:100%}

/* =====================================================================
   6. THE DASHBOARD TILES

   Six numbers, one per job state, in the order a job moves through them.
   The colour is the status colour the map and the job list already use -
   a green Unassigned pin and a green Unassigned tile are the same fact,
   and they should not be two different greens.
   ===================================================================== */
.omee .fd-tile{cursor:pointer;transition:all .2s ease}
.omee .fd-tile:hover{border-color:var(--fd-primary)}
.omee .fd-tile .card-body{padding:18px 20px}
.omee .fd-tile-n{font-size:30px;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.omee .fd-tile-l{font-size:14px;color:#8392a5;margin-top:2px}

/* Secondary text inside a dashboard table: an address under a job name,
   a note beside a count. */
.omee .fd-dim{color:#8392a5}

/* =====================================================================
   7. THE PICTURE LIBRARY

   A grid of round frames. ROUND, and `object-fit:cover`, because the
   upload keeps the whole picture rather than cropping it square on the
   way in - cropping on the way out is a stylesheet and can be changed
   its mind about; cropping on the way in throws away what somebody
   chose and cannot be undone.
   ===================================================================== */

.omee .fd-libgrid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

.omee .fd-pic{text-align:center;position:relative}
.omee .fd-pic img,.omee .fd-pic svg{width:64px;height:64px;border-radius:50%;
  object-fit:cover;background:#f7f8f9;display:block;margin:0 auto}
.omee .fd-pic-n{font-size:14px;color:#051722;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omee .fd-pic-k{font-size:13px;color:#8392a5}

/* The remove control appears on hover and only on a picture this account
   owns. A built-in has nothing to remove, and a control that is always
   visible on 20 tiles is 20 invitations to misclick. */
.omee .fd-pic-x{position:absolute;top:-4px;right:8px;width:20px;height:20px;
  border-radius:50%;background:#fff;border:1px solid #e5e5e5;color:#c0392b;
  font-size:13px;line-height:18px;cursor:pointer;opacity:0;transition:opacity .15s}
.omee .fd-pic:hover .fd-pic-x{opacity:1}
.omee .fd-pic-x:hover{background:#c0392b;color:#fff;border-color:#c0392b}

/* `hidden` LOSES TO A display RULE, every time. The attribute is only
   `display:none` from the user-agent sheet, so any class here that sets
   display beats it and the empty preview sits on the page looking like a
   missing picture. Same fault the desk had with `#app.desk[hidden]`. */
.omee .fd-libprev[hidden]{display:none}
.omee .fd-libprev{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.omee .fd-libprev img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:#f7f8f9}

.omee .fd-logobox{display:flex;align-items:center;gap:14px}
.omee .fd-logonow{width:64px;height:64px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:#f7f8f9;border-radius:5px}
.omee .fd-logonow img{max-width:100%;max-height:100%}
.omee .fd-logoname{font-size:15px;font-weight:600;color:#16202b}

/* The customer's logo, in place of the wordmark. Bounded by the 80px
   block's height rather than by whatever the file happens to be, so a
   wide letterhead and a square badge both sit right. */
.omee .fd-logo{max-height:40px;max-width:200px;display:block}

/* =====================================================================
   8. THE RECORD PAGES  -  people, and vehicles next

   A list beside a record, both on screen. The list is the thing being
   worked THROUGH; the record is the thing being worked ON.
   ===================================================================== */
.omee .fd-peoplelist{display:flex;flex-direction:column;gap:2px;
  max-height:70vh;overflow:auto}
.omee .fd-person{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:5px;cursor:pointer}
.omee .fd-person:hover{background:#f7f8f9}
.omee .fd-person.on{background:var(--fd-primary-soft)}
.omee .fd-person img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:#f7f8f9;flex:0 0 auto}
.omee .fd-person-n{font-size:14px;color:#051722;line-height:1.3}
.omee .fd-person-s{font-size:13px;color:#8392a5}
.omee .fd-person.off .fd-person-n{color:#8392a5}

/* An expiry that has passed, or is about to. The only colour on the
   list, because it is the only thing on it that is urgent. */
.omee .fd-due{color:#c98a12}
.omee .fd-over{color:#c0392b;font-weight:600}

.omee .fd-recordtop{display:flex;gap:16px;align-items:flex-start}
.omee .fd-recordfields{flex:1 1 auto}
.omee .fd-avatarpick{width:72px;height:72px;border-radius:50%;flex:0 0 auto;
  background:#f7f8f9;cursor:pointer;overflow:hidden;position:relative;
  border:1px solid #e5e5e5}
.omee .fd-avatarpick img,.omee .fd-avatarpick svg{width:100%;height:100%;
  object-fit:cover;display:block}
.omee .fd-avatarpick:hover{border-color:var(--fd-primary)}

.omee .fd-two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.omee .fd-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
@media (max-width:700px){
  .omee .fd-two,.omee .fd-three{grid-template-columns:1fr}
}

.omee .fd-saverow{display:flex;align-items:center;gap:14px}

/* ---- the picture picker, shared by both record pages ---------------- */
.omee .fd-pickwrap[hidden]{display:none}
.omee .fd-pickwrap{position:fixed;inset:0;z-index:20;background:rgba(5,23,34,.45);
  display:flex;align-items:center;justify-content:center;padding:24px}
.omee .fd-pickbox{background:#fff;border-radius:8px;padding:20px;max-width:640px;
  width:100%;max-height:80vh;overflow:auto}
.omee .fd-pickhead{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;font-size:15px;color:#16202b}
.omee .fd-pickx{cursor:pointer;color:#8392a5;font-size:20px;line-height:1}
.omee .fd-pickx:hover{color:#c0392b}

/* Omee capitalises every form label, which turns "What the desk shows"
   into "What The Desk Shows" and a sentence into a headline. The labels
   on these pages are written as sentences on purpose. */
.omee .form-label{text-transform:none}

/* ---- the fleet record's add-a-row forms and its one computed figure -- */
.omee .fd-addrow[hidden]{display:none}
.omee .fd-addrow{background:#f7f8f9;border-radius:6px;padding:14px 16px 4px;
  margin-bottom:16px}

/* CONSUMPTION IS THE ONLY NUMBER ON THIS PAGE NOBODY TYPED, so it is
   drawn as a figure rather than as a field - there is nowhere to put a
   cursor, which is the point. */
.omee .fd-consumption{display:flex;gap:26px;align-items:baseline;
  padding:0 0 14px}
.omee .fd-cons-n{font-size:24px;font-weight:600;color:#16202b;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.omee .fd-cons-l{font-size:14px;color:#8392a5;margin-left:6px}

/* A picture in a dashboard row. Smaller than the record pages' frames -
   these sit in a table of six rows and the name is what is being read;
   the picture is there to make the row findable, not to be looked at. */
.omee .fd-rowpic{width:32px;height:32px;border-radius:50%;object-fit:cover;
  background:#f7f8f9;display:block}

/* ---- THE THEME -------------------------------------------------------
   The brand blue in the rules above reads `--fd-primary`, set on :root
   in desk.css and overwritten at boot when the account has chosen its
   own. TWO EXCEPTIONS, deliberately left as literals: the FengeDispatch
   wordmark and the sign-in tabs. They are OUR mark, on OUR front door,
   seen before anybody has signed in - there is no customer theme to
   apply there, and the product's name should not change colour with
   somebody else's letterhead. */

/* ---- DASHBOARD: THE TWO MAPS -------------------------------------
   Each box is a template card: header, then a body holding the summary
   (template badges) and the map, which takes whatever height is left.
   The header is the press that opens a box; the map stays live. Opened (#homeMaps.fd-one),
   the chosen box spans the row, the other and the cards below are
   hidden, and the height is set from the window by the page. */
.omee .fd-dashbox{display:flex;flex-direction:column}
.omee .fd-dashbox .card-header{cursor:pointer}
.omee .fd-dashbox .card-body{flex:1 1 auto;display:flex;flex-direction:column}
.omee .fd-dashtoggle{color:#8392a5;font-size:16px}
.omee .fd-dashsum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.omee .fd-dashmapwrap{position:relative;flex:1 1 auto;min-height:420px}
.omee .fd-dashmap{position:absolute;inset:0;border:1px solid #e5e5e5;border-radius:5px;background:#f7f8f9;overflow:hidden}
.omee #homeMaps.fd-one [data-box]:not(.fd-open){display:none}
.omee #homeMaps.fd-one .fd-open{grid-column:span 12 / span 12}
.omee #homeMaps.fd-one .fd-open .fd-square{min-height:0}
/* The template's page-gap, under the maps. */
.omee #homeMaps{margin-bottom:24px}