/* ============================================================================
   GDS Licence Manager - app styling.
   Palette mirrors the CRA Compliance Board Briefing:
     #1F3864 - primary dark (sidebar, headings, primary buttons)
     #2E74B5 - accent blue (links, secondary heading)
     #FAFAFA - light page background
     #FFFFFF - card surface
     #DEE2E6 - subtle borders
     #6C757D - muted text
     #28A745 / #FF9800 / #DC3545 - success / warning / danger
   ========================================================================== */

:root {
    --gds-dark:    #1F3864;
    --gds-light:   #2E74B5;
    --gds-accent:  #FF9800;
    --gds-bg:      #FAFAFA;
    --gds-border:  #DEE2E6;
    --gds-muted:   #6C757D;
    --gds-text:    #212529;
    --gds-success: #28A745;
    --gds-warning: #F6B73C;
    --gds-danger:  #DC3545;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--gds-text);
    background: var(--gds-bg);
}

h1, h2, h3, h4 {
    color: var(--gds-dark);
    font-weight: 600;
}

h1 { font-size: 1.7rem; margin-bottom: 0.6rem; }
h2 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: 0.6rem; }
h3 { font-size: 1.1rem; margin-top: 1.2rem; margin-bottom: 0.4rem;
     color: var(--gds-light); }

a, .btn-link { color: var(--gds-light); }
a:hover { color: var(--gds-dark); }

.muted, .text-muted { color: var(--gds-muted) !important; }

/* ---- Sidebar ---------------------------------------------------------- */
.top-row.navbar-dark { display: none; }   /* hide the default narrow brand bar */

.sidebar {
    background: var(--gds-dark) !important;
    color: white;
}

.sidebar .navbar-brand {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.1rem 1rem 0.5rem;
    display: block;
    line-height: 1.2;
}

.sidebar .navbar-brand small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.15rem;
}

.sidebar .nav-link,
.sidebar a.nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    margin: 2px 0.6rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.92rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}
.sidebar .nav-link.active {
    background: var(--gds-light);
    color: white;
}

