/* ---------------------------------------------------------------------
   R.A.M.S. dashboard - site rail + device detail panel.
   Ported from the design handoff (departments/marketing/Dashboard
   mockups design 9-13/design_handoff_rams_dashboard/), using its
   design-system tokens (design-system/tokens/*.css) and this screen's
   spec (README.md / RULES.md). Colors/radii/shadow below are copied
   from those token files, not eyeballed from the screenshots.
   --------------------------------------------------------------------- */

:root {
    --rams-rust: #C1622D;
    --rams-charcoal: #22282C;
    --rams-slate-teal: #33535A;
    --rams-cream: #F4EFE8;
    --rams-white: #FFFFFF;

    /* DRAFT hex per brand guide - flag if a stakeholder asks (RULES.md #17) */
    --status-ok: #3C8B5D;
    --status-watch: var(--rams-rust);
    --status-alert: #B23A2E;
    --status-ok-tint: #E2EFE7;
    --status-watch-tint: #F6E9DF;
    --status-alert-tint: #F5E3E1;

    --neutral-400: #B7BCC0;
    --neutral-500: #9AA0A4;
    --neutral-600: #8A8F93;
    --neutral-700: #747A7E;

    --shadow-card: 0 4px 13px rgba(26, 26, 26, .18);

    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-full: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 29px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--rams-cream);
    padding: var(--space-6) var(--space-4);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--rams-charcoal);
}

button { font-family: inherit; }

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */

.rams-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: var(--rams-white);
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   Left rail
   --------------------------------------------------------------------- */

.rail {
    width: 236px;
    flex: 0 0 auto;
    background: var(--rams-charcoal);
    padding: var(--space-5) var(--space-3);
}

.rail-wordmark {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--rams-white);
    margin: 0 0 var(--space-2) 4px;
}
.rail-wordmark .dot { color: var(--rams-rust); }

.rail-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--neutral-600);
    margin: 0 0 var(--space-5) 4px;
}

.site-group { margin-bottom: var(--space-4); }

.site-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutral-400);
}

.sensor-list { margin-top: var(--space-1); }

.sensor-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    margin-left: 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
}
.sensor-row:hover { background: rgba(255, 255, 255, .06); }
.sensor-row.selected { background: var(--status-watch-tint); }
.sensor-row.selected .sensor-name,
.sensor-row.selected .sensor-location { color: var(--rams-charcoal); }
.sensor-row.dragging { opacity: .4; }
.sensor-row.drop-target { outline: 1px dashed var(--rams-rust); outline-offset: -2px; }

.drag-grip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    cursor: grab;
}
.drag-grip span {
    width: 10px;
    height: 1px;
    background: var(--neutral-600);
    display: block;
}

.sensor-row-text { min-width: 0; }
.sensor-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rams-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sensor-location {
    font-size: 11px;
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-footer-hint {
    font-size: 11px;
    color: var(--neutral-700);
    margin: var(--space-4) 4px 0;
}

/* Roadmap known-next-step #7 (multi-tenant auth): account bar + self-serve
   "Add site" - kept in the rail, in the same left-column visual language
   as everything else here. */

.rail-account {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 var(--space-3) 4px;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rail-account-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--rams-white);
}

.rail-account-links {
    font-size: 11px;
}

.rail-account-links a {
    color: var(--neutral-500);
    text-decoration: none;
}

.rail-account-links a:hover { color: var(--rams-white); }

.rail-empty-note {
    font-size: 12px;
    color: var(--neutral-600);
    margin: 0 0 var(--space-3) 4px;
}

.add-site-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: 7px 8px;
    background: transparent;
    border: 1px dashed var(--neutral-700);
    border-radius: var(--radius-sm);
    color: var(--neutral-500);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.add-site-btn:hover {
    border-color: var(--rams-rust);
    color: var(--rams-white);
}

.add-site-form {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.add-site-form input {
    width: 100%;
    padding: 6px 7px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--neutral-600);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.add-site-form-actions {
    display: flex;
    gap: var(--space-2);
}

.add-site-form-actions button {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-600);
    cursor: pointer;
}

.add-site-submit {
    background: var(--rams-rust);
    color: var(--rams-white);
    border-color: var(--rams-rust) !important;
}

.add-site-cancel {
    background: transparent;
    color: var(--neutral-500);
}

