/* GAIA Admin - Editorial / Architectural Minimal
   Fraunces (display serif) + Manrope (body sans) + JetBrains Mono (data)
   Cream paper / warm ink + ember tangerine accent
*/

/* ---------- Subtle paper grain ---------- */
.bg-grain {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* ---------- Staggered entrance ---------- */
@keyframes rise {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.stagger > * {
    opacity: 0;
    animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.16s; }
.stagger > *:nth-child(4) { animation-delay: 0.22s; }
.stagger > *:nth-child(5) { animation-delay: 0.28s; }
.stagger > *:nth-child(6) { animation-delay: 0.34s; }
.stagger > *:nth-child(7) { animation-delay: 0.40s; }
.stagger > *:nth-child(8) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
    .stagger > * { opacity: 1; animation: none; }
}

/* ---------- Page Header (serif display) ---------- */
.page-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule-light, #E4DFD2);
}
.dark .page-header { border-bottom-color: #2A2823; }
.page-header__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
    margin-bottom: 0.6rem;
}
.dark .page-header__eyebrow { color: #605C53; }
.page-header__title {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-weight: 350;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
    color: #11110E;
}
.dark .page-header__title { color: #F5F1E8; }
.page-header__title em {
    font-style: italic;
    color: #E0531A;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.dark .page-header__title em { color: #FF7A40; }
.page-header__lead {
    font-size: 0.95rem;
    color: #5C5A52;
    margin-top: 0.75rem;
    max-width: 60ch;
    line-height: 1.6;
}
.dark .page-header__lead { color: #918C81; }

/* ---------- Card / Panel ---------- */
.panel {
    background: #FFFDF7;
    border: 1px solid #E4DFD2;
    border-radius: 6px;
    overflow: hidden;
}
.dark .panel {
    background: #16140F;
    border-color: #2A2823;
}
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #E4DFD2;
}
.dark .panel__header { border-bottom-color: #2A2823; }
.panel__title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 36;
}
.panel__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
}
.dark .panel__eyebrow { color: #605C53; }
.panel__body { padding: 1.4rem; }

/* ---------- KPI ---------- */
.kpi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: #FFFDF7;
    border: 1px solid #E4DFD2;
    border-radius: 6px;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}
.dark .kpi { background: #16140F; border-color: #2A2823; }
.kpi:hover { border-color: #FFA266; transform: translateY(-1px); }
.dark .kpi:hover { border-color: #B53D0F; }
.kpi__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
}
.dark .kpi__label { color: #605C53; }
.kpi__number {
    font-family: 'Fraunces', serif;
    font-weight: 350;
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variation-settings: 'opsz' 144;
    color: #11110E;
    font-variant-numeric: tabular-nums;
}
.dark .kpi__number { color: #F5F1E8; }
.kpi__foot {
    font-size: 0.8rem;
    color: #5C5A52;
    margin-top: auto;
    padding-top: 0.5rem;
}
.dark .kpi__foot { color: #918C81; }
.kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
}
.kpi__delta--up   { color: #047857; }
.kpi__delta--down { color: #BE123C; }
.dark .kpi__delta--up   { color: #34D399; }
.dark .kpi__delta--down { color: #FB7185; }

/* ---------- Table ---------- */
/* :where() keeps specificity at 0 so Tailwind utilities win when needed */
.gtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
:where(.gtable thead th) {
    text-align: left;
    padding: 0.85rem 1.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
    font-weight: 500;
    background: transparent;
    border-bottom: 1px solid #E4DFD2;
    white-space: nowrap;
}
:where(.dark .gtable thead th) { color: #605C53; border-bottom-color: #2A2823; }
:where(.gtable tbody td) {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid #E4DFD2;
    color: #11110E;
    vertical-align: middle;
}
:where(.dark .gtable tbody td) { color: #F5F1E8; border-bottom-color: #2A2823; }
:where(.gtable tbody tr:last-child td) { border-bottom: 0; }
:where(.gtable tbody tr) { transition: background-color 0.15s; }
:where(.gtable tbody tr:hover) { background-color: rgba(228, 223, 210, 0.35); }
:where(.dark .gtable tbody tr:hover) { background-color: rgba(42, 40, 35, 0.5); }
:where(.gtable a) { color: #11110E; font-weight: 600; }
:where(.dark .gtable a) { color: #F5F1E8; }
:where(.gtable a:hover) { color: #E0531A; }
:where(.dark .gtable a:hover) { color: #FF7A40; }
:where(.gtable .num) { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- Pill / Badge ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pill::before {
    content: '';
    width: 5px; height: 5px; border-radius: 999px;
    background: currentColor;
    opacity: 0.7;
}
.pill--neutral  { background: #F4EFE3; color: #5C5A52; border-color: #E4DFD2; }
.pill--info     { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.pill--success  { background: #ECFDF5; color: #047857; border-color: #BBF7D0; }
.pill--warning  { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.pill--danger   { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }
.pill--brand    { background: #FFE1CC; color: #B53D0F; border-color: #FFC59A; }

.dark .pill--neutral  { background: rgba(244, 239, 227, 0.06); color: #918C81; border-color: #2A2823; }
.dark .pill--info     { background: rgba(59, 130, 246, 0.10); color: #93C5FD; border-color: rgba(59, 130, 246, 0.25); }
.dark .pill--success  { background: rgba(16, 185, 129, 0.10); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.25); }
.dark .pill--warning  { background: rgba(245, 158, 11, 0.10); color: #FCD34D; border-color: rgba(245, 158, 11, 0.25); }
.dark .pill--danger   { background: rgba(239, 68, 68, 0.10); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.25); }
.dark .pill--brand    { background: rgba(224, 83, 26, 0.12); color: #FFA266; border-color: rgba(224, 83, 26, 0.30); }

/* Status & priority mappings (composed via macro in templates) */

/* ---------- Chat thread (WhatsApp-like) ---------- */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem;
    max-height: 70vh;
    overflow-y: auto;
    background: #F4EFE3;
    border-radius: 6px;
}
.dark .chat-thread { background: #08070595; }
.chat-msg { display: flex; }
.chat-inbound { justify-content: flex-start; }
.chat-outbound { justify-content: flex-end; }
.chat-bubble {
    max-width: 78%;
    padding: 0.7rem 0.95rem;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-inbound .chat-bubble {
    background: #FFFDF7;
    color: #11110E;
    border-bottom-left-radius: 4px;
    border: 1px solid #E4DFD2;
}
.dark .chat-inbound .chat-bubble {
    background: #16140F;
    color: #F5F1E8;
    border-color: #2A2823;
}
.chat-outbound .chat-bubble {
    background: linear-gradient(135deg, #FF7A40 0%, #E0531A 100%);
    color: #FFF1E6;
    border-bottom-right-radius: 4px;
}
.chat-bubble p { margin: 0; word-wrap: break-word; }
.chat-bubble small {
    display: block;
    margin-top: 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.chat-thread::-webkit-scrollbar { width: 6px; }
.chat-thread::-webkit-scrollbar-track { background: transparent; }
.chat-thread::-webkit-scrollbar-thumb {
    background: rgba(140, 138, 130, 0.3);
    border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
}
.btn--primary {
    background: #11110E;
    color: #FBF8F1;
    border-color: #11110E;
}
.btn--primary:hover { background: #E0531A; border-color: #E0531A; color: #FFFDF7; }
.dark .btn--primary { background: #F5F1E8; color: #0E0D0A; border-color: #F5F1E8; }
.dark .btn--primary:hover { background: #FF7A40; color: #FFFDF7; border-color: #FF7A40; }

.btn--ember {
    background: #E0531A;
    color: #FFFDF7;
    border-color: #E0531A;
}
.btn--ember:hover { background: #B53D0F; border-color: #B53D0F; }

.btn--ghost {
    background: transparent;
    color: #11110E;
    border-color: #E4DFD2;
}
.btn--ghost:hover { background: #F4EFE3; border-color: #8A877D; }
.dark .btn--ghost { color: #F5F1E8; border-color: #2A2823; }
.dark .btn--ghost:hover { background: rgba(42, 40, 35, 0.5); border-color: #605C53; }

/* ---------- Form fields ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.field__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
}
.dark .field__label { color: #605C53; }
.field__input,
.field__select {
    background: #FFFDF7;
    border: 1px solid #E4DFD2;
    border-radius: 4px;
    padding: 0.7rem 0.9rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    color: #11110E;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.field__input:focus,
.field__select:focus {
    outline: none;
    border-color: #E0531A;
    box-shadow: 0 0 0 3px rgba(224, 83, 26, 0.12);
}
.dark .field__input,
.dark .field__select {
    background: #16140F;
    border-color: #2A2823;
    color: #F5F1E8;
}
.dark .field__input:focus,
.dark .field__select:focus {
    border-color: #FF7A40;
    box-shadow: 0 0 0 3px rgba(255, 122, 64, 0.18);
}

/* ---------- Empty states ---------- */
.empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
}
.empty__icon {
    width: 48px; height: 48px;
    margin: 0 auto 1.25rem;
    color: #C5BEAB;
    stroke-width: 1.25;
}
.dark .empty__icon { color: #3D3A33; }
.empty__title {
    font-family: 'Fraunces', serif;
    font-weight: 350;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: #11110E;
    font-variation-settings: 'opsz' 72;
}
.dark .empty__title { color: #F5F1E8; }
.empty__lead {
    font-size: 0.9rem;
    color: #5C5A52;
    margin-top: 0.5rem;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}
.dark .empty__lead { color: #918C81; }

/* ---------- Section divider with label ---------- */
.section-rule {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 2.5rem 0 1.25rem;
}
.section-rule::before, .section-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E4DFD2;
}
.dark .section-rule::before, .dark .section-rule::after { background: #2A2823; }
.section-rule__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #8A877D;
}
.dark .section-rule__label { color: #605C53; }

/* ---------- Misc ---------- */
.font-tabular { font-variant-numeric: tabular-nums; }
.divide-rule > * + * { border-top: 1px solid #E4DFD2; }
.dark .divide-rule > * + * { border-top-color: #2A2823; }

/* Selection / focus refinement */
*:focus-visible {
    outline: 2px solid #E0531A;
    outline-offset: 2px;
    border-radius: 3px;
}
.dark *:focus-visible { outline-color: #FF7A40; }