/* ==========================================================================
   Uptime Monitor - Metropolis brand x Material Design
   Brand: black-dominant, Metropolis Blue (#0064FF) accent, warm beige support,
   PP Neue Montreal, generous whitespace, arrow (->) motif.
   Material: elevation system, surface cards, state layers, outlined fields,
   app bar, 8px spacing grid, motion.
   ========================================================================== */

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-Medium.ttf') format('truetype');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette */
    --metro-black: #000000;
    --metro-blue: #0064ff;
    --metro-blue-dark: #0050cc;
    --metro-beige: #cbc0b3;
    --metro-beige-50: #e5dfda;
    --metro-beige-25: #f2efec;
    --metro-dark-grey: #3a3a3a;
    --metro-mid-grey: #6b6b6b;
    --metro-white: #ffffff;

    /* Functional status (muted green per brand; red retained for genuine alarms) */
    --status-up: #3f7a57;
    --status-up-bg: #e7f0ea;
    --status-down: #c5283d;
    --status-down-bg: #fbe9eb;
    --status-degraded: #b26a00;
    --status-degraded-bg: #f8efe0;
    --status-pending: #6b6b6b;
    --status-pending-bg: #efeceb;

    /* Surfaces */
    --bg: #f4f1ee;          /* warm off-white app background */
    --surface: #ffffff;
    --on-surface: #3a3a3a;
    --border: #e5dfda;

    /* Material elevation (dp) */
    --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --elev-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --elev-3: 0 6px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --elev-app: 0 2px 8px rgba(0,0,0,.18);

    /* Shape */
    --radius-card: 10px;
    --radius-control: 8px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(.2, 0, 0, 1);
    --dur: 160ms;

    --font-primary: 'PP Neue Montreal', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--metro-blue); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--metro-blue-dark); text-decoration: underline; }

h1, h2, h3 { color: var(--metro-black); margin: 0; font-weight: 500; }

/* ----- Top app bar ----------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--metro-black);
    box-shadow: var(--elev-app);
    padding: 0 32px;
    height: 64px;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand img { height: 18px; width: auto; display: block; }
.topbar .brand .app-tag {
    color: var(--metro-beige);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-left: 12px;
    margin-left: 2px;
    border-left: 1px solid rgba(255,255,255,.22);
}
.topbar nav { display: flex; align-items: center; gap: 4px; }
.topbar nav a {
    position: relative;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    letter-spacing: .02em;
    padding: 21px 14px;
    border-bottom: 2px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.topbar nav a.active { color: #fff; border-bottom-color: var(--metro-blue); }
.topbar nav .user {
    color: var(--metro-beige);
    font-size: 12px;
    letter-spacing: .04em;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,.18);
}
.topbar nav .user strong { color: #fff; font-weight: 500; }

/* ----- Layout ---------------------------------------------------------- */
.container { max-width: 1180px; margin: 36px auto; padding: 0 32px; }
.footer {
    text-align: right;
    color: var(--metro-mid-grey);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 28px 32px 40px;
    max-width: 1180px;
    margin: 0 auto;
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-head h1 {
    font-size: 30px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.page-head .muted { margin: 6px 0 0; }

/* Black divider motif under main titles */
.page-head::after { content: none; }

.muted { color: var(--metro-mid-grey); }
.empty {
    color: var(--metro-mid-grey);
    padding: 56px 0;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--elev-1);
}

/* Mini heading: uppercase label with thin rule */
.mini-heading {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    color: var(--metro-mid-grey);
}

/* ----- Summary cards --------------------------------------------------- */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.summary-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    box-shadow: var(--elev-1);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.summary-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--metro-beige);
}
.summary-card .label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: var(--metro-mid-grey);
    margin-top: 6px;
}
.summary-card .num { display: block; font-size: 38px; line-height: 1; color: var(--metro-black); }
.summary-card.up::before { background: var(--status-up); }
.summary-card.up .num { color: var(--status-up); }
.summary-card.down::before { background: var(--status-down); }
.summary-card.down .num { color: var(--status-down); }
.summary-card.degraded::before { background: var(--status-degraded); }
.summary-card.degraded .num { color: var(--status-degraded); }
.summary-card.pending::before { background: var(--status-pending); }

/* ----- Cards ----------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--elev-1);
}
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--metro-mid-grey); margin: 0 0 16px; }

/* ----- Tables ---------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--elev-1);
}
.data-table th, .data-table td {
    text-align: left;
    padding: 13px 18px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.data-table thead th {
    background: var(--metro-black);
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    border-bottom: none;
}
.data-table tbody tr { transition: background var(--dur) var(--ease); }
.data-table tbody tr:nth-child(even) { background: var(--metro-beige-25); }
.data-table tbody tr:hover { background: #eef4ff; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .url { color: var(--metro-mid-grey); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table a { font-weight: 500; }

/* ----- Status indicators ---------------------------------------------- */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--status-pending); vertical-align: middle; }
.status-up { background: var(--status-up); }
.status-down { background: var(--status-down); }
.status-degraded { background: var(--status-degraded); }
.status-pending { background: var(--status-pending); }
.status-down-text { color: var(--status-down); font-weight: 500; }