/* User info footer in the sidebar */
.sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}
.sidebar-footer .who {
    display: block;
    font-weight: 600;
    color: white;
    margin-bottom: 0.1rem;
    word-break: break-word;
}
.sidebar-footer .role-badge {
    display: inline-block;
    background: var(--gds-light);
    color: white;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sidebar-footer a.signout {
    display: inline-block;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
.sidebar-footer a.signout:hover { color: white; text-decoration: underline; }

/* ---- Main content area ----------------------------------------------- */
main { background: var(--gds-bg); }
main .content { padding: 1.4rem 1.6rem; max-width: 1400px; }

/* Card containers used to group page sections */
.card-panel {
    background: white;
    border: 1px solid var(--gds-border);
    border-radius: 6px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.card-panel h2:first-child,
.card-panel h3:first-child { margin-top: 0; }

/* ---- Buttons --------------------------------------------------------- */
.btn-primary {
    background-color: var(--gds-dark);
    border-color: var(--gds-dark);
    color: white;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #18305a;
    border-color: #18305a;
    color: white;
}

.btn-warning {
    background-color: var(--gds-accent);
    border-color: var(--gds-accent);
    color: white;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #e08700;
    border-color: #e08700;
    color: white;
}

.btn-outline-primary {
    border-color: var(--gds-light);
    color: var(--gds-light);
}
.btn-outline-primary:hover {
    background: var(--gds-light);
    color: white;
}

.btn-block { width: 100%; }

.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.18rem rgba(31, 56, 100, 0.18);
    border-color: var(--gds-light);
}

/* ---- Tables ---------------------------------------------------------- */
.table {
    background: white;
    border: 1px solid var(--gds-border);
    border-radius: 6px;
    overflow: hidden;
}
.table thead th {
    background: var(--gds-dark);
    color: white;
    border-bottom: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.75rem;
}
.table tbody td {
    padding: 0.55rem 0.75rem;
    border-color: var(--gds-border);
    vertical-align: middle;
}
.table tbody tr:hover { background: rgba(46, 116, 181, 0.06); }

/* Tables whose rows are clickable (Licences listing) — give them a pointer
   cursor and a stronger hover, plus a keyboard focus ring so tab+enter is
   visibly navigable. */
.table.row-clickable tbody tr {
    cursor: pointer;
}
.table.row-clickable tbody tr:hover {
    background: rgba(46, 116, 181, 0.12);
}
.table.row-clickable tbody tr:focus {
    outline: 2px solid var(--gds-light);
    outline-offset: -2px;
}
.table tbody tr td code {
    background: rgba(0, 0, 0, 0.04);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--gds-dark);
}

/* ---- Badges (state, role, etc.) -------------------------------------- */
.state-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.state-Active     { background: #d4edda; color: #155724; }
.state-InTransit  { background: #fff3cd; color: #856404; }
.state-Deactivated{ background: #e2e3e5; color: #383d41; }
.state-Revoked    { background: #f8d7da; color: #721c24; }

.state-Pending    { background: #fff3cd; color: #856404; }
.state-Accepted   { background: #d4edda; color: #155724; }

.role-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--gds-light);
    color: white;
}
.role-pill.role-GdsAdmin  { background: var(--gds-dark); }
.role-pill.role-GdsUser   { background: var(--gds-light); }
.role-pill.role-ClientUser { background: #6f42c1; }

/* ---- Forms ----------------------------------------------------------- */
.form-row { margin-bottom: 0.9rem; }
.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--gds-text);
}
.form-hint {
    color: var(--gds-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
.form-control {
    border-color: var(--gds-border);
    padding: 0.45rem 0.6rem;
}

/* ---- Login / Setup-password card ------------------------------------ */
.auth-card {
    max-width: 440px;
    margin: 7vh auto 2rem;
    padding: 2rem 2.3rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 56, 100, 0.12);
    border-top: 4px solid var(--gds-dark);
}
.auth-card h1 { margin-top: 0; }

/* ---- Alerts ---------------------------------------------------------- */
.alert {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert-info    { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
.alert-success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.alert-warning { background: #fff3cd; color: #856404; border-color: #ffeeba; }
.alert-danger  { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* ---- Invite URL display --------------------------------------------- */
.invite-url-display {
    background: var(--gds-dark);
    color: white;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    font-family: Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
    margin: 0.8rem 0;
}
.invite-url-display a { color: #FFD580; }

/* ---- Validation/error fields preserved --------------------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--gds-danger); }
.validation-message { color: var(--gds-danger); }

.blazor-error-boundary {
    background: var(--gds-danger);
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================================
   Responsive rules
   ----------------------------------------------------------------------------
   The layout (sidebar collapsing into a hamburger) is handled in
   MainLayout.razor.css. The rules below tame typography, padding, tables and
   the login/setup auth-card so the content also fits on a phone.
   ========================================================================== */

/* Tables inside card-panels get a horizontal scroll lane instead of forcing
   the whole page wider than the viewport. The card itself stays the right
   width; only the table body scrolls. */
.card-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-panel > .table { min-width: 560px; }

/* Long .glf URL boxes need to break aggressively rather than overflow. */
.invite-url-display { overflow-wrap: anywhere; }

/* The Bootstrap `.row .col-md-*` already stacks below md (768px), so we
   don't need to override that. We just want the gaps to be tighter on
   phones. */
@media (max-width: 575.98px) {
    main .content { padding: 1rem 0.9rem 2rem; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    .card-panel {
        padding: 0.9rem 0.95rem;
        border-radius: 4px;
    }

    .auth-card {
        margin: 2.5vh 0.75rem 2rem;
        padding: 1.6rem 1.3rem;
    }

    /* Button blocks on the invite/move forms — stack rather than squeeze. */
    .btn-block { width: 100%; }

    /* The Bootstrap .row gaps are 1rem by default — keep them but make sure
       the form-control inputs don't try to be smaller than what the user can
       reasonably tap. */
    .form-control, .form-select { font-size: 16px; /* avoids iOS auto-zoom */ }

    /* Tables: tighten cell padding so more fits. */
    .table thead th { padding: 0.45rem 0.5rem; font-size: 0.78rem; }
    .table tbody td { padding: 0.45rem 0.5rem; font-size: 0.85rem; }
}