/* ============================================================
   FF Sewing Assets — Design System  ·  "Atelier Console"
   ------------------------------------------------------------
   A refined, editorial operations console. Warm porcelain
   canvas, deep pine-teal primary, burnished amber accent.
   Display type: Fraunces (optical serif) · Body: Public Sans.
   ONE shared token layer for BOTH the admin web surface and
   the manager mobile surface. Every class / token name here
   matches the existing project markup — presentation only.
   ============================================================ */

/* -------------------- DESIGN TOKENS -------------------- */
:root {
    --brand-900: #08313a;
    --brand-800: #0c424d;
    --brand-700: #105563;
    --brand-600: #166e7e;
    --brand-500: #1f8c9d;
    --brand-400: #4aaeba;
    --brand-200: #b4e0e5;
    --brand-100: #ddf0f1;
    --brand-50:  #eef8f8;

    --accent-700: #a85410;
    --accent-600: #c9711d;
    --accent-500: #e29142;
    --accent-100: #fbe8d4;
    --accent-50:  #fdf4ea;

    --success-700: #1a6b41; --success-600: #1f8a52; --success-100: #ddf2e5;
    --danger-700:  #ab2018; --danger-600:  #cf3127; --danger-100:  #fbe2df;
    --warn-700:    #855208; --warn-600:    #b5780f; --warn-100:    #fbecc6;
    --info-600:    #166e7e; --info-100:    #ddf0f1;

    --ink-900: #14201f;
    --ink-700: #364240;
    --ink-500: #647370;
    --ink-400: #8b9893;
    --ink-300: #b4bfbb;
    --line:    #e6ebe7;
    --line-2:  #f1f4ef;
    --surface: #ffffff;
    --surface-2: #fbfbf7;
    --canvas:  #f4f4ec;

    --ds-ink-900: var(--ink-900);
    --ds-ink-800: #21302e;
    --ds-ink-700: var(--ink-700);
    --ds-ink-600: #4c5754;
    --ds-ink-500: var(--ink-500);
    --ds-ink-400: var(--ink-400);
    --ds-ink-300: var(--ink-300);
    --ds-ink-200: var(--line);
    --ds-ink-100: var(--line-2);
    --ds-ink-50:  var(--surface-2);
    --ds-white:   #ffffff;

    --ds-accent:        var(--brand-700);
    --ds-accent-strong: var(--brand-800);
    --ds-accent-bright: var(--brand-600);
    --ds-accent-soft:   var(--brand-100);
    --ds-accent-softer: var(--brand-50);
    --ds-accent-ring:   var(--brand-200);

    --ds-ok: var(--success-600); --ds-ok-soft: var(--success-100); --ds-ok-ring:#bfe6cd;
    --ds-plant: var(--brand-700); --ds-plant-soft: var(--brand-100); --ds-plant-ring: var(--brand-200);
    --ds-warn: var(--warn-600); --ds-warn-soft: var(--warn-100); --ds-warn-ring:#f0d9a3;
    --ds-danger: var(--danger-600); --ds-danger-soft: var(--danger-100); --ds-danger-ring:#f4c9c5;
    --ds-info: var(--info-600); --ds-info-soft: var(--info-100);
    --ds-muted: var(--ink-500); --ds-muted-soft: var(--line);
    --ds-transfer: var(--accent-600); --ds-transfer-soft: var(--accent-100); --ds-transfer-ring:#f3d6c0;

    --ds-bg:        var(--canvas);
    --ds-surface:   var(--surface);
    --ds-surface-2: var(--surface-2);
    --ds-sidebar:   var(--brand-900);
    --ds-sidebar-2: #062730;
    --ds-border:    var(--line);
    --ds-border-strong: #d6ddd7;

    --font-display: 'Fraunces', 'Bricolage Grotesque', Georgia, serif;
    --font-body:    'Public Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
    --ds-font-display: var(--font-display);
    --ds-font-body:    var(--font-body);
    --ds-font-mono:    var(--font-mono);

    --ds-text-xs: 12px; --ds-text-sm: 13px; --ds-text-md: 15px;
    --ds-text-lg: 17px; --ds-text-xl: 21px; --ds-text-2xl: 27px; --ds-text-3xl: 34px;

    --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px;
    --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px; --ds-12: 48px;

    --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
    --ds-r-sm: var(--r-sm); --ds-r-md: var(--r-md); --ds-r-lg: var(--r-lg);
    --ds-r-xl: var(--r-xl); --ds-r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(20,32,31,.05);
    --shadow-sm: 0 1px 2px rgba(20,32,31,.05), 0 2px 6px -2px rgba(20,32,31,.06);
    --shadow-md: 0 2px 4px -2px rgba(20,32,31,.06), 0 10px 26px -8px rgba(20,32,31,.16);
    --shadow-lg: 0 6px 14px -8px rgba(20,32,31,.14), 0 28px 56px -18px rgba(20,32,31,.26);
    --ds-sh-1: var(--shadow-sm);
    --ds-sh-2: var(--shadow-md);
    --ds-sh-3: var(--shadow-lg);
    --ds-sh-accent: 0 10px 24px -8px rgba(16,85,99,.46);
    --ring: 0 0 0 4px rgba(31,140,157,.18);

    --ease: cubic-bezier(.22,.68,.32,1);
    --spring: cubic-bezier(.34,1.32,.5,1);
    --ds-ease: var(--ease);
    --ds-fast: .14s; --ds-med: .24s;
}

