/* Drayage Cloud portal (app.drayagecloud.com) — the few classes the tenant package does not already have.
   Load third, after drayage-tokens.css and drayage-components.css. Tokens only: no literal colour, size or
   radius here that the token sheet or the type/spacing scale does not already carry. Prefix: dcp-. */

/* Phone gutter: 16px sides (the tenant page's 24px is for wider windows). */
@media (max-width:560px){
  .dc-page{padding:24px 16px 40px}
  .dc-topbar{padding:0 16px}
  .dc-topbar__brand{white-space:nowrap}
  .dc-topbar__rule,.dc-topbar__page{display:none}
}

/* Signed out — one narrow card, centred under the top bar. */
.dcp-signin{max-width:420px;margin:12vh auto 0}
.dcp-signin__card{padding:24px;display:flex;flex-direction:column;gap:16px}
.dcp-signin__card .dc-btn{width:100%}
.dcp-signin__head{display:flex;flex-direction:column;gap:8px}

/* Header row: title and lede on the left, who is signed in on the right; wraps on a phone. */
.dcp-head{display:flex;flex-direction:column;gap:8px}
.dcp-head__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dcp-head__row .dc-title{flex:1 1 auto}
.dcp-who{display:flex;align-items:baseline;gap:8px;white-space:nowrap;flex-wrap:wrap}
.dcp-who__sep{width:1px;height:12px;background:var(--border);align-self:center}

/* A section: h2 (or nothing) above a stack of cards, 12px apart; cards 8px apart. */
.dcp-section{display:flex;flex-direction:column;gap:12px}
.dcp-stack{display:flex;flex-direction:column;gap:8px}

/* Company card (the single view) — name, address, and its admin pages. */
.dcp-company{padding:14px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Company row (the list, for a person in several companies) — the whole card is one link to that company's view. */
.dcp-pick{padding:14px 16px;display:flex;align-items:center;gap:16px;color:var(--text);text-decoration:none;cursor:pointer;transition:var(--state-fade)}
.dcp-pick:hover{background:var(--surface-hover);text-decoration:none}
.dcp-pick:active{background:var(--surface-pressed)}
.dcp-pick .dc-btn{pointer-events:none}
/* The single view's header carries the company address under its name. */
.dcp-head__host{font:400 12.5px/1.3 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.dcp-company__text{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:5px}
.dcp-host{font:400 11.5px/1.3 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.dcp-company__ways{display:flex;gap:8px;flex-wrap:wrap}

/* Profile required — a pill beside the name (warn dot + text, the tenant page's .dc-pill at 22px), and one muted line of reason. */
.dcp-company__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dcp-badge{height:22px;padding:0 8px;gap:6px;font-size:12px;color:var(--status-warn-text)}
.dcp-required{font:400 12.5px/1.4 var(--font-ui);color:var(--text-muted)}
/* An aria-disabled secondary button looks like a [disabled] one (the components sheet styles only [disabled]). */
.dc-btn--secondary[aria-disabled="true"]{background:var(--control-disabled);border-color:var(--border-disabled)}

/* Get Drayage Cloud — the app's name/version, then four equal buttons. */
.dcp-app{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.dcp-app .dc-app__text{flex:none}
.dcp-app__ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dcp-app__ways .dc-btn{min-width:0}
.dcp-app__ways .dc-btn__meta{overflow:hidden;text-overflow:ellipsis}
/* Web carries the company, in UI type (it is a name, not a number), and the accent border ties it to the card. */
.dcp-web{border-color:var(--accent)}
.dcp-for{font:400 12px/1 var(--font-ui);opacity:.7;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Empty and error states — a card with a title line, a sentence, and an action. */
.dcp-notice{padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dcp-notice__title{display:flex;align-items:center;gap:8px;font:600 14px/1.3 var(--font-ui)}
.dcp-notice__text{font:400 13px/1.5 var(--font-ui);color:var(--text-muted);max-width:630px;margin:0}
.dcp-notice .dc-btn{margin-top:4px}
/* Loading — the spinner and one line, in a card, while sign-in or Try again waits on the registry. */
.dcp-loading{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--font-ui);color:var(--text-muted);padding:16px}

@media (max-width:560px){
  .dcp-company{align-items:stretch}
  .dcp-company__ways{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .dcp-app__ways{grid-template-columns:minmax(0,1fr)}
  .dcp-who{white-space:normal}
}

/* Company pages IN the portal (Ralph, 2026-10-13: profile, users and teams are the portal's, never the admin app's;
   CompanyPages). A back link and the company's name above three tabs; each page is a card or a list of rows. */
.dcp-back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font:400 12.5px/1 var(--font-ui);color:var(--accent-text);background:none;border:0;padding:0;cursor:pointer}
.dcp-back:hover{text-decoration:underline}
.dcp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto}
.dcp-tab{height:32px;display:inline-flex;align-items:center;text-decoration:none;padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--text-muted);font:400 13px/1 var(--font-ui);cursor:pointer;white-space:nowrap;transition:var(--state-fade)}
.dcp-tab:hover{color:var(--text)}
.dcp-tab[aria-selected="true"],.dcp-tab[aria-current="page"]{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.dcp-tab[aria-disabled="true"]{color:var(--text-disabled);cursor:default}
.dcp-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dcp-saved{display:inline-flex;align-items:center;gap:6px;font:400 12.5px/1.4 var(--font-ui);color:var(--status-pass-text);margin:0}
.dcp-error{font:400 12.5px/1.4 var(--font-ui);color:var(--status-fail);margin:0}
.dcp-optional{color:var(--text-disabled)}
/* A list in a card: one row per person or team, its actions at the row's end. */
.dcp-rows{display:flex;flex-direction:column}
.dcp-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:48px;padding:8px 16px}
.dcp-row + .dcp-row{border-top:1px solid var(--border)}
.dcp-row--two,.dcp-row--edit{grid-template-columns:minmax(0,1fr) auto}
.dcp-row--one{grid-template-columns:minmax(0,1fr)}
.dcp-row__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.dcp-row__name{font:600 13px/1.25 var(--font-ui);overflow:hidden;text-overflow:ellipsis}
.dcp-row__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:400 12px/1.3 var(--font-ui);color:var(--text-muted);overflow-wrap:anywhere}
.dcp-row__state{display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--font-ui);color:var(--text-muted);white-space:nowrap}
.dcp-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.dcp-chip{height:20px;padding:0 8px;border-radius:var(--radius-pill);border:1px solid var(--border);display:inline-flex;align-items:center;font:400 11.5px/1 var(--font-ui);color:var(--text)}
.dcp-checks{display:flex;gap:12px;flex-wrap:wrap;font:400 13px/1 var(--font-ui)}
.dcp-checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dcp-invite{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:8px;align-items:end}
.dcp-invite--three{grid-template-columns:minmax(0,1fr) 140px 180px auto}
.dcp-invite--two{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:560px){
  .dcp-row{grid-template-columns:minmax(0,1fr) auto}
  .dcp-row__state{grid-column:1;grid-row:2}
  .dcp-invite,.dcp-invite--two,.dcp-invite--three{grid-template-columns:minmax(0,1fr)}
}