/* CCC Dashboard: what the dashboard adds to the contracts app's design system (app.css, copied unchanged).
   Order: English (font and left-to-right fixes), shell (language switch), login, home tiles.
   The admin list uses app.css's .list / .item as the contracts users page does; the admin pages' own bits are last. */

/* ---- English: Montserrat, and the few app.css rules that assume right-to-left ---- */
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(/static/fonts/Montserrat-500.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(/static/fonts/Montserrat-700.ttf) format("truetype")}
html[lang=en] body{font-family:Montserrat,Tajawal,system-ui,sans-serif;line-height:1.55}
html[lang=en] h1{font-weight:700;letter-spacing:-.01em}
[dir=ltr] .top-back .icon{transform:scaleX(-1)}                 /* the sprite's "back" points right (RTL) */
[dir=ltr] a.item::after{transform:rotate(-135deg)}              /* the "forward" chevron points right in English */
[dir=ltr] select{padding-left:12px;padding-right:40px;background-position:right 12px center}

/* ---- shell: the language switch in the bar ---- */
.top-lang{margin:0;margin-inline-start:auto;flex-shrink:0}
.top-title+.top-lang{margin-inline-start:0}                     /* the title already fills the room */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--navy);
  font-family:inherit;font-size:var(--t-sm);font-weight:700;line-height:1;cursor:pointer}
.lang-switch:lang(en){font-family:Montserrat,Tajawal,system-ui,sans-serif;font-weight:500}
.lang-switch:lang(ar){font-family:Tajawal,system-ui,sans-serif}
.lang-switch:active{transform:translateY(1px)}
@media (hover:hover){.lang-switch:hover{background:var(--neutral-bg)}}
@media (max-width:480px){
  .top:has(.top-user) .top-title{display:none}                 /* on a phone the logo says where you are; the name gets the room */
  .top:has(.top-user) .top-lang{margin-inline-start:auto}
  .top-user:has([href="/admin"]) .who{display:none}             /* the admin's four buttons leave no room for the name */
  .top-user{max-width:none}
}

/* ---- login ---- */
.page-login{background:linear-gradient(180deg,var(--parchment) 0,var(--parchment) 60%,#EDE5D8 100%)}
.page-login .wrap{display:flex;flex-direction:column;align-items:stretch;min-height:100dvh;padding-top:max(24px,env(safe-area-inset-top))}
.login{width:100%;margin-top:max(16px,6vh);border:0;box-shadow:var(--shadow)}
.login h1{margin-top:var(--s-1)}
.login .btn-primary{margin-top:var(--s-2)}
.login-app{font-size:var(--t-sm);letter-spacing:.02em}
.login-lang{display:flex;justify-content:center;margin:var(--s-5) 0 0}
.login-lang .lang-switch{border-color:transparent;background:transparent;color:var(--ink-2);font-weight:500}
@media (hover:hover){.login-lang .lang-switch:hover{background:rgb(11 37 69 / .06);color:var(--navy)}}

/* ---- home: a greeting, then one tile per tool. Full width on a phone, two columns from 600 px, never under the 48 px tap ---- */
.home-head{margin:var(--s-3) 0 var(--s-5)}
.home-hello{margin:0;font-size:var(--t-md);font-weight:500;color:var(--ink-2)}
.home-head h1{margin:0;font-size:26px;line-height:1.25}
.home-label{margin:0 0 var(--s-3);font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
html[lang=en] .home-label{text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.tile-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);margin:0 0 var(--s-4);padding:0;list-style:none}
@media (min-width:600px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile-grid>li{display:flex;margin:0}
.tile{display:flex;flex:1;align-items:center;gap:var(--s-3);min-height:max(var(--tap),88px);padding:var(--s-4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-2);color:var(--graphite);text-decoration:none;
  box-shadow:0 1px 2px rgb(11 37 69 / .05);transition:border-color .15s,background-color .15s,box-shadow .15s}
.tile:active{background:var(--neutral-bg)}
@media (hover:hover){.tile:hover{border-color:var(--navy);box-shadow:var(--shadow)}}
.tile-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:var(--r-2);
  background:var(--navy);color:#fff}
.tile-icon .icon{width:24px;height:24px}
.tile-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tile-name{font-size:var(--t-lg);font-weight:700;line-height:1.3;color:var(--navy)}
.tile-desc{font-size:var(--t-sm);line-height:1.45;color:var(--ink-2)}
.tile-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tile-tags .badge{min-height:22px;font-size:12px}
.tile-level{background:var(--info-bg);color:var(--navy)}
.tile-soon{background:var(--warn-bg);color:var(--warn)}
.tile-go{color:var(--line-strong)}
[dir=ltr] .tile-go{transform:scaleX(-1)}                      /* the sprite's chevron points left (forward in RTL) */
.home-empty{margin-top:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.home-empty>.icon{color:var(--navy);background:var(--info-bg)}

/* ---- admin: the search, the temporary password shown once, the reset fold ---- */
.people-search{margin:0}
.temp-card h2{margin:0 0 4px;font-size:var(--t-lg);color:var(--graphite)}
.temp-facts{display:grid;gap:var(--s-2);margin:var(--s-3) 0 0}
.temp-facts dt{font-size:var(--t-sm);color:var(--ink-2)}
.temp-facts dd{margin:0;font-weight:700;color:var(--graphite)}
.temp-pw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px;letter-spacing:.08em;user-select:all;-webkit-user-select:all}
.self-password{margin-top:var(--s-4)}
.self-password a{display:inline-flex;align-items:center;min-height:var(--tap)}   /* a full tap, though it reads as a line of text */