/*
 * Global Design System for Ads Insight.ai
 * Single source of truth for all design tokens, typography, components, and utilities.
 * All modules MUST use these variables and component classes for consistency.
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* --- Brand / Primary palette --- */
    --brand-primary:        #00e677;   /* Primary green — CTAs, active states */
    --brand-primary-hover:  #00cc6a;   /* Hover on primary green */
    --brand-primary-active: #00b35c;   /* Active/pressed state */
    --brand-primary-muted:  rgba(0, 230, 119, 0.12);
    --brand-primary-light:  #f0fdf4;

    /* --- Blue accent (informational, links) --- */
    --brand-blue:           #2563eb;
    --brand-blue-hover:     #1d4ed8;
    --brand-blue-muted:     rgba(37, 99, 235, 0.12);

    /* --- Semantic colors --- */
    --color-success:        #00e677;
    --color-success-dark:   #0f766e;
    --color-success-light:  #f0fdf4;
    --color-warning:        #f59e0b;
    --color-warning-light:  #fffbeb;
    --color-danger:         #ef4444;
    --color-danger-light:   #fef2f2;
    --color-danger-hover:   #dc2626;
    --color-info:           #0ea5e9;
    --color-info-light:     #f0f9ff;

    /* --- Surface / Background --- */
    --surface-base:         #f8fbff;
    --surface-card:         #ffffff;
    --surface-muted:        #f1f5f9;
    --surface-overlay:      rgba(15, 23, 42, 0.55);

    /* --- Typography --- */
    --font-family-base:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-primary:         #0f172a;
    --text-secondary:       #475569;
    --text-muted:           #94a3b8;
    --text-inverse:         #ffffff;

    /* --- Borders --- */
    --border-subtle:        rgba(15, 23, 42, 0.08);
    --border-default:       rgba(15, 23, 42, 0.14);
    --border-strong:        rgba(15, 23, 42, 0.22);
    --border-brand:         var(--brand-primary);

    /* --- Shadows --- */
    --shadow-xs:    0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-sm:    0 4px 12px -2px rgba(15, 23, 42, 0.10);
    --shadow-md:    0 8px 24px -4px rgba(15, 23, 42, 0.14);
    --shadow-lg:    0 16px 40px -8px rgba(15, 23, 42, 0.18);
    --shadow-focus: 0 0 0 3px rgba(0, 230, 119, 0.25);

    /* --- Border Radius --- */
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-full:  9999px;

    /* --- Spacing scale (multiplier) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* --- Transition --- */
    --transition-fast:   120ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   320ms ease;

    /* --- Z-index stack --- */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-tooltip:   600;
}


/* ============================================================
   2. BASE RESET & TYPOGRAPHY
   ============================================================ */

html { font-size: 16px; }

