/* Architectural Foundation — app design system (pilot lives here during Phase F).
   Global tokens + reusable components. Org accent comes from the runtime
   --theme-primary (orange for MTS); structural palette is charcoal + warm neutral. */

:root {
    --af-accent: var(--theme-primary, #FF7F50);
    --af-on-accent: var(--color-primary-contrast, #ffffff);
    /* soft tint + readable ink derived from the org accent so they stay on-brand per tenant */
    --af-accent-soft: rgba(var(--theme-primary-rgb, 255, 127, 80), 0.14);
    --af-accent-line: rgba(var(--theme-primary-rgb, 255, 127, 80), 0.40);
    --af-accent-ink: var(--theme-primary-dark, #9a3b18);

    --af-canvas: #fdf8f8;
    --af-surface: #ffffff;
    --af-surface-2: #f7f3f2;
    --af-surface-3: #f1edec;
    --af-char: #181919;
    --af-char-2: #2d2d2d;
    --af-ink: #1c1b1b;
    --af-ink-mut: #444748;
    --af-ink-faint: #747878;
    --af-border: #e5e2e1;
    --af-border-strong: #c4c7c7;
    --af-line: rgba(0,0,0,0.06);

    --af-ok-bg: #e6f4ea;   --af-ok-fg: #1c6b3f;
    --af-warn-bg: #fbf0d8; --af-warn-fg: #6b4e0b;
    --af-info-bg: #e8eef7; --af-info-fg: #2c4a78;
    --af-danger-bg: #ffdad6; --af-danger-fg: #93000a;

    --af-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --af-r-sm: 6px;
    --af-r-md: 10px;
    --af-r-lg: 16px;
    --af-shadow-card: 0 1px 2px rgba(0,0,0,0.04);
    --af-shadow-float: 0 4px 20px rgba(0,0,0,0.08);
    --af-shadow-modal: 0 18px 50px rgba(0,0,0,0.18);
}

/* ---------- Chips ---------- */
.pl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--af-r-sm);
    font-family: var(--af-font); font-size: 11px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.5;
    background: var(--af-surface-3); color: var(--af-ink-mut);
}
.pl-chip--mono { letter-spacing: 0.02em; }
.pl-chip--ok { background: var(--af-ok-bg); color: var(--af-ok-fg); }
.pl-chip--warn { background: var(--af-warn-bg); color: var(--af-warn-fg); }
.pl-chip--info { background: var(--af-info-bg); color: var(--af-info-fg); }
.pl-chip--danger { background: var(--af-danger-bg); color: var(--af-danger-fg); }
.pl-chip--accent { background: var(--af-accent-soft); color: var(--af-char-2); }
.pl-chip--dark { background: var(--af-char); color: #f4f0ef; }

/* ---------- Receipt type tags (reimbursement pops in the org accent) ---------- */
.af-type { display: inline-flex; align-items: center; font-family: var(--af-font); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 9px; border-radius: var(--af-r-sm); white-space: nowrap; }
.af-type--company { background: #eceae6; color: #5f5e5e; }
.af-type--reimb { background: var(--af-accent-soft); color: var(--af-accent-ink); border: 1px solid var(--af-accent-line); }

/* ---------- Summary hero cards ---------- */
.pl-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-summary-card {
    background: var(--af-surface); border: 1px solid var(--af-border);
    border-radius: var(--af-r-md); padding: 16px; text-align: left;
}
.pl-summary-label {
    font-family: var(--af-font); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--af-ink-faint);
}
.pl-summary-value {
    font-family: var(--af-font); font-size: 1.7rem; font-weight: 700;
    color: var(--af-char); line-height: 1.15; margin-top: 6px;
}

/* ---------- Split-pane modal ---------- */
.pl-receipts { font-family: var(--af-font); color: var(--af-ink); }
.pl-modal-body { padding: 0 !important; overflow: hidden; }
.pl-layout { display: grid; grid-template-columns: 44% 56%; gap: 0; min-height: 0; }
.pl-image-pane {
    background: var(--af-surface-3); display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 1.75rem; position: relative;
    box-shadow: inset 0 0 0 1px var(--af-border), inset 0 2px 18px rgba(0,0,0,0.05);
}
.pl-image-pane img {
    max-width: 100%; max-height: 55vh; object-fit: contain; background: #fff;
    border-radius: 8px; cursor: pointer; padding: 6px;
    box-shadow: 0 1px 0 1px var(--af-border), 0 10px 28px rgba(0,0,0,0.12);
}
.pl-image-hint { color: var(--af-ink-faint); font-size: 0.75rem; margin-top: 0.85rem; }
.pl-image-actions {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 0.5rem; background: var(--af-surface);
    border: 1px solid var(--af-border-strong); border-radius: 9999px; padding: 4px;
    box-shadow: var(--af-shadow-card);
}
.pl-detail-pane { padding: 1.75rem; overflow-y: auto; max-height: 72vh; background: var(--af-surface); }

/* ---------- Sections / header ---------- */
.pl-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pl-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--af-border); }
.pl-block-title {
    font-family: var(--af-font); font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--af-ink-faint); margin-bottom: 0.85rem;
}

/* ---------- Form grid ---------- */
.pl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.pl-form-grid .pl-full { grid-column: 1 / -1; }
.pl-field { display: flex; flex-direction: column; }
.pl-label {
    font-family: var(--af-font); font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--af-ink-mut); margin-bottom: 6px;
}
.pl-input, select.pl-input, textarea.pl-input {
    font-family: var(--af-font); font-size: 14px; color: var(--af-ink);
    padding: 9px 11px; border: 1px solid var(--af-border-strong); border-radius: var(--af-r-sm);
    background: var(--af-surface); transition: border-color 0.15s, box-shadow 0.15s; width: 100%;
}
.pl-input:focus, select.pl-input:focus, textarea.pl-input:focus {
    outline: none; border-color: var(--af-accent);
    box-shadow: 0 0 0 3px var(--af-accent-soft);
}