/* -------------------- RESET / BASE -------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    font-family: var(--font-body);
    color: var(--ink-900);
    background-color: var(--canvas);
    background-image:
        radial-gradient(1200px 560px at 100% -8%, var(--brand-50), transparent 62%),
        radial-gradient(960px 520px at -12% 2%, var(--accent-50), transparent 58%);
    background-attachment: fixed;
    font-size: var(--ds-text-md); line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4 {
    font-family: var(--font-display);
    color: var(--ink-900); line-height: 1.12;
    letter-spacing: -.015em; font-weight: 600;
    font-optical-sizing: auto;
}
a { color: var(--brand-700); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand-600); }
img { max-width: 100%; display: block; }
::selection { background: var(--brand-200); color: var(--brand-900); }

* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 5px; }

/* -------------------- ICONS -------------------- */
.ico { font-size: 19px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: -0.15em; }
.ico-sm { font-size: 15px; } .ico-lg { font-size: 23px; } .ds-sprite { display: none; }

/* -------------------- TYPE UTILITIES -------------------- */
.ds-display { font-family: var(--font-display); }
.ds-mono { font-family: var(--font-mono); }
.text-muted { color: var(--ink-500); }
.text-strong { color: var(--ink-900); }
.text-xs { font-size: var(--ds-text-xs); }
.text-sm { font-size: var(--ds-text-sm); }

/* -------------------- BUTTONS -------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    padding: 0 19px; height: 44px; border-radius: var(--r-md);
    border: 1px solid transparent; cursor: pointer; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: transform .16s var(--spring), box-shadow .22s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), filter .15s var(--ease);
}
.btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px) scale(.985); }
.btn .ico { font-size: 17px; }
.btn-primary { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: linear-gradient(180deg, var(--brand-600), var(--brand-800)); color:#fff; box-shadow: var(--ds-sh-accent); transform: translateY(-1px); }
.btn-accent { background: linear-gradient(180deg, var(--accent-500), var(--accent-600)); color:#fff; box-shadow: var(--shadow-xs); }
.btn-accent:hover { background: linear-gradient(180deg, var(--accent-500), var(--accent-700)); color:#fff; box-shadow: 0 10px 22px -6px rgba(168,84,16,.46); transform: translateY(-1px); }
.btn-outline, .btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--line); }
.btn-outline:hover, .btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-300); color: var(--ink-900); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-danger { background: var(--danger-600); color:#fff; }
.btn-danger:hover { background: var(--danger-700); color:#fff; }
.btn-link { background: transparent; color: var(--brand-700); height: auto; padding: 5px 9px; font-weight: 600; }
.btn-link:hover { background: var(--brand-50); }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 14px; font-size: .82rem; border-radius: var(--r-sm); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* -------------------- FORMS -------------------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: .84rem; color: var(--ink-700); margin-bottom: 7px; letter-spacing: .005em; }
.req { color: var(--danger-600); }
.form-control {
    width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: .95rem; color: var(--ink-900);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 46px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); appearance: none; -webkit-appearance: none;
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:hover { border-color: var(--ink-300); }
.form-control:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); background: #fff; }
.form-control:disabled { background: var(--surface-2); color: var(--ink-400); cursor: not-allowed; }
textarea.form-control { resize: vertical; min-height: 100px; line-height: 1.55; }
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647370' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; padding-right: 40px;
}
.form-hint { font-size: .8rem; color: var(--ink-400); margin-top: 6px; }

/* -------------------- FORM CARD (add / edit pages) -------------------- */
.form-card { width: 100%; max-width: 980px; }
.form-card form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
.form-card form > .form-group { margin-bottom: 18px; }
.form-card form > input[type="hidden"],
.form-card form > .form-group:has(textarea),
.form-card form > .form-group.full,
.form-card form > .flex,
.form-card form > .alert,
.form-card form > .btn,
.form-card form > .form-actions,
.form-card form > p,
.form-card form > hr { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .form-card form { grid-template-columns: 1fr; }
}

