/* ============================================================================
   Platform Manager (hive.dpstudio.cloud) - shared stylesheet.

   The console is deliberately STANDALONE: it must render when no tenant resolves, so it does not
   pull the KATANA stack or the per-tenant application CSS. What it stopped being standalone about
   is COLOUR - the brand accent and the status hues now come from GUI/tokens.css instead of being
   a fourth private copy of the palette.

   Its surfaces stay dark on purpose. This is the operator console for the whole platform, and
   looking unmistakably different from a tenant's application is the point: an operator who has
   both open must never mistake one for the other.
   ============================================================================ */

@import url("../tokens.css");

:root
{
    /* Dark surfaces, specific to this console. */
    --adm-bg:            #0F0F28;
    --adm-surface:       #16163A;
    --adm-surface-alt:   #1C1C46;
    --adm-surface-input: #101030;
    --adm-border:        #2A2A55;
    --adm-border-soft:   #26264F;
    --adm-control:       #44447A;

    --adm-text:          #EEEEEE;
    --adm-text-muted:    #9A9AD0;
    --adm-text-dim:      #7A7AB0;

    /* Accent: the brand orange lifted for legibility on a dark surface. */
    --adm-accent:        #F5A623;
    --adm-accent-hover:  #FFB838;
    --adm-on-accent:     var(--adm-surface-input);

    /* Status pairs: background, then foreground. */
    --adm-ok-bg:      #123D2A;  --adm-ok-fg:      #4ADE80;
    --adm-warn-bg:    #4D2A12;  --adm-warn-fg:    #FBBF24;
    --adm-info-bg:    #1E2A4D;  --adm-info-fg:    #60A5FA;
    --adm-danger-bg:  #3A1C1C;  --adm-danger-fg:  #F87171;

    --adm-radius:     10px;
    --adm-radius-sm:  7px;
}

* { box-sizing: border-box; }

body
{
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--adm-bg);
    color: var(--adm-text);
}

/* Everything clickable says so (directive C1). */
button,
a,
label,
[role="button"],
summary { cursor: pointer; }

button:disabled,
[disabled] { cursor: not-allowed; }