/* ---------- Metadata + audit ---------- */
.pl-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; line-height: 1.5; }
.pl-meta-label { font-weight: 600; color: var(--af-ink-mut); white-space: nowrap; }
.pl-meta-value { color: var(--af-ink); }
.pl-audit-list { max-height: 180px; overflow-y: auto; }
.pl-audit-item { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: var(--af-r-sm); font-size: 12px; line-height: 1.4; }
.pl-audit-item:nth-child(odd) { background: var(--af-surface-2); }
.pl-audit-field { font-weight: 600; color: var(--af-ink-mut); }
.pl-audit-change { color: var(--af-ink-mut); }
.pl-audit-meta { color: var(--af-ink-faint); font-size: 11px; text-align: right; white-space: nowrap; }

/* ---------- Buttons (high-contrast, readable) ---------- */
.pl-btn {
    font-family: var(--af-font); font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
    padding: 10px 18px; border-radius: var(--af-r-sm); cursor: pointer;
    border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px;
    transition: background 0.15s, border-color 0.15s;
}
.pl-btn--primary { background: var(--af-char); color: #ffffff; }
.pl-btn--primary:hover { background: var(--af-char-2); }
.pl-btn--accent { background: var(--af-accent); color: var(--af-on-accent); text-transform: uppercase; font-weight: 700; }
.pl-btn--ghost { background: var(--af-surface); color: var(--af-ink); border-color: var(--af-border-strong); }
.pl-btn--ghost:hover { background: var(--af-surface-2); }
.pl-btn--danger { background: transparent; color: var(--af-danger-fg); border-color: transparent; }
.pl-btn--translucent { background: var(--af-surface); color: var(--af-ink-mut); border: 1px solid var(--af-border-strong); font-weight: 500; }

/* ---------- Foundation components (used by the preview list/shell) ---------- */
.af-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; font-family: var(--af-font); background: var(--af-canvas); color: var(--af-ink); }
.af-side { background: var(--af-char); color: #cfd0d0; padding: 18px 14px; display: flex; flex-direction: column; }
.af-side-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; font-size: 18px; letter-spacing: 0.02em; padding: 4px 8px 18px; }
.af-side-logo .mk { width: 28px; height: 28px; border-radius: 7px; background: var(--af-accent); display: inline-flex; align-items: center; justify-content: center; color: var(--af-on-accent); font-size: 15px; }
.af-side-sec { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #75797a; padding: 16px 10px 6px; }
.af-nav { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--af-r-sm); color: #cfd0d0; font-size: 14px; font-weight: 500; border-left: 3px solid transparent; }
.af-nav.active { background: #232424; color: #fff; border-left-color: var(--af-accent); }
.af-nav.active i { color: var(--af-accent); }
.af-main { padding: 26px 32px; max-width: 1280px; }
.af-topline { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.af-h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--af-char); }
.af-sub { color: var(--af-ink-mut); font-size: 14px; margin-bottom: 22px; }
.af-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.af-stat { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-r-lg); padding: 18px 20px; }
.af-stat .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-ink-faint); }
.af-stat .val { font-size: 30px; font-weight: 700; color: var(--af-char); margin-top: 8px; line-height: 1; }
.af-card { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-r-lg); }
.af-card-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--af-border); font-weight: 600; }
.af-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.af-table th { text-align: left; padding: 11px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--af-ink-faint); border-bottom: 1px solid var(--af-border); }
.af-table td { padding: 13px 20px; border-bottom: 1px solid var(--af-border); }
.af-table tbody tr:nth-child(even) { background: var(--af-surface-2); }
.af-table tbody tr:hover { background: #faf6f5; }
.af-amount { font-weight: 700; color: var(--af-char); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .pl-layout { grid-template-columns: 1fr; }
    .pl-image-pane { max-height: 300px; }
    .pl-detail-pane { max-height: none; }
    .af-shell { grid-template-columns: 1fr; }
}

/* ---------- AF skin for the New Project modal (opt-in via .af-skin) ---------- */
.af-skin.mts-modal { max-width: 920px; }
.af-skin #newProjectForm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
.af-skin #newProjectForm .mts-form-group { margin-bottom: 0; }
.af-skin .af-col-full { grid-column: 1 / -1; }
.af-skin .mts-modal-title { font-family: var(--af-font); font-weight: 600; color: var(--af-char); }
.af-skin .mts-label { font-family: var(--af-font); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--af-ink-mut); }
.af-skin .mts-input, .af-skin .mts-select, .af-skin textarea.mts-input {
    font-family: var(--af-font); border: 1px solid var(--af-border-strong); border-radius: var(--af-r-sm);
}
.af-skin .mts-input:focus, .af-skin .mts-select:focus, .af-skin textarea.mts-input:focus {
    border-color: var(--af-accent); box-shadow: 0 0 0 3px var(--af-accent-soft); outline: none;
}
.af-skin .mts-modal-footer .mts-btn-primary { background: var(--af-char); border-color: var(--af-char); color: #fff; }
.af-skin .mts-modal-footer .mts-btn-primary:hover { background: var(--af-char-2); }
@media (max-width: 720px) { .af-skin #newProjectForm { grid-template-columns: 1fr; } }