/* -------------------- ALERTS -------------------- */
.alert { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px 13px 15px; border-radius: var(--r-md); font-size: .9rem; margin-bottom: 20px; border: 1px solid transparent; border-left-width: 3px; line-height: 1.45; box-shadow: var(--shadow-xs); }
.alert .ico { margin-top: 1px; }
.alert-success { background: var(--success-100); color: var(--success-700); border-color: #bfe6cd; }
.alert-error   { background: var(--danger-100);  color: var(--danger-700);  border-color: #f4c9c5; }
.alert-warning { background: var(--warn-100);    color: var(--warn-700);    border-color: #f0d9a3; }
.alert-info    { background: var(--brand-100);   color: var(--brand-700);   border-color: var(--brand-200); }

/* -------------------- CARDS -------------------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    padding: 24px; margin-bottom: 20px;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--ds-border-strong); }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 18px; display: flex; align-items: center; gap: 9px; color: var(--ink-900); letter-spacing: -.01em; }
.card-title .ico { color: var(--brand-700); }

/* -------------------- BADGES -------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; border: 1px solid transparent; line-height: 1.5; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.badge-active      { background: var(--success-100); color: var(--success-700); }
.badge-plant       { background: var(--brand-100);   color: var(--brand-700); }
.badge-repair      { background: var(--warn-100);    color: var(--warn-700); }
.badge-inactive    { background: var(--line);        color: var(--ink-500); }
.badge-transferred { background: var(--accent-100);  color: var(--accent-700); }
.badge-type { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .02em; background: var(--brand-900); color: #cfe9ec; padding: 3px 9px; border-radius: 6px; }
.badge-type::before { content: none; }

/* -------------------- DATA TABLE -------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .9rem; }
.data-table thead th { position: sticky; top: 0; z-index: 1; padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; font-family: var(--font-body); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500); background: var(--surface-2); }
.data-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-700); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .14s var(--ease); }
.data-table tbody tr:hover { background: var(--brand-50); }

@media (max-width: 640px) {
    .table-wrap { overflow-x: visible; border: none; border-radius: 0; background: transparent; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tbody tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; padding: 8px 14px; box-shadow: var(--shadow-sm); }
    .data-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); white-space: normal; text-align: right; min-height: 38px; }
    .data-table tbody tr td:last-child { border-bottom: none; }
    .data-table tbody td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); text-align: left; flex: none; }
    .data-table tbody td.cell-actions { justify-content: flex-end; gap: 8px; padding-top: 12px; }
    .data-table tbody td.cell-actions::before { display: none; }
    .data-table tbody td.cell-actions .btn { flex: 1 1 0; max-width: 130px; }
    .data-table tbody td:empty { display: none; }
}

/* -------------------- FILTER BAR -------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 20px; box-shadow: var(--shadow-sm); align-items: center; }
.filter-bar .form-control { width: auto; flex: 1 1 160px; min-height: 44px; }
.filter-bar .btn { height: 44px; flex: none; }

/* -------------------- PAGE HEADER -------------------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.page-title { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; }
.page-subtitle { color: var(--ink-500); font-size: .94rem; margin-top: 5px; }

/* -------------------- STAT CARDS -------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .22s var(--spring), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.stat-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); opacity:0; transition: opacity .22s var(--ease); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--ds-border-strong); }
.stat-card:hover::before { opacity: 1; }
.stat-card.accent-bar::after { content:""; position:absolute; top:22px; left:0; width:3px; height:30px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--brand-600), var(--brand-800)); }
.stat-icon { width: 42px; height: 42px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--brand-100), var(--brand-50)); color: var(--brand-700); margin-bottom: 14px; }
.stat-icon .ico { font-size: 21px; }
.stat-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--ink-900); line-height: 1; letter-spacing: -.02em; }
.stat-label { color: var(--ink-500); font-size: .82rem; margin-top: 7px; font-weight: 500; }

/* -------------------- EMPTY STATE -------------------- */
.empty-state { text-align: center; padding: 52px 20px; color: var(--ink-400); }
.empty-icon { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--brand-50), var(--line-2)); color: var(--ink-400); box-shadow: inset 0 0 0 1px var(--line); }
.empty-icon .ico { font-size: 30px; }

/* -------------------- DETAIL GRID -------------------- */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.detail-item { min-width: 0; }
.detail-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin-bottom: 5px; font-weight: 700; }
.detail-value { font-size: .96rem; color: var(--ink-900); font-weight: 500; }