body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background: var(--surface-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-shell {
    background: var(--surface-base);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

p, small, li {
    color: var(--text-secondary);
}

span { color: inherit; }

a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, a:focus {
    color: var(--brand-blue-hover);
}


/* ============================================================
   3. COMPONENT — BUTTONS
   ============================================================ */

/* Base button reset */
.btn-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast), opacity var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

/* Sizes */
.btn-ui-sm  { padding: 6px 14px;  font-size: 0.8125rem; }
.btn-ui-md  { padding: 9px 20px;  font-size: 0.875rem;  }
.btn-ui-lg  { padding: 11px 28px; font-size: 0.9375rem; }

/* Primary — brand green */
.btn-primary-ui {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #0a2a18;
}
.btn-primary-ui:hover:not(:disabled) {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn-primary-ui:active:not(:disabled) {
    background: var(--brand-primary-active);
    transform: translateY(0);
}

/* Secondary — ghost/outline */
.btn-secondary-ui {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.btn-secondary-ui:hover:not(:disabled) {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Danger */
.btn-danger-ui {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}
.btn-danger-ui:hover:not(:disabled) {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Ghost — icon buttons */
.btn-ghost-ui {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}
.btn-ghost-ui:hover:not(:disabled) {
    background: var(--surface-muted);
    color: var(--text-primary);
}

/* Disabled state */
.btn-ui:disabled,
.btn-ui[disabled],
.btn-ui[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Bootstrap overrides — keep existing Bootstrap button colors aligned */
.btn-brand {
    --bs-btn-color: #0a2a18;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #0a2a18;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: 0, 230, 119;
    --bs-btn-active-bg: var(--brand-primary-active);
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

.btn-brand-success {
    --bs-btn-color: #0a2a18;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #0a2a18;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 0, 230, 119;
    --bs-btn-active-color: #0a2a18;
    --bs-btn-active-bg: var(--brand-primary);
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

/* Bootstrap primary override → use brand blue */
.btn-primary {
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: var(--brand-blue-hover);
    --bs-btn-hover-border-color: var(--brand-blue-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

/* Bootstrap success → use brand green */
.btn-success {
    --bs-btn-color: #0a2a18;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #0a2a18;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

/* Bootstrap danger stays red */
.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-hover);
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}

.btn-secondary {
    border-radius: var(--radius-full) !important;
    font-weight: 600;
}


/* ============================================================
   4. COMPONENT — INPUTS & FORMS
   ============================================================ */

.form-control,
.form-select {
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Unified input class for Tailwind-managed inputs */
.input-ui {
    display: block;
    width: 100%;
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.input-ui:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}

.input-ui::placeholder { color: var(--text-muted); }
.input-ui:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-muted); }


/* ============================================================
   5. COMPONENT — CARDS & SURFACES
   ============================================================ */

.card,
.surface-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.surface-card { padding: 1.5rem; }

.card-hover {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* ============================================================
   6. COMPONENT — BADGES
   ============================================================ */

.badge-ui {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.badge-primary  { background: var(--brand-primary-muted);  color: var(--color-success-dark); }
.badge-blue     { background: var(--brand-blue-muted);     color: var(--brand-blue); }
.badge-warning  { background: rgba(245, 158, 11, 0.12);    color: #92400e; }
.badge-danger   { background: rgba(239, 68, 68, 0.12);     color: #991b1b; }
.badge-neutral  { background: var(--surface-muted);         color: var(--text-secondary); }

/* Legacy class aliases */
.badge-soft-primary { background: var(--brand-blue-muted); color: var(--brand-blue); border-radius: var(--radius-full); padding: 4px 10px; font-weight: 600; }
.badge-soft-success { background: var(--brand-primary-muted); color: var(--color-success-dark); border-radius: var(--radius-full); padding: 4px 10px; font-weight: 600; }


/* ============================================================
   7. COMPONENT — MODALS
   ============================================================ */

/* Unified backdrop */
.modal-backdrop-ui {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 1rem;
}

/* Modal card */
.modal-card-ui {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: modalSlideUp var(--transition-base) both;
}

.modal-card-ui-lg { max-width: 680px; }
.modal-card-ui-xl { max-width: 900px; }

.modal-header-ui {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-body-ui {
    padding: 20px 24px;
}

.modal-footer-ui {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-muted);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   8. COMPONENT — ALERTS
   ============================================================ */

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-weight: 500;
    font-size: 0.875rem;
    border-width: 1px;
    border-style: solid;
}

.alert-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border-color: rgba(0, 230, 119, 0.25);
}

.alert-danger {
    background: var(--color-danger-light);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.25);
}

.alert-warning {
    background: var(--color-warning-light);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.25);
}

.alert-info {
    background: var(--color-info-light);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.25);
}


/* ============================================================
   9. COMPONENT — NAVIGATION / SIDEBAR
   ============================================================ */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
}

.sidebar-link:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: var(--brand-primary-light);
    color: var(--color-success-dark);
    border: 1px solid rgba(0, 230, 119, 0.2);
}

.sidebar-link.active .hgi,
.sidebar-link.active i {
    color: var(--color-success-dark) !important;
}

.folder-title {
    position: relative;
    min-height: 32px;
    border-radius: var(--radius-sm);
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
}

.folder-title strong { font-size: 0.875rem; font-weight: 600; }

.folder-title:hover,
.folder-title:focus-visible {
    background: rgba(148, 163, 184, 0.12);
}

/* Context menus in sidebar */
.context-menu-ui {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.8125rem;
    min-width: 140px;
    overflow: hidden;
    z-index: var(--z-dropdown);
}

.context-menu-ui button {
    display: block;
    width: 100%;
    padding: 9px 14px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    transition: background var(--transition-fast);
    cursor: pointer;
    font-size: 0.8125rem;
}

.context-menu-ui button:hover { background: var(--surface-muted); }

.context-menu-ui button.danger-item {
    color: var(--color-danger);
}

.context-menu-ui button.danger-item:hover {
    background: var(--color-danger-light);
}


/* ============================================================
   10. COMPONENT — TABLES
   ============================================================ */

.table {
    border-color: var(--border-subtle);
    font-size: 0.875rem;
}

.table thead th {
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
}

.table tbody tr {
    background: var(--surface-card);
    transition: background var(--transition-fast);
}

.table tbody tr:hover { background: var(--surface-muted); }

.table tbody tr + tr {
    border-top: 1px solid var(--border-subtle);
}

.table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--text-primary);
}


/* ============================================================
   11. COMPONENT — PROGRESS STEPS (Onboarding)
   ============================================================ */

.progress-step {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    transition: background var(--transition-base), color var(--transition-base);
}

.progress-step.active {
    background: var(--brand-primary);
    color: #0a2a18;
}

.progress-step.inactive {
    background: var(--surface-muted);
    color: var(--text-muted);
    border: 1.5px solid var(--border-default);
}

.progress-connector {
    height: 2px;
    flex-grow: 1;
    background: var(--border-default);
    border-radius: var(--radius-full);
    transition: background var(--transition-base);
}

.progress-connector.active {
    background: var(--brand-primary);
}


/* ============================================================
   12. COMPONENT — TABS (Settings)
   ============================================================ */

.tabs-ui {
    display: flex;
    gap: 2px;
    border-bottom: 1.5px solid var(--border-subtle);
    margin-bottom: 24px;
}

.tab-ui {
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.tab-ui:hover { color: var(--text-primary); }

.tab-ui.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

/* Bootstrap nav-tabs override */
.nav-tabs {
    border-bottom: 1.5px solid var(--border-subtle);
    margin-bottom: 24px;
    gap: 2px;
}

.nav-tabs .nav-item .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 10px 18px;
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    margin-bottom: -1.5px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    background: transparent;
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--brand-primary);
    background-color: transparent;
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

.nav-tabs .nav-item .nav-link:hover:not(.active) {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
}


/* ============================================================
   13. UTILITY CLASSES
   ============================================================ */

/* Loading spinner */
.spinner-ui {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-default);
    border-top-color: var(--brand-primary);
    border-radius: var(--radius-full);
    animation: spin-ui 0.8s linear infinite;
    flex-shrink: 0;
}

.spinner-ui-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-ui-lg { width: 28px; height: 28px; border-width: 3px; }

@keyframes spin-ui { to { transform: rotate(360deg); } }

/* Fade animation */
.animate-fade-in { animation: fade-in-ui 0.25s ease both; }

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

/* Elevation */
.shadow-elevated { box-shadow: var(--shadow-md); }
.shadow-focus-ui { box-shadow: var(--shadow-focus); }

/* Scrollbar utilities */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.scrollbar-hide-x { -ms-overflow-style: none; overflow-x: auto; }
.scrollbar-hide-x::-webkit-scrollbar { display: none; }

.scrollbar-hide-y { scrollbar-width: none; overflow-y: auto; }
.scrollbar-hide-y::-webkit-scrollbar { display: none; }

/* Custom branded scrollbar (use where visible scrollbar is needed) */
.scrollbar-brand::-webkit-scrollbar { width: 5px; height: 5px; }
.scrollbar-brand::-webkit-scrollbar-track { background: var(--surface-muted); border-radius: var(--radius-full); }
.scrollbar-brand::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: var(--radius-full); }
.scrollbar-brand { scrollbar-width: thin; scrollbar-color: var(--brand-primary) var(--surface-muted); }

/* Radius helpers (override Tailwind to match design tokens) */
.rounded-sm  { border-radius: var(--radius-sm)  !important; }
.rounded-md  { border-radius: var(--radius-md)  !important; }
.rounded-lg  { border-radius: var(--radius-lg)  !important; }
.rounded-xl  { border-radius: var(--radius-xl)  !important; }

/* Brand color helpers */
.text-brand            { color: var(--brand-primary) !important; }
.text-brand-dark       { color: var(--color-success-dark) !important; }
.text-brand-blue       { color: var(--brand-blue) !important; }
.text-muted-ui         { color: var(--text-muted) !important; }
.text-secondary-ui     { color: var(--text-secondary) !important; }
.text-primary-ui       { color: var(--text-primary) !important; }

/* Legacy aliases */
.text-brand-primary    { color: var(--brand-blue) !important; }
.text-brand-success    { color: var(--brand-primary) !important; }
.text-brand-success-dark { color: var(--color-success-dark) !important; }

.bg-brand-faint        { background: var(--brand-primary-muted); }
.bg-brand-success-faint { background: var(--brand-primary-muted); }
.bg-brand-success-light { background: var(--brand-primary-light); }
.bg-surface-muted      { background: var(--surface-muted); }

.border-subtle         { border-color: var(--border-subtle) !important; }
.border-brand          { border-color: var(--brand-primary) !important; }
.border-brand-success  { border-color: var(--brand-primary) !important; }
.border-brand-success-dark { border-color: var(--color-success-dark) !important; }


/* ============================================================
   14. ICONOGRAPHY
   ============================================================ */

.hgi {
    font-size: 20px;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Inside colored buttons, icons inherit the button's color */
.btn-primary-ui .hgi,
.btn-danger-ui .hgi,
.btn-brand .hgi,
.btn-brand-success .hgi,
.btn-success .hgi {
    color: inherit !important;
}

/* Standalone icon on white backgrounds defaults to brand */
.icon-brand { color: var(--brand-primary); }
.icon-muted { color: var(--text-muted); }
.icon-danger { color: var(--color-danger); }


/* ============================================================
   15. MODAL SURFACE (Alpine modals backdrop helper)
   ============================================================ */

.modal-surface {
    background: var(--surface-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ============================================================
   16. BILLING CARD
   ============================================================ */

.billing-card {
    background: linear-gradient(135deg, var(--brand-primary-muted) 0%, var(--surface-card) 70%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    height: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.billing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.billing-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.billing-card p { color: var(--text-secondary); }

.billing-card .meta-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.billing-card .btn {
    border-radius: var(--radius-full);
    padding-inline: 20px;
}

.invoice-table { margin-top: 12px; }

.invoice-table thead { background: var(--surface-muted); }

.invoice-table th,
.invoice-table td {
    padding: 10px 14px;
    vertical-align: middle;
    font-size: 0.875rem;
}

/* Team table */
#teamTable {
    margin-top: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

#teamTable thead th {
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-default);
}

#teamTable tbody tr { border-bottom: 1px solid var(--border-subtle); }
#teamTable tbody tr:last-child { border-bottom: none; }
#teamTable tbody td { padding: 11px 14px; vertical-align: middle; }


/* ============================================================
   17. FOOTER
   ============================================================ */

.footer-ui {
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
    padding: 16px 24px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-ui a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.footer-ui a:hover { color: var(--brand-primary); }


/* ============================================================
   18. COMPONENT — TOAST NOTIFICATIONS
   ============================================================ */

/* Toast container */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

@media (max-width: 768px) {
    .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        gap: 8px;
    }
}

/* Individual toast */
.toast-ui {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toastSlideIn var(--transition-base) ease-out both;
    max-width: 380px;
    min-width: 280px;
}

@media (max-width: 768px) {
    .toast-ui {
        max-width: 100%;
        min-width: auto;
    }
}

/* Toast variants */
.toast-ui.toast-success {
    background: var(--color-success-light);
    border-color: rgba(0, 230, 119, 0.3);
    color: var(--color-success-dark);
}

.toast-ui.toast-success .toast-icon {
    color: var(--color-success-dark);
}

.toast-ui.toast-error,
.toast-ui.toast-danger {
    background: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

.toast-ui.toast-error .toast-icon,
.toast-ui.toast-danger .toast-icon {
    color: #991b1b;
}

.toast-ui.toast-warning {
    background: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.toast-ui.toast-warning .toast-icon {
    color: #92400e;
}

.toast-ui.toast-info {
    background: var(--color-info-light);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0369a1;
}

.toast-ui.toast-info .toast-icon {
    color: #0369a1;
}

/* Toast content wrapper */
.toast-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.toast-message {
    font-weight: 400;
    opacity: 0.9;
    word-break: break-word;
}

.toast-title + .toast-message {
    margin-top: 2px;
}

/* Toast icon */
.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1;
}

/* Toast close button */
.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    margin-left: 8px;
}

.toast-close:hover {
    opacity: 1;
}

.toast-close svg {
    width: 16px;
    height: 16px;
}

/* Progress bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.5;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    animation: toastProgressShrink var(--toast-duration, 4s) linear forwards;
}

/* Toast animations */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

@keyframes toastProgressShrink {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

.toast-ui.toast-exiting {
    animation: toastSlideOut var(--transition-base) ease-in both;
}


/* ============================================================
   19. RESPONSIVE HELPERS
   ============================================================ */

@media (max-width: 768px) {
    .modal-card-ui { max-width: 96vw; }

    .nav-tabs .nav-item .nav-link {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    .billing-card { padding: 18px; }
}


/* ============================================================
   20. MOBILE APP SHELL — RESPONSIVE LAYOUT
   Breakpoint: < 768px (mobile)
   Strategy:
     - Module nav bar moves to bottom (fixed)
     - Sidebar becomes a slide-in overlay from the left
     - Main content fills full width
     - Bottom nav replaces the vertical module nav
   ============================================================ */

/* ── Mobile Bottom Navigation Bar ── */
.app-mobile-bottom-nav {
    display: none; /* hidden by default; shown via media query below */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #020617; /* slate-950 */
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    z-index: 950;
    align-items: stretch;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 2px;
    color: #94a3b8; /* slate-400 */
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color var(--transition-fast);
    padding: 6px 4px;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--brand-primary);
}

.mobile-nav-item .hgi {
    font-size: 20px;
    line-height: 1;
}

/* ── Mobile overlay backdrop ── */
.app-mobile-sidebar-backdrop {
    display: none; /* controlled by Alpine x-show */
}

/* ── Mobile hamburger (hidden on desktop) ── */
.app-mobile-hamburger {
    display: none;
}

/* ── Desktop sidebar toggle (shown on desktop) ── */
.app-sidebar-desktop-toggle {
    display: flex;
    align-items: center;
}

/* ── MOBILE BREAKPOINT ── */
@media (max-width: 767px) {

    /* Hide the vertical module navigation bar */
    .app-module-nav {
        display: none !important;
    }

    /* Show mobile hamburger, hide desktop toggle */
    .app-mobile-hamburger {
        display: flex !important;
        align-items: center;
    }

    .app-sidebar-desktop-toggle {
        display: none !important;
    }

    /* Show mobile bottom nav */
    .app-mobile-bottom-nav {
        display: flex !important;
    }

    /* Sidebar: convert from inline panel to fixed overlay */
    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        width: 280px !important;
        max-width: 85vw !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 960 !important;
        /* Override Tailwind w-64 / w-16 width */
        flex-shrink: 0;
        box-shadow: var(--shadow-lg) !important;
    }

    .app-sidebar.sidebar-open {
        transform: translateX(0) !important;
    }

    /* Backdrop visible when sidebar is open */
    .app-mobile-sidebar-backdrop {
        display: block;
    }

    /* Content scroll area: ensure bottom padding above mobile nav
       Only applies to non-chat modules (overflow-y-auto containers) */
    .app-content-scroll:not(.flex) .app-content-inner {
        padding-bottom: 72px !important;
    }

    /* Chat module: add padding to the flex scroll container so section footer
       (chat input) is lifted above the mobile bottom nav */
    .app-content-scroll.flex {
        padding-bottom: 60px;
    }

    /* When sidebar overlay is open, prevent body scroll */
    body.mobile-sidebar-open {
        overflow: hidden;
    }

    /* ── Top nav adjustments ── */
    /* Workspace selector: shrink on small screens */
    .app-workspace-btn {
        width: auto !important;
        min-width: 80px;
        max-width: 140px;
    }

    .app-workspace-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100px;
    }

    /* ── Modal adjustments ── */
    .modal-backdrop-ui {
        padding: 0.5rem;
        align-items: flex-end; /* Modals slide up from bottom on mobile */
    }

    .modal-card-ui {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin-bottom: 0;
    }

    .modal-card-ui-lg,
    .modal-card-ui-xl {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* ── Toast notifications: adjust for bottom nav ── */
    .toast-container {
        bottom: 72px !important; /* above bottom nav */
        right: 12px;
        left: 12px;
    }

    /* Legacy toast notification (inline style override) */
    [class*="fixed bottom-6 right-6"][class*="z-[9999]"] {
        bottom: 72px !important;
        right: 12px !important;
        left: 12px !important;
        min-width: auto !important;
    }

    /* ── Content padding ── */
    .app-main-content .p-6 {
        padding: 1rem !important;
    }

    /* ── Tables: horizontal scroll on mobile ── */
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Make all Bootstrap tables horizontally scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Main content scrollable area */
    .app-main-content > div {
        overflow-x: hidden;
    }

    /* ── Workspace selector dropdown: full width on mobile ── */
    .app-main-content nav .relative ul {
        min-width: 200px;
        left: 0 !important;
        right: auto;
    }

    /* ── Grid adjustments ── */
    /* Admin and dashboard grids: stack to 1 column */
    .grid-cols-4,
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Reports/WhatsApp: 2-column grids become 1 */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Creative Spark ad grid: 2 columns on mobile */
    .lg\:grid-cols-4,
    .grid-cols-3,
    .lg\:grid-cols-3,
    .grid-four-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Settings/Profile: tab overflow ── */
    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    /* ── Dashboard hero ── */
    .dashboard-hero {
        padding: 1.25rem !important;
    }

    .dashboard-hero-title {
        font-size: 1.5rem !important;
    }

    .dashboard-hero-actions {
        min-width: 0 !important;
        width: 100%;
    }

    .dashboard-hero-date {
        min-width: 0 !important;
    }

    /* ── Flex-row to column on mobile ── */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* ── Cards: reduce padding on mobile ── */
    .surface-card {
        padding: 1rem;
    }

    /* ── Report top button group: wrap on mobile ── */
    .app-main-content > nav > div:last-child {
        gap: 4px;
    }

    /* ── Creative Spark content ── */
    #creative-spark-container {
        min-height: calc(100vh - 120px);
    }

    /* ── WhatsApp: form stacking ── */
    .whatsapp-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Profile page ── */
    #profilePage .mx-auto {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ── Admin pages ── */
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Billing cards ── */
    .billing-card {
        padding: 14px !important;
    }

    /* Prevent horizontal overflow on mobile */
    img, video, iframe, embed, object {
        max-width: 100%;
    }

    img {
        height: auto;
    }
}

/* ── TABLET BREAKPOINT (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Sidebar starts collapsed on tablet */
    .app-sidebar {
        /* Keep desktop behavior but narrower */
    }

    /* Admin grids: 2 columns on tablet */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ── SAFE AREA INSETS (notch / home bar on iOS) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .app-mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(60px + env(safe-area-inset-bottom));
    }

    @media (max-width: 767px) {
        .app-content-scroll:not(.flex) .app-content-inner {
            padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        }
        .app-content-scroll.flex {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }
}