/*
    Admin console styles - ONLY what the Sales stylesheets have no equivalent for.

    The shell, buttons, grids, forms, chips, dialogs and search boxes all come from
    Styles/Sales/Sales.css and Styles/Sales/Components.css, which the build copies in from
    Clients/Sales/Styles (see TradieOnTheMove.Api.csproj's CopySalesStylesToAdmin target). Colours
    here use the tokens those sheets define (--surface, --border, --danger, ...) so the two apps
    stay in step.
*/

:root {
    /* Status colours. Sales carries these as literals on its lead-status chips; named here because
       this app uses them for more than one thing each. They convey meaning, not chrome. */
    --success: #2E7D32;
    --warning: #B26A00;
    --info: #1565C0;
}

/* ── Login ─────────────────────────────────────────────────────────────────── */

/* The Sales sheet styles the login button as input[type="button"], but the control is a real
   type="submit" (so the browser's password manager sees a genuine submit). */
input.LoginFormElementControl[type="submit"] {
    background: var(--brand);
    color: var(--text-on-brand);
    border: none;
    cursor: pointer;
    font-weight: 600;
}

input.LoginFormElementControl[type="submit"]:hover {
    background: var(--brand-hover);
}

input.LoginFormElementControl[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.SalesButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.SalesButton:disabled:hover {
    background: var(--surface);
}

.SalesButton.Primary:disabled:hover {
    background: var(--brand);
}

/* Anchors styled as buttons (Edit, Cancel, New Tenant) sit beside real <button>s, so they need
   the same box - Components.css only does this inside .SalesFormButtons. */
a.SalesButton {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: normal;
}

/* An action that takes something away: deactivating a tenant, dropping a connection, blocking an
   address, deleting a cached transaction. Outlined rather than filled, so a row of them does not
   turn the grid red. */
.SalesButton.Danger {
    color: var(--danger);
    border-color: var(--danger);
}

.SalesButton.Danger:hover {
    background: var(--danger);
    color: #fff;
}

.SalesButton.Danger:disabled:hover {
    background: var(--surface);
    color: var(--danger);
}

.SalesButton.AdminIconButton {
    padding: 2px 8px;
    min-width: 28px;
}

/* ── Toolbars ──────────────────────────────────────────────────────────────── */

.AdminToolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.AdminToolbar h3 {
    margin: 0;
}

/* Pushes whatever follows it to the right-hand end of a toolbar or a detail header. */
.AdminToolbarSpacer {
    flex: 1 1 auto;
}

/* A toolbar that is a thing in its own right (the connector update bar, the block-an-address
   form) rather than a row of filters above a grid. */
.AdminToolbarCard {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.AdminSelect,
.AdminInput {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    max-width: 100%;
}

.AdminSelect {
    max-width: 320px;
}

.AdminInput {
    width: 180px;
}

.AdminInput.AdminInputWide {
    width: 320px;
}

.AdminSelect:focus,
.AdminInput:focus {
    outline: none;
    border-color: var(--brand);
}

/* .SalesDetailSubheading pulls itself up under a heading with a negative margin; under a toolbar
   there is no heading to tuck beneath. */
.AdminCountLabel {
    margin-top: 0;
    margin-bottom: 8px;
}

.AdminSectionHeading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 28px 0 8px;
}

.AdminSectionHeading h3 {
    margin: 0;
}

.AdminSectionHeading a {
    font-size: 13px;
}

.AdminCachedTransactions,
.AdminTenantStorage {
    margin-top: 28px;
}

.AdminStorageDescription {
    font-size: 12px;
    color: var(--text-muted);
}

.SalesLeadsTable tr.AdminStorageTotal td {
    font-weight: 600;
}

.SalesLeadsTable td.AdminStorageExpand,
.AdminStorageTable th:first-child {
    width: 44px;
}

/* The rows an open area grows: its jobs, and under an open job its files. Tinted and indented so
   they read as belonging to the row above rather than as more areas. */
.SalesLeadsTable tr.AdminStorageGroup td,
.SalesLeadsTable tr.AdminStorageDetail td {
    background: var(--surface-2);
}

.SalesLeadsTable tr.AdminStorageGroup td.AdminStorageExpand {
    padding-left: 28px;
    width: 72px;
}

.SalesLeadsTable tr.AdminStorageOther td {
    color: var(--text-muted);
}

.SalesLeadsTable td.AdminStorageFilesCell {
    padding-left: 72px;
    white-space: normal;
}

.AdminStorageThumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.AdminStorageThumbnail {
    display: block;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.AdminStorageThumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 2px;
}

.AdminStorageThumbnail:hover img {
    border-color: var(--text-muted);
}

.AdminStorageFiles {
    width: 100%;
    border-collapse: collapse;
}

/* Under a grid of thumbnails, when a job has both. */
.AdminStorageThumbnails + .AdminStorageFiles,
.AdminStorageMore {
    margin-top: 10px;
}

.SalesLeadsTable .AdminStorageFiles td {
    padding: 4px 8px 4px 0;
    border: 0;
    background: transparent;
}

/* ── Chips ─────────────────────────────────────────────────────────────────── */

.AdminChip.Success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.AdminChip.Danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.AdminChip.Warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.AdminChip.Info {
    background: var(--info);
    border-color: var(--info);
    color: #fff;
}

/* .AdminChip.Neutral is .SalesStatusChip's own default look - nothing to add. */

/* A chip sitting after text in the same cell ("Acme Ltd  [3 Cached]"). */
.AdminChipInline {
    margin-left: 8px;
}

/* The Connector State chip opens the connections screen. Still reads as status at a glance; the
   hover is what says it can be clicked. */
a.AdminChipLink {
    cursor: pointer;
    text-decoration: none;
}

a.AdminChipLink:hover,
a.AdminChipLink:focus {
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.35);
    outline: none;
}

