/* ============================================================================
   BASE — RESET, GLOBAL TYPOGRAPHY, UTILITIES, ANIMATIONS
   Loaded after variables.css. Bootstrap is loaded BEFORE these files, so this
   layer can override Bootstrap defaults safely.
   ============================================================================ */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-dark);
    background: var(--surface-0);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin: 0 0 var(--spacing-sm);
}

h1 { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--text-muted); }

p { margin: 0 0 var(--spacing-md); line-height: var(--line-height-normal); }

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover { color: var(--primary-color); }

small, .small { font-size: var(--font-size-sm); }

code, kbd, pre, samp {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
}

code {
    background: var(--surface-3);
    color: var(--primary-color);
    padding: 2px 6px;
    border-radius: var(--border-radius-xs);
    font-weight: var(--font-weight-medium);
}

hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
}

/* ── Focus visibility ──────────────────────────────────────────────────── */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--border-radius-xs);
}

/* Hide outline on mouse, restore on keyboard (Bootstrap compat) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ── Custom scrollbar ──────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--border-radius-pill);
    border: 2px solid var(--surface-0);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ── Width utilities (preserved) ───────────────────────────────────────── */
.w-5  { width: 5%  !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }

/* ── Color utilities ───────────────────────────────────────────────────── */
.text-strong    { color: var(--text-strong)    !important; }
.text-default   { color: var(--text-dark)      !important; }
.text-muted     { color: var(--text-muted)     !important; }
.text-subtle    { color: var(--text-subtle)    !important; }
.text-primary   { color: var(--primary-color)  !important; }
.text-secondary { color: var(--secondary-color)!important; }
.text-accent    { color: var(--accent-color)   !important; }
.text-success   { color: var(--success-color)  !important; }
.text-warning   { color: var(--warning-color)  !important; }
.text-danger    { color: var(--danger-color)   !important; }
.text-info      { color: var(--info-color)     !important; }

