@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ===========================
   Admin Dashboard Design System
   =========================== */

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

:root {
    /* Core surfaces */
    --ad-bg:           #F1F5F9;
    --ad-surface:      #FFFFFF;
    --ad-surface-2:    #F8FAFC;
    --ad-sidebar-bg:   #0F172A;
    --ad-sidebar-hover:#1E293B;

    /* Brand colors */
    --ad-primary:      #2563EB;
    --ad-primary-hover:#1D4ED8;
    --ad-primary-muted:#DBEAFE;
    --ad-success:      #10B981;
    --ad-success-muted:#D1FAE5;
    --ad-warning:      #F59E0B;
    --ad-warning-muted:#FEF3C7;
    --ad-danger:       #EF4444;
    --ad-danger-muted: #FEE2E2;
    --ad-info:         #6366F1;
    --ad-info-muted:   #EEF2FF;

    /* Text */
    --ad-text:         #0F172A;
    --ad-text-muted:   #64748B;
    --ad-text-light:   #94A3B8;
    --ad-sidebar-text: #94A3B8;
    --ad-sidebar-active:#FFFFFF;

    /* Borders */
    --ad-border:       #E2E8F0;
    --ad-border-strong:#CBD5E1;

    /* Radius */
    --ad-radius-sm:    6px;
    --ad-radius:       10px;
    --ad-radius-lg:    14px;
    --ad-radius-xl:    20px;

    /* Fonts */
    --ad-font-heading: 'Inter', sans-serif;
    --ad-font-body:    'DM Sans', sans-serif;

    /* Shadows */
    --ad-shadow-xs:    0 1px 2px rgba(15,23,42,0.06);
    --ad-shadow-sm:    0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
    --ad-shadow:       0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
    --ad-shadow-lg:    0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);

    /* Transitions */
    --ad-transition:   all 0.18s ease;
}

body {
    margin: 0;
    font-family: var(--ad-font-body);
    color: var(--ad-text);
    background-color: var(--ad-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ── Card Surface ─────────────── */
.ad-card {
    background-color: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-sm);
    padding: 1.75rem;
    transition: var(--ad-transition);
}

.ad-card:hover {
    box-shadow: var(--ad-shadow);
}

/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ad-font-heading);
    font-weight: 600;
    margin: 0;
    color: var(--ad-text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

p {
    font-family: var(--ad-font-body);
    color: var(--ad-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── Buttons ──────────────────── */
.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--ad-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--ad-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--ad-transition);
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}

.ad-btn:focus-visible {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.ad-btn-primary {
    background-color: var(--ad-primary);
    color: #fff;
    border-color: var(--ad-primary);
}

.ad-btn-primary:hover {
    background-color: var(--ad-primary-hover);
    border-color: var(--ad-primary-hover);
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}

.ad-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.ad-btn-outline {
    background-color: var(--ad-surface);
    color: var(--ad-text);
    border-color: var(--ad-border-strong);
}

.ad-btn-outline:hover {
    background-color: var(--ad-surface-2);
    border-color: var(--ad-text-light);
    transform: translateY(-1px);
}

.ad-btn-danger {
    background-color: var(--ad-danger);
    color: #fff;
    border-color: var(--ad-danger);
}

.ad-btn-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239,68,68,0.35);
    transform: translateY(-1px);
}

.ad-btn-ghost {
    background-color: transparent;
    color: var(--ad-text-muted);
    border-color: transparent;
}

.ad-btn-ghost:hover {
    background-color: var(--ad-surface-2);
    color: var(--ad-text);
}

.ad-btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

.ad-btn-lg {
    padding: 0.8rem 1.75rem;
    font-size: 1rem;
}

.ad-btn-block {
    width: 100%;
}

.ad-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--ad-radius-sm);
}

/* ── Form Controls ────────────── */
.ad-input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm);
    font-family: var(--ad-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ad-text);
    background-color: var(--ad-surface);
    outline: none;
    transition: var(--ad-transition);
    line-height: 1.5;
}

.ad-input::placeholder {
    color: var(--ad-text-light);
}

.ad-input:focus {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.ad-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--ad-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ad-text);
}

.ad-select {
    width: 100%;
    padding: 0.6rem 2rem 0.6rem 0.9rem;
    border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm);
    font-family: var(--ad-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ad-text);
    background-color: var(--ad-surface);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    outline: none;
    cursor: pointer;
    transition: var(--ad-transition);
}

.ad-select:focus {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.ad-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ── Status Badges ────────────── */
.ad-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-family: var(--ad-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger  { background-color: var(--ad-danger-muted);  color: #991B1B; }
.ad-badge-info    { background-color: var(--ad-info-muted);    color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border);        color: var(--ad-text-muted); }

/* ── Toggle Switch ────────────── */
.ad-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ad-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ad-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--ad-border-strong);
    border-radius: 24px;
    transition: var(--ad-transition);
}

.ad-toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    border-radius: 50%;
    transition: var(--ad-transition);
    box-shadow: var(--ad-shadow-xs);
}

.ad-toggle input:checked + .ad-toggle-slider {
    background-color: var(--ad-primary);
}

.ad-toggle input:checked + .ad-toggle-slider::before {
    transform: translateX(20px);
}

/* ── Divider ──────────────────── */
.ad-divider {
    border: none;
    border-top: 1px solid var(--ad-border);
    margin: 0;
}

/* ── Avatar ───────────────────── */
.ad-avatar {
    border-radius: var(--ad-radius-sm);
    object-fit: cover;
    background-color: var(--ad-primary-muted);
    color: var(--ad-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ad-font-heading);
    font-weight: 700;
    flex-shrink: 0;
}

.ad-avatar-sm  { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md  { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg  { width: 48px; height: 48px; font-size: 1.1rem; }

/* ── Logo ─────────────────────── */
.ad-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--ad-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.ad-logo-icon {
    width: 32px;
    height: 32px;
    background-color: var(--ad-primary);
    border-radius: var(--ad-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ad-logo-icon svg {
    display: block;
}

/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger  { color: var(--ad-danger)  !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted   { color: var(--ad-text-muted) !important; }
.text-light   { color: var(--ad-text-light) !important; }