/* ── Grid cells ────────────────────────────────────────────────────────────── */

.AdminRowLink {
    font-weight: 600;
}

.AdminRowLink:hover {
    text-decoration: underline;
}

/* A column of counts: right-aligned so the digits line up, heading included - a right-aligned
   column under a left-aligned heading reads as a misalignment. */
.SalesLeadsTable th.AdminNumberCell,
.SalesLeadsTable td.AdminNumberCell {
    text-align: right;
}

.AdminMono {
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 12px;
}

/* .SalesLeadsTable cells are nowrap, which is right for names and dates and wrong for free text
   of no fixed length - a reason, a User-Agent, an error message. */
.SalesLeadsTable td.AdminWrapCell {
    white-space: normal;
    word-break: break-word;
    min-width: 180px;
    max-width: 420px;
}

.SalesLeadsTable td input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.SalesLeadsTable td input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.AdminTextDanger {
    color: var(--danger);
}

.AdminTextSuccess {
    color: var(--success);
}

.AdminBlockMessage {
    margin-bottom: 12px;
}

.AdminPayload {
    margin: 0;
    padding: 10px;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 12px;
    color: var(--text);
}

/* ── Tenant form ───────────────────────────────────────────────────────────── */

/* Components.css styles text/email/number inputs in a form row; the Accredo password is the one
   password field in the app. */
.SalesFormRow input[type="password"] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

/* ── Tenant tabs ───────────────────────────────────────────────────────────── */

/* Details | Settings, under a tenant's heading. Underlined tabs rather than the pill buttons used
   for filters: these switch screen, they do not narrow a list. */
.AdminTabs {
    display: flex;
    gap: 4px;
    margin: -8px 0 20px;
    border-bottom: 1px solid var(--border);
}

.AdminTab {
    padding: 8px 14px;
    margin-bottom: -1px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    font-weight: 600;
}

.AdminTab:hover {
    color: var(--text);
}

.AdminTab.Active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* ── Tenant settings ───────────────────────────────────────────────────────── */

/* Sticks under the title bar while there is something unsaved, so Save all is reachable from
   anywhere in a list of well over a hundred rows. */
.AdminPendingBar {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    z-index: 50;
    border-color: var(--warning);
    box-shadow: var(--shadow);
}

body.NotificationBarVisible .AdminPendingBar {
    top: calc(var(--header-height) + var(--notification-height) + 8px);
}

.SalesLeadsTable tr.AdminSettingCategory td {
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    padding-top: 14px;
}

/* Name and description wrap; the grid's cells are nowrap by default, and a description is a
   sentence or three. */
.SalesLeadsTable td.AdminSettingName {
    white-space: normal;
    width: 55%;
    min-width: 260px;
}

.AdminSettingTitle {
    color: var(--text);
    font-weight: 600;
}

.AdminSettingDescription {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.SalesLeadsTable td.AdminSettingValue {
    white-space: normal;
    vertical-align: top;
}

.AdminSettingInput {
    width: 280px;
}

.AdminSettingInput[type="number"],
.AdminSettingInput[type="time"] {
    width: 140px;
}

/* A staged, unsaved edit. The left edge is what catches the eye when scrolling the list; the tint
   is what says which row the Save beside it belongs to. */
.SalesLeadsTable tr.AdminSettingDirty td {
    background: #FFF8E6;
}

.SalesLeadsTable tr.AdminSettingDirty td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

/* Reserved even when empty, so the Value column does not jump sideways as buttons come and go. */
.SalesLeadsTable td.AdminSettingActions {
    width: 150px;
    vertical-align: top;
}

.AdminSettingNote {
    margin-top: 4px;
    max-width: 360px;
    color: var(--warning);
    font-size: 12px;
    line-height: 1.4;
}

.AdminChipList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    max-width: 360px;
}

.AdminRemovableChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: normal;
}

