* { box-sizing: border-box; }

/* Palette + type pulled from eliesaab.com's live computed styles:
   body font Futura (weight 300), text rgb(16,15,13), background rgb(251,251,251) */
:root {
    --ink: rgb(16, 15, 13);
    --paper: #fff;
    --ground: rgb(251, 251, 251);
    --line: #e2e2e2;
    --muted: #767676;
}

body {
    font-family: Futura, 'Century Gothic', 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------- topbar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ink);
    color: #fff;
    padding: 18px 32px;
}
.topbar .brand { display: flex; align-items: center; }
.topbar .brand-logo { height: 20px; width: auto; display: block; }
.topbar .links { display: flex; align-items: center; }
.topbar .links a {
    color: #fff;
    text-decoration: none;
    margin-left: 26px;
    font-size: 15px;
    font-weight: 300;
    opacity: 0.85;
}
.topbar .links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.topbar .who { margin-left: 26px; opacity: 0.5; font-size: 13px; }

.topbar .dropdown { position: relative; display: inline-flex; }
.topbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 210px;
    padding: 6px 0;
    z-index: 20;
}
.topbar .dropdown-menu a {
    display: block;
    margin-left: 0;
    padding: 10px 18px;
    white-space: nowrap;
}
.topbar .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.topbar .dropdown:hover .dropdown-menu,
.topbar .dropdown:focus-within .dropdown-menu { display: block; }

.container { max-width: 1000px; margin: 48px auto; padding: 0 24px; }

/* --------------------------------------------------------- login page */
.login-box {
    max-width: 380px;
    margin: 110px auto;
    padding: 48px 40px;
    background: var(--paper);
    border: 1px solid var(--line);
    text-align: center;
}
.login-box .login-logo { width: 220px; height: auto; margin: 0 auto; display: block; }
.login-box .login-subtitle {
    margin: 16px 0 34px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.login-box form { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.login-box label {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

input[type=text], input[type=password], select {
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 15px;
    font-family: inherit;
}
input[type=text]:focus, input[type=password]:focus, select:focus {
    outline: none;
    border-color: var(--ink);
}

button, .button {
    padding: 13px 20px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-align: center;
    font-family: inherit;
}
button:hover, .button:hover { background: #333; border-color: #333; }

/* ---------------------------------------------------------------- hub */
h1 { font-size: 17px; font-weight: 400; margin-bottom: 8px; }
.card-section { margin-bottom: 40px; }
.card-section h2 {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.card {
    display: inline-block;
    padding: 20px 22px;
    margin: 8px 10px 0 0;
    background: var(--paper);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
    transition: border-color 0.15s;
}
.card:hover { border-color: var(--ink); }

.pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.pill {
    display: block;
    padding: 16px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
    text-align: center;
    transition: border-color 0.15s;
}
.pill:hover { border-color: var(--ink); }

.hub-embed {
    /* full-bleed: break out of .container's max-width to use the whole
       viewport, regardless of how narrow/wide the rest of the page is */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 700px;
    border: none;
    border-bottom: 1px solid var(--line);
    display: block;
}

/* --------------------------------------------------------------- admin */
.data-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.data-table th, .data-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.data-table th { color: var(--muted); font-size: 13px; font-weight: 400; }

form label { display: block; margin-bottom: 16px; font-size: 14px; color: #333; }
form label.checkbox { display: flex; align-items: center; gap: 8px; }
.hint-inline { color: var(--muted); font-size: 0.95em; }
fieldset { border: 1px solid var(--line); margin-bottom: 24px; padding: 18px; }
legend { font-size: 13px; padding: 0 8px; color: var(--muted); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 12px; }

.flashes { margin-bottom: 24px; }
.flash { padding: 12px 16px; border: 1px solid; margin-bottom: 8px; font-size: 14px; }
.flash-error { background: #fdf2f2; color: #a11; border-color: #f2c8c8; }
.flash-success { background: #f3f8f4; color: #1f6b32; border-color: #c9e3cd; }

/* ------------------------------------------------------------- scripts */
.script-card { padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 16px; }
.script-card h2 { font-size: 15px; font-weight: 400; border: none; padding: 0; margin: 0 0 8px; color: var(--ink); }
.script-card form, .script-card > a.button { margin-top: 14px; margin-right: 8px; }
button:disabled, .button:disabled { background: var(--muted); border-color: var(--muted); cursor: not-allowed; }
.button-danger { background: #a11; border-color: #a11; }
.button-danger:hover { background: #7d0d0d; border-color: #7d0d0d; }

.status { font-weight: 400; padding: 2px 8px; border: 1px solid; font-size: 0.85em; }
.status-success { color: #1f6b32; border-color: #c9e3cd; background: #f3f8f4; }
.status-failed { color: #a11; border-color: #f2c8c8; background: #fdf2f2; }
.status-stopped { color: #a11; border-color: #f2c8c8; background: #fdf2f2; }
.status-running { color: #8a6d1f; border-color: #ecd9a8; background: #fdf8ec; }
.status-not_ready { color: var(--muted); border-color: var(--line); background: var(--ground); }
.status-unknown { color: var(--muted); border-color: var(--line); background: var(--ground); }