:focus-visible
{
    outline: 2px solid var(--adm-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */

header
{
    background: var(--adm-surface-input);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--adm-border);
}

header h1
{
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo
{
    height: 26px;
    width: 26px;
    object-fit: contain;
}

.header-right
{
    display: flex;
    align-items: center;
    gap: 14px;
}

.who
{
    font-size: 13px;
    color: #8A8AC0;
}

/* ---------------------------------------------------------------- layout */

main
{
    max-width: 1000px;
    margin: 26px auto;
    padding: 0 20px;
}

h2
{
    font-weight: 400;
    font-size: 16px;
    color: #C8C8F0;
    margin: 26px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------- buttons */

.adm-btn
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid var(--adm-control);
    color: #CCCCCC;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
}

.adm-btn:hover:not(:disabled)
{
    background: var(--adm-surface-alt);
    border-color: var(--adm-accent);
    color: var(--adm-text);
}

.adm-btn-primary
{
    background: var(--adm-accent);
    color: var(--adm-on-accent);
    border: none;
    border-radius: var(--adm-radius-sm);
    padding: 10px 22px;
    font-weight: 600;
    font-size: 14px;
}

.adm-btn-primary:hover:not(:disabled) { background: var(--adm-accent-hover); }
.adm-btn-primary:disabled,
.adm-btn:disabled { opacity: .6; }

/* ---------------------------------------------------------------- table */

table
{
    width: 100%;
    border-collapse: collapse;
    background: var(--adm-surface);
    border-radius: var(--adm-radius);
    overflow: hidden;
}

th, td
{
    text-align: left;
    padding: 11px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--adm-border-soft);
}

th
{
    background: var(--adm-surface-alt);
    color: var(--adm-text-muted);
    font-weight: 500;
}

tbody tr:last-child td { border-bottom: none; }

.badge
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Status is carried by an icon as well as a colour, so it survives a colour-blind reader
   and a black-and-white print (same rule as the application badges). */
.ACTIVE       { background: var(--adm-ok-bg);     color: var(--adm-ok-fg); }
.SUSPENDED    { background: var(--adm-warn-bg);   color: var(--adm-warn-fg); }
.PROVISIONING { background: var(--adm-info-bg);   color: var(--adm-info-fg); }
.DELETED      { background: var(--adm-danger-bg); color: var(--adm-danger-fg); }

a.tlink
{
    color: var(--adm-accent);
    text-decoration: none;
}

a.tlink:hover { text-decoration: underline; }

code
{
    background: #0A0A20;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--adm-accent);
}

.row-actions
{
    display: flex;
    gap: 6px;
}

/* ---------------------------------------------------------------- form block

   Note the class name: this is a DIV, not a <form>. Directive B6 - a <form> in the page is one
   missed preventDefault away from a native navigation. Validation is per-control checkValidity(),
   which needs no form ancestor.                                                                */

.adm-form
{
    background: var(--adm-surface);
    padding: 18px;
    border-radius: var(--adm-radius);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: start;
}

.adm-form label
{
    display: block;
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-bottom: 4px;
}

.adm-form input
{
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #33336A;
    background: var(--adm-surface-input);
    color: #FFFFFF;
    border-radius: var(--adm-radius-sm);
    font-family: inherit;
    font-size: 13px;
}

.adm-form input:focus { outline: none; border-color: var(--adm-accent); }
.adm-form input:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* A control the browser rejected. Set explicitly rather than with :invalid, which paints every
   required field red before the operator has typed anything. */
.adm-form input.field-error { border-color: var(--adm-danger-fg); }

.adm-form .adm-form-actions { grid-column: 1 / -1; }

/* The hint lives UNDER the field, never in a placeholder: a placeholder disappears the moment
   the operator starts typing, which is exactly when the hint is needed (directive C3). */
.form-hint
{
    font-size: 11px;
    color: var(--adm-text-dim);
    margin-top: 4px;
    line-height: 1.4;
}

.field-error-text
{
    font-size: 11px;
    color: var(--adm-danger-fg);
    margin-top: 4px;
    min-height: 0;
}

/* ---------------------------------------------------------------- feedback */

.msg
{
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
    align-items: flex-start;
    gap: 10px;
}

.msg.ok { background: var(--adm-ok-bg);     color: var(--adm-ok-fg);     display: flex; }
.msg.ko { background: var(--adm-danger-bg); color: var(--adm-danger-fg); display: flex; }

.loading-cell { color: var(--adm-text-muted); font-style: italic; }

.loading-cell::before
{
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid #33336A;
    border-top-color: var(--adm-accent);
    border-radius: 50%;
    vertical-align: -2px;
    animation: admin-spin .8s linear infinite;
}

@keyframes admin-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce)
{
    .loading-cell::before { animation: none; }
}

/* ---------------------------------------------------------------- dialog

   Replaces window.confirm. A native confirm blocks the whole page, cannot be styled, and reads
   as a browser warning rather than as part of the console - and it is what the application side
   moved away from with GUI.showConfirm.                                                        */

.adm-dialog::backdrop { background: rgba(0, 0, 0, .55); }

.adm-dialog
{
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    color: var(--adm-text);
    padding: 0;
    width: min(420px, 92vw);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.adm-dialog-title
{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--adm-border-soft);
    font-size: 15px;
    font-weight: 500;
}

.adm-dialog-body
{
    padding: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #D8D8F0;
}

.adm-dialog-buttons
{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 18px;
}

/* ---------------------------------------------------------------- login card */

body.adm-login
{
    background: var(--adm-surface-input);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.adm-login .card
{
    background: #1A1A40;
    padding: 36px 32px;
    border-radius: 14px;
    width: 340px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.adm-login h1
{
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-login .brand-logo { height: 32px; width: 32px; }

.adm-login .sub
{
    color: #8A8AC0;
    font-size: 13px;
    margin-bottom: 24px;
}

.adm-login label
{
    display: block;
    font-size: 12px;
    color: #A0A0D0;
    margin: 14px 0 4px;
}

.adm-login input
{
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #33336A;
    background: #12122E;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.adm-login input:focus { outline: none; border-color: var(--adm-accent); }
.adm-login input:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
.adm-login input.field-error { border-color: #FF6B6B; }

.adm-login .adm-btn-primary
{
    width: 100%;
    margin-top: 22px;
    padding: 12px;
    justify-content: center;
}

.adm-login .err
{
    color: #FF6B6B;
    font-size: 13px;
    margin-top: 14px;
    min-height: 18px;
}