/*
    STORM :: crime management

    A blue rail down the left, a white utility bar, a dark page header and a
    light grey working area. Square corners and flat cards throughout.
*/

.cr-root {
    flex-direction: row;
    background: var(--cr-bg);
    color: var(--cr-text);
    font-family: var(--font-ui);
}

/* -- Rail --------------------------------------------------------------- */

.cr-rail {
    display: flex;
    flex-direction: column;
    flex: 0 0 340px;
    background: var(--cr-rail);
    color: #fff;
    min-height: 0;
}

.cr-rail-brand {
    padding: 18px;
    background: var(--cr-rail-dark);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: .16em;
    text-align: center;
    flex: none;
}

.cr-rail-nav { display: flex; flex-direction: column; overflow-y: auto; }

.cr-rail-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 22px;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    flex: none;
}

.cr-rail-item:hover { background: var(--cr-rail-hover); }
.cr-rail-item.is-active { background: var(--cr-rail-hover); }

.cr-rail-exit { margin-top: auto; }

/* -- Main --------------------------------------------------------------- */

.cr-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.cr-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    padding: 8px var(--space-5);
    background: #fff;
    flex: none;
}

.cr-newcase {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cr-link);
    font-family: inherit;
    font-size: var(--text-md);
    cursor: pointer;
}
.cr-newcase:hover { text-decoration: underline; }

.cr-user { display: flex; align-items: center; gap: 10px; }
.cr-user-text { text-align: right; font-size: var(--text-base); line-height: 1.25; }

/* -- Header ------------------------------------------------------------- */

.cr-header-host { flex: none; }

.cr-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-5);
    background: var(--cr-header);
    color: #fff;
}

.cr-header-slim { padding: 12px var(--space-5); }

.cr-header-icon { display: grid; place-items: center; flex: none; }

.cr-header-title { font-size: var(--text-2xl); font-weight: 700; }
.cr-header-sub { font-size: var(--text-base); opacity: .85; margin-top: 1px; }

/* -- Tabs --------------------------------------------------------------- */

.cr-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid var(--cr-border);
}

.cr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border: 0;
    background: none;
    color: var(--cr-text);
    font-family: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    white-space: nowrap;
}

.cr-tab:hover { background: #f2f6fb; }
.cr-tab.is-active { box-shadow: inset 0 -3px 0 var(--cr-link); font-weight: 600; }

/* -- Content ------------------------------------------------------------ */

.cr-scroll { flex: 1 1 auto; min-height: 0; }

.cr-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

/* -- Cards -------------------------------------------------------------- */

.cr-card {
    padding: 18px 20px;
    background: var(--cr-surface);
    box-shadow: var(--shadow-sm);
}

.cr-card-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: 10px; }

.cr-cps { background: var(--cr-cps); }

.cr-notice {
    padding: 14px 20px;
    background: var(--cr-notice);
    color: #3a2f00;
    text-align: center;
    line-height: 1.5;
}

.cr-notice-title { font-weight: 700; letter-spacing: .04em; margin-bottom: 3px; }

.cr-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.cr-link-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--cr-link);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
}
.cr-link-row:hover { text-decoration: underline; }

.cr-arrow { color: var(--cr-text); flex: none; }

.cr-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 0;
    border-bottom: 1px solid #ececec;
}
.cr-list-row:last-child { border-bottom: 0; }

.cr-trail {
    padding: 8px 10px;
    border-left: 3px solid var(--cr-link);
    background: #f6f8fb;
    line-height: 1.45;
}

/* -- Case cards --------------------------------------------------------- */

.cr-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.cr-case-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 20px;
    border: 0;
    background: var(--cr-surface);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .12s ease;
}

.cr-case-card:hover { box-shadow: var(--shadow); }

.cr-case-ref {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--cr-link);
    margin-bottom: 4px;
}

.cr-case-status { font-weight: 700; }
.cr-case-line { font-size: var(--text-md); line-height: 1.45; }

/* -- Case body ---------------------------------------------------------- */

.cr-case-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-4);
    align-items: start;
}

.cr-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }

.cr-team-row { display: flex; align-items: center; gap: var(--space-2); }

.cr-team-name {
    flex: 1 1 auto;
    padding: 8px 12px;
    border: 1px solid var(--cr-border);
    border-radius: var(--radius-sm);
    background: #fbfbfb;
    font-size: var(--text-base);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-team-row input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* -- Narrow screens ----------------------------------------------------- */

@media (max-width: 1280px) {
    .cr-rail { flex-basis: 250px; }
    .cr-case-body { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .cr-rail { flex-basis: 72px; }
    .cr-rail-brand { font-size: 0; padding: 18px 0; }
    .cr-rail-brand::after { content: "CR"; font-size: var(--text-md); letter-spacing: .08em; }
    .cr-rail-item { justify-content: center; padding: 15px 0; }
    .cr-rail-item span { display: none; }
}