/* ClickTime OAuth — shared brand styles for all _Layout pages
   (home, logout, error, grants, diagnostics, access-denied).
   Palette is kept in sync with AccountIndex.css. */

:root {
    --primary-color: #2095FC;
    --primary-hover-color: #1765d3;
    --secondary-color: #BDC0C1;
    --text-color: #333333;
    --secondary-text-color: #555555;
    --background-color: #f0f4f8;
    --white-color: #fff;
    --light-gray-color: #f9f9f9;
    --border-color: #e3e8ee;
    --error-background-color: #FFE5E5;
    --error-text-color: #b3261e;
    --font-family: 'Lato', Arial, sans-serif;
    --border-radius: 0.375rem;
}

html {
    font-size: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.5;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; margin-top: 1.5rem; }
h3 { font-size: 1.05rem; }

h1 .text-muted,
h1 small {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--secondary-text-color);
}

p {
    margin: 0 0 1rem;
    color: var(--secondary-text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover-color);
    text-decoration: underline;
}

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

.page-container {
    max-width: 46rem;
    margin: 2.5rem auto;
    padding: 0 1.25rem;
}

/* Cards that wrap page content */
.welcome-page,
.logout-page,
.logged-out-page,
.error-page,
.diagnostics-page,
.grants-page,
.page-container > .row {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 0.25rem 0.5rem rgba(16, 42, 67, 0.06);
    padding: 2rem;
}

/* Navbar ---------------------------------------------------------------- */

.nav-page .custom-navbar {
    background-color: var(--white-color);
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ClickTime-style blue band beneath the white logo bar */
.nav-page .custom-navbar-accent {
    height: 0.375rem;
    background-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(16, 42, 67, 0.08);
}

.nav-page .custom-navbar-brand {
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-page .custom-navbar-brand:hover {
    text-decoration: none;
}

.nav-page .icon-banner {
    display: block;
}

.nav-page .custom-navbar-subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--secondary-text-color);
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-color);
    white-space: nowrap;
}

.nav-page .custom-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-page .custom-nav-user {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Always-visible logout button */
.nav-page .btn-logout {
    height: 34px;
    padding: 0 1rem;
    font-size: 0.85rem;
}

.nav-page .btn-logout:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* On narrow screens drop the long email so the logo + Logout button stay on
   one line and Logout is never pushed off-screen. */
@media (max-width: 40rem) {
    .nav-page .custom-nav-user {
        display: none;
    }
}

/* Buttons --------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 1.25rem;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius);
    background-color: var(--white-color);
    color: var(--text-color);
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

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

.btn-danger {
    background-color: var(--error-text-color);
    border-color: var(--error-text-color);
    color: var(--white-color);
}

.btn-danger:hover {
    background-color: #97201a;
    border-color: #97201a;
    color: var(--white-color);
}

.form-group {
    margin-top: 1rem;
}

/* Welcome / home page --------------------------------------------------- */

.welcome-page ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.welcome-page li {
    padding: 0.4rem 0;
    color: var(--secondary-text-color);
}

.welcome-page dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    margin: 0;
}

.welcome-page dt {
    font-weight: 700;
    color: var(--text-color);
}

.welcome-page dd {
    margin: 0;
    color: var(--secondary-text-color);
}

/* Logged-out page ------------------------------------------------------- */

.logged-out-page iframe {
    display: none;
    width: 0;
    height: 0;
}

.logged-out-page h1 small {
    display: block;
    margin-top: 0.25rem;
}

/* Error page ------------------------------------------------------------ */

.alert {
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
}

.alert-danger {
    background-color: var(--error-background-color);
    color: var(--error-text-color);
    border: 1px solid #f5c2c0;
}

.alert-info {
    background-color: #e8f4ff;
    color: var(--primary-hover-color);
    border: 1px solid #b8ddff;
}

.error-page .request-id {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--secondary-text-color);
}

/* Grants page ----------------------------------------------------------- */

.grants-page .card {
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.grants-page .card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.grants-page .card .card-title img {
    width: 64px;
    height: 64px;
}

.grants-page .card label {
    font-weight: 700;
    color: var(--text-color);
}

/* Diagnostics page ------------------------------------------------------ */

.diagnostics-page .lead {
    margin-bottom: 1.25rem;
}

/* Diagnostics shows two columns, so give it more room than other pages.
   On narrow screens the columns stack (see .col below) and this cap is
   never reached, so it stays mobile-friendly. */
.page-container:has(.diagnostics-page) {
    max-width: 60rem;
}

.diagnostics-page .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.diagnostics-page .col {
    flex: 1;
    min-width: 15rem;
}

.diagnostics-page .card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.diagnostics-page .card-header {
    background-color: var(--light-gray-color);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.diagnostics-page .card-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.diagnostics-page .card-body {
    padding: 1.25rem 1.5rem;
}

.diagnostics-page dl {
    margin: 0;
}

/* Stacked key / value: small uppercase label over a larger, wrapping value */
.diagnostics-page dt {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text-color);
    margin-bottom: 0.2rem;
}

.diagnostics-page dd {
    display: block;
    margin: 0 0 1.15rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text-color);
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Trim the trailing gap before the card's bottom padding, whether the last
   value sits in a <dl> (Claims) or is a bare <dd> (Properties' Clients). */
.diagnostics-page .card-body > dl:last-child dd,
.diagnostics-page .card-body > dd:last-child {
    margin-bottom: 0;
}