.add-site-msg {
    font-size: 11px;
    color: var(--status-watch);
    margin-top: var(--space-1);
    min-height: 14px;
}

/* ---------------------------------------------------------------------
   Status dot (shared: rail rows, site headers, panel header)
   --------------------------------------------------------------------- */

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    background: var(--neutral-500);
}
.status-dot.ok { background: var(--status-ok); }
.status-dot.watch { background: var(--status-watch); }
.status-dot.breach { background: var(--status-alert); }

.status-dot.pulse {
    background: var(--status-ok);
    box-shadow: 0 0 0 0 rgba(60, 139, 93, .5);
    animation: rams-pulse 2s infinite;
}
@keyframes rams-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(60, 139, 93, .5); }
    70%  { box-shadow: 0 0 0 6px rgba(60, 139, 93, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 139, 93, 0); }
}

/* ---------------------------------------------------------------------
   Right panel
   --------------------------------------------------------------------- */

.panel {
    flex: 1;
    min-width: 0;
    padding: var(--space-6) var(--space-7) var(--space-7);
}

.panel-empty {
    color: var(--neutral-600);
    font-size: 14px;
    padding: var(--space-6);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.panel-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--rams-slate-teal);
    margin: 0 0 4px;
}

.panel-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 25px;
    margin: 0;
    color: var(--rams-charcoal);
}

.panel-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.freshness {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-600);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.badge.ok { background: var(--status-ok-tint); color: var(--status-ok); }
.badge.watch { background: var(--status-watch-tint); color: var(--status-watch); }
.badge.breach { background: var(--status-alert-tint); color: var(--status-alert); }

/* ---- Alert block ---- */

.alert-block {
    background: var(--status-alert-tint);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.alert-block.watch { background: var(--status-watch-tint); }

.alert-item { display: flex; gap: var(--space-3); }

.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--rams-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 16px;
}
.alert-block.breach .icon-circle { color: var(--status-alert); }
.alert-block.watch .icon-circle { color: var(--status-watch); }

.alert-body { min-width: 0; }
.alert-sensor-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rams-charcoal);
    opacity: .7;
    margin: 0 0 2px;
}
.alert-headline {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 4px;
    color: var(--rams-charcoal);
}
.alert-copy {
    font-size: 13px;
    color: var(--rams-charcoal);
    opacity: .85;
    margin: 0;
    line-height: 1.4;
}

.alert-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.alert-explainer {
    font-size: 12px;
    color: var(--rams-charcoal);
    opacity: .65;
    margin: var(--space-2) 0 0;
}

.alert-resolved {
    font-size: 13px;
    font-weight: 600;
    color: var(--rams-charcoal);
    opacity: .7;
}

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

.btn {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--rams-white);
    color: var(--rams-charcoal);
}
.btn-primary { background: var(--rams-rust); color: var(--rams-white); }
.btn-primary:hover { background: #A95527; }
.btn-ghost { background: var(--rams-white); border-color: rgba(34,40,44,.22); color: var(--rams-charcoal); }
.btn-ghost:hover { background: rgba(34,40,44,.05); }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: var(--radius-sm); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--rams-cream);
    font-size: 12px;
    font-weight: 600;
    color: var(--rams-slate-teal);
}

.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.metric-toggle-row { margin-bottom: var(--space-4); }
.range-row { margin-bottom: var(--space-4); }

/* ---- Chart card ---- */

.chart-card {
    background: var(--rams-cream);
    border-radius: var(--radius-md);
    padding: 10px;
}

.chart-svg { width: 100%; height: 160px; display: block; overflow: visible; }
.chart-line { fill: none; stroke-width: 2; }
.chart-guide { stroke: rgba(34, 40, 44, .3); stroke-width: 1; }
.chart-dot { fill: var(--rams-charcoal); }

.chart-tooltip {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--rams-white);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rams-charcoal);
    box-shadow: var(--shadow-card);
    pointer-events: none;
}

.chart-wrap { position: relative; }

.chart-caption {
    font-size: 11px;
    color: var(--neutral-600);
    margin: var(--space-2) 2px 0;
}

/* ---------------------------------------------------------------------
   Responsive - fluid shell, sidebar drops below the panel under ~500px
   (RULES.md #12: no fixed pixel width on top-level containers).
   --------------------------------------------------------------------- */

@media (max-width: 500px) {
    .rail { width: 100%; }
    .panel { padding: var(--space-5); }
}