/* ============================================
   BASE STYLESHEET
   Shared by landing.css, dashboard.css, auth.css
   Fonts, theme tokens, reset, buttons, badges.
   ThinkPHP: {$app.namespace} | {$app.logo}
   ============================================ */

/* ========== FONT FACES ========== */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
}

/* ========== THEME TOKENS (unchanged palette) ========== */
:root {
    --primary: #2e7d32;
    --primary-dark: #1b5e20;
    --primary-light: #4caf50;
    --accent: #66bb6a;

    --text-dark: #222222;
    --text-medium: #555555;
    --text-light: #777777;

    --bg-light: #f4f6f9;
    --bg-white: #ffffff;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-green: 0 20px 55px rgba(10, 40, 15, 0.55);

    --overlay-green: linear-gradient(150deg, rgba(10, 46, 16, 0.88), rgba(27, 94, 32, 0.65) 55%, rgba(10, 30, 12, 0.85));

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --header-h: 72px;
    --header-h-mobile: 64px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* fluid layout gutters — scale down smoothly instead of jumping at breakpoints */
    --gutter: clamp(16px, 4vw, 24px);
    --section-pad: clamp(44px, 7vw, 80px);

    /* status/semantic colors — used by dashboard + app-state pages */
    --success: #28a745;
    --success-bg: rgba(40, 167, 69, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger: #dc3545;
    --danger-bg: rgba(220, 53, 69, 0.1);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);

    /* app shell sizing */
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 84px;
    --topbar-h: 68px;
}

/* ========== RESET ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* Consistent, visible keyboard focus everywhere — accessible + modern */
a, button, input, .btn, .nav-link, .sidebar-link {
    -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.sidebar-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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

/* ========== SHARED UTILITIES ========== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(28px, 5vw, 44px);
}
.section-tag {
    display: inline-block;
    background: rgba(46, 125, 50, 0.1);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}
.section-title {
    font-size: clamp(1.5rem, 5vw, 2.15rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}
.section-desc {
    font-size: clamp(0.92rem, 2vw, 1rem);
    color: var(--text-medium);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.35);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(27, 94, 32, 0.4);
}
.btn-ghost {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }
.btn-white {
    background: #ffffff;
    color: var(--primary-dark);
}
.btn-white:hover { background: var(--accent); color: #ffffff; transform: translateY(-2px); }

iconify-icon { flex-shrink: 0; }

/* ============================================
   BADGES / PILLS (shared: status pages + dashboard)
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }

/* ========== SMALL SCREEN GLOBAL TUNING ========== */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .btn-lg { padding: 13px 26px; font-size: 0.95rem; }
}