.bg-primary { background: var(--primary-color) !important; color: #fff; }
.bg-success { background: var(--success-color) !important; color: #fff; }
.bg-warning { background: var(--warning-color) !important; color: #fff; }
.bg-danger  { background: var(--danger-color)  !important; color: #fff; }
.bg-info    { background: var(--info-color)    !important; color: #fff; }
.bg-accent  { background: var(--accent-color)  !important; color: #fff; }
.bg-white   { background: var(--white-color)   !important; }
.bg-light   { background: var(--surface-2)     !important; }
.bg-soft    { background: var(--primary-soft)  !important; color: var(--primary-color); }

.border-danger  { border-color: var(--danger-color)  !important; }
.border-info    { border-color: var(--info-color)    !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--surface-3); }

/* ── App logo ──────────────────────────────────────────────────────────── */
/* The same <x-app-logo /> renders in the sidebar, footer, public navbar and
   auth card. Sizing is context-driven so each surface gets an appropriate
   logo size without per-call inline styles. width:auto preserves the
   image's aspect ratio; max-width:100% keeps it from overflowing on mobile. */
.app-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;            /* breathing room between glyph and wordmark */
    text-decoration: none;
    line-height: 1;
}

.app-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

/* Wordmark sits next to the glyph. Inherits font-head so it picks up the
   same display typeface (Sora) used in the rest of the SESCOM identity.
   Colour defaults to the brand primary (green) so the wordmark reads as
   part of the logo lockup. Footer overrides to white for dark backgrounds. */
.app-logo-text {
    font-family: var(--font-head, inherit);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: .02em;
    color: var(--primary, var(--green, #1a7a3c));
    white-space: nowrap;
}

/* Context overrides — taller in headers, smaller in compact navbars */
.sidebar-header   .app-logo-img { max-height: 48px; }
.login-header     .app-logo-img { max-height: 72px; }
.footer-logo      .app-logo-img { max-height: 48px; }
.navbar-brand.app-logo .app-logo-img,
.navbar-brand     .app-logo-img { max-height: 36px; }

/* Wordmark size scales with logo-image size for visual balance */
.sidebar-header   .app-logo-text { font-size: 1.45rem; }
.login-header     .app-logo-text { font-size: 1.85rem; }
.footer-logo      .app-logo-text { font-size: 1.5rem;  color: var(--white, #fff); }
.navbar-brand     .app-logo-text { font-size: 1.3rem; }

@media (max-width: 575px) {
    .login-header   .app-logo-img  { max-height: 56px; }
    .sidebar-header .app-logo-img  { max-height: 40px; }
    .login-header   .app-logo-text { font-size: 1.5rem; }
    .navbar-brand   .app-logo-text { font-size: 1.15rem; }
}

/* ── Page header pattern (admin pages) ─────────────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.page-header__title h1,
.page-title h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-strong);
    margin: 0 0 var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.page-header__subtitle,
.page-title p {
    color: var(--text-muted);
    font-size: var(--font-size-md);
    margin: 0;
    line-height: var(--line-height-normal);
}

.page-header__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
    color: var(--text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--text-subtle);
    padding: 0 var(--spacing-sm);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb-item.active { color: var(--text-strong); font-weight: var(--font-weight-medium); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--text-muted);
}
.empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-md);
}
.empty-state__title {
    color: var(--text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs);
}
.empty-state__description {
    font-size: var(--font-size-md);
    max-width: 36ch;
    margin: 0 0 var(--spacing-md);
}

/* ── Alert (modern soft variants) ──────────────────────────────────────── */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    margin-bottom: var(--spacing-lg);
    box-shadow: none;
    font-size: var(--font-size-md);
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    animation: kf-slide-down 0.25s var(--ease-out);
}
.alert ul {
    margin: 0;
    padding-left: var(--spacing-md);
    list-style: disc;
}
.alert li {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
}
.alert-success { background: var(--success-soft); color: var(--success-dark); border-color: rgba(22, 163, 74, 0.2); }
.alert-warning { background: var(--warning-soft); color: var(--warning-dark); border-color: rgba(217, 119, 6, 0.25); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-dark);  border-color: rgba(220, 38, 38, 0.2); }
.alert-info    { background: var(--info-soft);    color: var(--info-dark);    border-color: rgba(8, 145, 178, 0.2); }

/* ── Inline filter (label-prefix dropdown / input) ─────────────────────── */
.kf-filter {
    display: inline-flex;
    margin: 0;
}

.kf-filter .input-group {
    width: auto;
    flex-wrap: nowrap;
    border-radius: var(--border-radius-pill);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    transition: var(--transition-fast);
}

.kf-filter .input-group:hover {
    border-color: var(--border-strong);
}

.kf-filter .input-group:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

.kf-filter .input-group-text {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0.3rem 0.65rem 0.3rem 0.85rem;
    white-space: nowrap;
    border-right: 1px solid var(--border-light);
    margin: 0;
    line-height: 1.4;
}

.kf-filter .form-select,
.kf-filter .form-control {
    border: 0;
    background-color: transparent;
    color: var(--text-strong);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    padding: 0.3rem 1.85rem 0.3rem 0.65rem;
    min-width: 9rem;
    box-shadow: none !important;
    border-radius: 0;
}

.kf-filter .form-select:focus,
.kf-filter .form-control:focus {
    box-shadow: none !important;
    background-color: var(--surface-2);
    outline: none;
}

/* Multi-filter bar — drops several .kf-filter forms inline with a divider */
.kf-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ── Section / divider ─────────────────────────────────────────────────── */
.section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

/* ── Definition list (key/value pairs on detail pages) ─────────────────── */
.kf-defs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md) var(--spacing-xl);
    margin: 0;
}
.kf-defs > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--spacing-sm);
    align-items: baseline;
    min-width: 0;
}
.kf-defs--narrow > div { grid-template-columns: 7rem 1fr; }
.kf-defs--col { grid-template-columns: 1fr; }
.kf-defs__full { grid-column: 1 / -1; }

/* Stacked variant — dt above dd. Renders each cell as a compact stat tile.
   Combine with the default 2-col outer grid to fit four items in a 2×2 grid. */
.kf-defs--stack {
    gap: var(--spacing-sm) var(--spacing-md);
}
.kf-defs--stack > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);
}
.kf-defs--stack dt {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
}
.kf-defs--stack dd {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
    line-height: 1.2;
}

.kf-defs dt {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    margin: 0;
}
.kf-defs dd {
    margin: 0;
    color: var(--text-default);
    font-size: var(--font-size-md);
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 768px) {
    .kf-defs { grid-template-columns: 1fr; }
    .kf-defs > div { grid-template-columns: 1fr; gap: 2px; }
    .kf-defs dt { font-size: var(--font-size-xs); }
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes kf-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kf-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kf-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.04); opacity: 0.85; }
}

/* Legacy aliases (so existing code that references them keeps working) */
@keyframes slideInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }

/* ── Reduce motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
    body { background: #fff; color: #000; }
    .no-print, #sidebar, .admin-header, .page-header__actions { display: none !important; }
    #content, #content.expanded { margin-left: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}