.AdminRemovableChip button {
    border: 0;
    padding: 0 2px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.AdminRemovableChip button:hover {
    color: var(--danger);
}

.AdminRemovableChip button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Remote Help ───────────────────────────────────────────────────────────────
   Class names are the ones Clients/CPDashboard used, so the two consoles' markup stays
   recognisably the same thing while both exist. */

.remote-help-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#RemoteHelpCodeInput {
    font-size: 20px;
    letter-spacing: 4px;
    width: 140px;
    padding: 6px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    color: var(--text);
}

#RemoteHelpCodeInput:focus {
    outline: none;
    border-color: var(--brand);
}

.remote-help-status {
    font-weight: 600;
}

/* Status colours convey meaning - not tokens, and not to be neutralised. */
.remote-help-status-waiting { color: #946200; }
.remote-help-status-live    { color: #1B7F37; }
.remote-help-status-ended   { color: #B3261E; }

.remote-help-meta {
    padding: 4px 2px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* The replay renders at the user's own device dimensions rather than reflowing to the desktop,
   so the agent sees the phone layout the user is describing. */
.remote-help-stage {
    position: relative;
    overflow: auto;
    padding: 16px;
    background: #DADDE2;
    border-radius: var(--radius);
    min-height: 620px;
}

#RemoteHelpPlayer {
    width: fit-content;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.remote-help-history {
    margin-top: 28px;
}

/* Control mode. The outline is the agent's cue that clicks now land on somebody else's device -
   worth being unmistakable about. */
.remote-help-control-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #FFF4E5;
    border: 1px solid #E0B87A;
    border-radius: var(--radius);
    font-size: 14px;
}

.remote-help-field-entry {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remote-help-field-entry input,
.remote-help-field-entry select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 200px;
    font-family: inherit;
    font-size: 14px;
}

.remote-help-stage-controllable,
.remote-help-stage.remote-help-stage-controllable {
    /* pointer, not crosshair: crosshair reads as "draw a selection". */
    cursor: pointer;
    outline: 2px solid #E0B87A;
    outline-offset: -2px;
}

/* The replay iframe must not swallow the clicks the stage is there to read and forward. */
.remote-help-stage-controllable iframe {
    pointer-events: none;
}

/* The queue of unanswered requests. */
.remote-help-queue {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.remote-help-queue-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.remote-help-queue-state {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
}

.remote-help-queue-state.remote-help-queue-live {
    background: #E3F3E6;
    color: #1B7F37;
}

.SalesView p.remote-help-queue-empty {
    margin: 0;
    font-size: 13px;
}

.remote-help-queue-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    margin-top: 6px;
    background: #FFF4E5;
    border: 1px solid #E0B87A;
    border-radius: var(--radius);
    font-size: 14px;
}

.remote-help-queue-who {
    font-weight: 700;
    flex: 1 1 auto;
}

.remote-help-queue-app,
.remote-help-queue-age {
    color: var(--text-muted);
    font-size: 12.5px;
    flex: 0 0 auto;
}

/* Full screen. Two layouts in one: inside the real Fullscreen API the element already fills the
   screen, and position:fixed covers the case where the API was refused or is unavailable - the
   flag alone still gives the agent a fills-the-window view, which is most of the value. */
.remote-help-stage.remote-help-stage-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    padding: 0;
    background: #1c1c1c;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The chrome that rides along inside full screen: the status/exit bar and, when control is
   granted, the control bar. Stacked, full width, and outside the replay itself so neither can
   cover the other. */
.remote-help-fullscreen-chrome {
    width: 100%;
    flex: 0 0 auto;
    cursor: default;
}

.remote-help-fullscreen-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px;
    background: #2b2b2b;
    color: #fff;
}

.remote-help-fullscreen-bar .remote-help-status {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The status colours were chosen against a light card; on the dark bar they need lifting. */
.remote-help-fullscreen-bar .remote-help-status-live    { color: #6FD98A; }
.remote-help-fullscreen-bar .remote-help-status-waiting { color: #F0C674; }
.remote-help-fullscreen-bar .remote-help-status-ended   { color: #FF8A80; }

/* The replay renders at the device's own pixel size. Scaling it up to fill a desktop screen
   would blur it, so it is centred in the space instead. */
.remote-help-stage-fullscreen #RemoteHelpPlayer {
    margin: auto;
}

/* Inside full screen the control bar sits on a dark ground, where its amber card would glare. */
.remote-help-stage-fullscreen .remote-help-control-bar {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    background: #3a331f;
    border-color: #6b5a2e;
    color: #f5e6c8;
}

.remote-help-stage-fullscreen .remote-help-control-bar code {
    color: #ffd98a;
}

.remote-help-stage-fullscreen .remote-help-field-entry input,
.remote-help-stage-fullscreen .remote-help-field-entry select {
    background: #fff;
    color: #222;
}