/* -------------------- PAGINATION -------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; border: 1px solid var(--line); }
.pagination a { background: var(--surface); color: var(--brand-700); transition: background .14s var(--ease), border-color .14s var(--ease); }
.pagination a:hover { background: var(--brand-50); border-color: var(--brand-200); }
.pagination .current { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.pagination .disabled { color: var(--ink-300); background: var(--surface-2); }

/* -------------------- UTILITIES -------------------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: 8px; } .gap-md { gap: 16px; }
.mb-md { margin-bottom: 16px; } .mt-md { margin-top: 16px; }
.val-old { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--ink-300); }
.val-new { color: var(--brand-700); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
    .main-content { animation: fadeIn .4s var(--ease) both; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* -------------------- TABS -------------------- */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 13px 16px; font-size: .88rem; font-weight: 600; color: var(--ink-500); border-bottom: 2px solid transparent; font-family: var(--font-body); transition: color .15s var(--ease), border-color .15s var(--ease); margin-bottom: -1px; }
.tab-btn:hover { color: var(--ink-900); }
.tab-btn.active { color: var(--brand-700); border-bottom-color: var(--brand-700); }
.tab-btn .ico { font-size: 16px; }
.tab-panel { display: none; } .tab-panel.active { display: block; }

/* -------------------- TIMELINE -------------------- */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 18px 26px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink-300); box-shadow: 0 0 0 3px var(--surface); }
.timeline-marker[data-action="create"]        { border-color: var(--success-600); }
.timeline-marker[data-action="transfer"]       { border-color: var(--accent-600); }
.timeline-marker[data-action="repair_in"]      { border-color: var(--warn-600); }
.timeline-marker[data-action="repair_out"]     { border-color: var(--success-600); }
.timeline-marker[data-action="repair"]         { border-color: var(--warn-600); }
.timeline-marker[data-action="status_change"]  { border-color: var(--brand-600); }
.timeline-marker[data-action="update"]         { border-color: var(--info-600); }
.timeline-content { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 16px; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.timeline-action { font-weight: 600; font-size: .88rem; color: var(--ink-900); display: inline-flex; align-items: center; gap: 6px; }
.timeline-time { font-size: .76rem; color: var(--ink-500); white-space: nowrap; }
.timeline-body { font-size: .88rem; color: var(--ink-700); margin-top: 8px; }
.timeline-meta { font-size: .76rem; color: var(--ink-500); margin-top: 4px; }
.timeline-change { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .76rem; }
.timeline-change .arrow { color: var(--ink-400); }
.timeline-field { font-weight: 600; color: var(--ink-700); font-size: .88rem; }

/* -------------------- ACTIVITY FEED -------------------- */
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--ink-300); box-shadow: 0 0 0 3px var(--surface); }
.activity-body { flex: 1; min-width: 0; }
.activity-main { font-size: .88rem; color: var(--ink-700); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.activity-main .badge-type { padding: 2px 7px; font-size: 11px; }
.activity-meta { font-size: .76rem; color: var(--ink-500); margin-top: 3px; }

/* -------------------- CAMPUS LIST -------------------- */
.campus-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.campus-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-700); transition: background .12s var(--ease); }
.campus-list a:last-child { border-bottom: none; }
.campus-list a:hover { background: var(--brand-50); text-decoration: none; }
.campus-list .code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--brand-700); background: var(--brand-100); padding: 4px 8px; border-radius: 6px; flex: none; min-width: 56px; text-align: center; }
.campus-list a.is-plant .code { color: var(--accent-700); background: var(--accent-100); }
.campus-list .nm { flex: 1; font-size: .9rem; font-weight: 500; color: var(--ink-900); }
.campus-list .chev { color: var(--ink-400); display: inline-flex; flex: none; }

/* -------------------- TRANSFER LIST -------------------- */
.xfer-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.xfer-list .row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.xfer-list .row:last-child { border-bottom: none; }
a.xfer-row-link { color: inherit; }
a.xfer-row-link:hover { background: var(--brand-50); text-decoration: none; }
.xfer-list .code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #cfe9ec; background: var(--brand-900); padding: 4px 8px; border-radius: 6px; flex: none; margin-top: 1px; }
.xfer-list .xfer-main { flex: 1; min-width: 0; }
.xfer-list .rt { font-size: .9rem; color: var(--ink-700); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xfer-list .rt b { color: var(--ink-900); font-weight: 600; }
.xfer-list .rt .arrow { color: var(--ink-400); display: inline-flex; flex: none; }
.xfer-list .dt { font-size: .76rem; color: var(--ink-500); margin-top: 3px; }