/**
 * MozeSMS — Client Panel
 * app.css — Custom CSS (complements Tailwind CDN)
 */

/* ── Google Font Fallback ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar — sidebar */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* ── Brand colour tokens ────────────────────────────── */
:root {
    --green:       #1a9e50;
    --green-dark:  #15803d;
    --green-light: #dcfce7;
    --dark:        #111827;
    --body:        #374151;
    --muted:       #6b7280;
    --border:      #e5e7eb;
    --bg-alt:      #f5f7f5;
    --white:       #ffffff;
    --radius:      3px;

    /* legacy aliases */
    --brand-50:  #dcfce7;
    --brand-100: #bbf7d0;
    --brand-500: #1a9e50;
    --brand-600: #1a9e50;
    --brand-700: #15803d;
}

/* ── Border-radius reset (sharp 3px corners everywhere) ─ */
.rounded, .rounded-sm, .rounded-md, .rounded-lg,
.rounded-xl, .rounded-2xl, .rounded-3xl {
    border-radius: var(--radius) !important;
}

/* ── Sidebar transitions ─────────────────────────────── */
.sidebar {
    transition: width .25s cubic-bezier(.4,0,.2,1),
                transform .25s cubic-bezier(.4,0,.2,1);
}

/* ── Nav active indicator ────────────────────────────── */
.nav-item-active {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.nav-item-active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--brand-500);
    border-radius: 0 3px 3px 0;
}

/* ── Toast container (also painted by app.js) ───────── */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.moz-toast {
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease;
}
.moz-toast.opacity-0 { transform: translateX(1rem); }

/* ── Spinner ─────────────────────────────────────────── */
@keyframes moz-spin {
    to { transform: rotate(360deg); }
}
.moz-spinner {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: moz-spin .7s linear infinite;
    display: inline-block;
}
.moz-spinner-dark {
    border-color: rgba(0,0,0,.1);
    border-top-color: var(--brand-600);
}

/* ── Skeleton loading ────────────────────────────────── */
@keyframes pulse-bg {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}
.skeleton {
    background: #e2e8f0;
    border-radius: .5rem;
    animation: pulse-bg 1.5s ease-in-out infinite;
}

/* ── File drop zone ──────────────────────────────────── */
.drop-zone {
    transition: background .15s, border-color .15s;
}
.drop-zone.dragover {
    background: var(--brand-50);
    border-color: var(--brand-500);
}

/* ── Custom checkbox & radio ─────────────────────────── */
.moz-checkbox {
    accent-color: var(--brand-600);
    width: 1rem; height: 1rem;
    cursor: pointer;
}

/* ── Toggle switch (used in settings) ───────────────── */
.toggle-track {
    width: 2.5rem; height: 1.4rem;
    background: #cbd5e1;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
}
.toggle-track.on { background: var(--brand-600); }
.toggle-thumb {
    position: absolute;
    top: .2rem; left: .2rem;
    width: 1rem; height: 1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.toggle-track.on .toggle-thumb { transform: translateX(1.1rem); }

/* ── Alpine x-cloak ──────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Card hover lift ─────────────────────────────────── */
.card-hover {
    transition: transform .2s;
}
.card-hover:hover {
    transform: translateY(-2px);
}

/* ── Stat badge ──────────────────────────────────────── */
.stat-badge-up   { color: #059669; }
.stat-badge-down { color: #dc2626; }

/* ── Table row transitions ────────────────────────────── */
tbody tr { transition: background .1s; }

/* ── Flatpickr overrides ─────────────────────────────── */
.flatpickr-calendar {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--green) !important;
    border-color: var(--green) !important;
}
.flatpickr-day:hover {
    background: var(--green-light) !important;
}

/* ── Tom Select overrides ───────────────────────────── */
.ts-wrapper .ts-control {
    border-radius: var(--radius) !important;
    border-color: var(--border) !important;
    padding: .5rem 1rem !important;
    min-height: 2.75rem !important;
}
.ts-wrapper.focus .ts-control { outline: 2px solid var(--green) !important; }

/* ── Modal backdrop ──────────────────────────────────── */
.moz-modal-bg {
    animation: fadeIn .15s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Print ───────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; }
}