/* Material-style status chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    letter-spacing: .03em;
    font-weight: 500;
    white-space: nowrap;
}
.chip .status-dot { margin: 0; }
.chip-up { background: var(--status-up-bg); color: var(--status-up); }
.chip-down { background: var(--status-down-bg); color: var(--status-down); }
.chip-degraded { background: var(--status-degraded-bg); color: var(--status-degraded); }
.chip-pending { background: var(--status-pending-bg); color: var(--status-pending); }

/* ----- Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-control);
    border: 1px solid var(--metro-beige);
    background: var(--surface);
    color: var(--metro-black);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--metro-beige-25); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--metro-blue);
    border-color: var(--metro-blue);
    color: #fff;
    box-shadow: var(--elev-1);
}
.btn-primary:hover { background: var(--metro-blue-dark); border-color: var(--metro-blue-dark); box-shadow: var(--elev-2); color: #fff; }
.btn-danger { background: var(--status-down); border-color: var(--status-down); color: #fff; box-shadow: var(--elev-1); }
.btn-danger:hover { background: #a51f30; border-color: #a51f30; color: #fff; box-shadow: var(--elev-2); }
.link-btn {
    background: none; border: none; color: rgba(255,255,255,.82);
    cursor: pointer; font-family: inherit; font-size: 14px; padding: 6px 4px;
    transition: color var(--dur) var(--ease);
}
.link-btn:hover { color: #fff; text-decoration: underline; }
.inline { display: inline; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ----- Alerts / snackbars --------------------------------------------- */
.alert {
    padding: 13px 16px;
    border-radius: var(--radius-control);
    margin-bottom: 18px;
    font-size: 14px;
    border-left: 4px solid transparent;
    box-shadow: var(--elev-1);
}
.alert-success { background: var(--status-up-bg); border-left-color: var(--status-up); color: #25563b; }
.alert-error { background: var(--status-down-bg); border-left-color: var(--status-down); color: #8c1d2a; }
.alert-info { background: #e4eeff; border-left-color: var(--metro-blue); color: #003a96; }

/* ----- Auth card ------------------------------------------------------- */
.auth-wrap { min-height: calc(100vh - 230px); display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--elev-3);
    overflow: hidden;
}
.auth-card .auth-head {
    background: var(--metro-black);
    padding: 28px 32px;
    text-align: left;
}
.auth-card .auth-head img { height: 20px; display: block; }
.auth-card .auth-head .tag { color: var(--metro-beige); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-top: 12px; }
.auth-card .auth-body { padding: 28px 32px 32px; }
.auth-card h1 { font-size: 20px; text-transform: none; margin-bottom: 18px; }

/* ----- Forms ----------------------------------------------------------- */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 28px;
    max-width: 760px;
    box-shadow: var(--elev-1);
}
label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--metro-dark-grey); }
label > small { display: block; font-weight: 400; margin-top: 5px; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], select {
    width: 100%;
    margin-top: 7px;
    padding: 11px 13px;
    border: 1px solid var(--metro-beige);
    border-radius: var(--radius-control);
    font-size: 14px;
    font-family: inherit;
    color: var(--metro-dark-grey);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus {
    outline: none;
    border-color: var(--metro-blue);
    box-shadow: 0 0 0 3px rgba(0,100,255,.14);
}
input::placeholder { color: #a9a29a; }
label.check { font-weight: 400; display: flex; align-items: center; gap: 10px; color: var(--metro-dark-grey); }
label.check input { width: auto; margin: 0; accent-color: var(--metro-blue); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; margin: 0 0 20px; background: #fcfbfa; }
legend { font-weight: 500; padding: 0 8px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--metro-mid-grey); }

/* ----- Stat grid (detail) --------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: 28px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--elev-1); }
.stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--metro-mid-grey); }
.stat-value { display: block; font-size: 22px; color: var(--metro-black); margin-top: 6px; }

canvas { max-width: 100%; }

/* ----- Responsive ------------------------------------------------------ */
@media (max-width: 820px) {
    .summary { grid-template-columns: repeat(2, 1fr); }
    .page-head { flex-direction: column; align-items: flex-start; }
    .topbar { padding: 0 18px; gap: 10px; }
    .topbar nav { gap: 0; }
    .topbar nav a { padding: 21px 9px; font-size: 13px; }
    .topbar nav .user { display: none; }
    .container { padding: 0 18px; margin-top: 24px; }
}