/**
 * ==========================================================
 * MZift Analytics - Stylesheet
 * ==========================================================
 *
 * Custom styles, theme variables, and component styles.
 *
 * @package    MZift Analytics
 * @author     Muhammad Zaigham
 * @copyright  MZift.com (@itsmzift) All rights reserved.
 * @license    Proprietary
 * ==========================================================
 */

/* ----------------------------------------------------------
 * CSS Variables - Light Theme (Default)
 * ---------------------------------------------------------- */
:root {
    /* Brand */
    --mzift-primary: #10B981;
    --mzift-primary-hover: #059669;
    --mzift-primary-light: #D1FAE5;
    --mzift-primary-dark: #047857;
    --mzift-primary-rgb: 16, 185, 129;

    /* Backgrounds */
    --mzift-bg: #F9FAFB;
    --mzift-bg-card: #FFFFFF;
    --mzift-bg-sidebar: #FFFFFF;
    --mzift-bg-input: #FFFFFF;
    --mzift-bg-hover: #F3F4F6;
    --mzift-bg-active: #ECFDF5;
    --mzift-bg-code: #F3F4F6;
    --mzift-bg-tooltip: #1F2937;
    --mzift-bg-overlay: rgba(0, 0, 0, 0.4);

    /* Text */
    --mzift-text: #111827;
    --mzift-text-secondary: #6B7280;
    --mzift-text-muted: #9CA3AF;
    --mzift-text-inverse: #FFFFFF;
    --mzift-text-link: #10B981;

    /* Borders */
    --mzift-border: #E5E7EB;
    --mzift-border-hover: #D1D5DB;
    --mzift-border-focus: #10B981;

    /* Shadows */
    --mzift-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --mzift-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mzift-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --mzift-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

    /* Status */
    --mzift-success: #10B981;
    --mzift-warning: #F59E0B;
    --mzift-danger: #EF4444;
    --mzift-info: #3B82F6;

    /* Chart */
    --mzift-chart-line: #10B981;
    --mzift-chart-fill: rgba(16, 185, 129, 0.1);
    --mzift-chart-grid: #E5E7EB;
    --mzift-chart-text: #6B7280;

    /* Sidebar */
    --mzift-sidebar-width: 260px;

    /* Transitions */
    --mzift-transition: 150ms ease;
    --mzift-transition-slow: 300ms ease;
}

/* ----------------------------------------------------------
 * CSS Variables - Dark Theme
 * ---------------------------------------------------------- */
[data-theme="dark"] {
    --mzift-primary: #34D399;
    --mzift-primary-hover: #6EE7B7;
    --mzift-primary-light: #064E3B;
    --mzift-primary-dark: #A7F3D0;
    --mzift-primary-rgb: 52, 211, 153;

    --mzift-bg: #0F172A;
    --mzift-bg-card: #1E293B;
    --mzift-bg-sidebar: #1E293B;
    --mzift-bg-input: #334155;
    --mzift-bg-hover: #334155;
    --mzift-bg-active: #064E3B;
    --mzift-bg-code: #334155;
    --mzift-bg-tooltip: #F9FAFB;
    --mzift-bg-overlay: rgba(0, 0, 0, 0.6);

    --mzift-text: #F1F5F9;
    --mzift-text-secondary: #94A3B8;
    --mzift-text-muted: #64748B;
    --mzift-text-inverse: #0F172A;
    --mzift-text-link: #34D399;

    --mzift-border: #334155;
    --mzift-border-hover: #475569;
    --mzift-border-focus: #34D399;

    --mzift-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mzift-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --mzift-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --mzift-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

    --mzift-chart-line: #34D399;
    --mzift-chart-fill: rgba(52, 211, 153, 0.15);
    --mzift-chart-grid: #334155;
    --mzift-chart-text: #94A3B8;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--mzift-bg);
    color: var(--mzift-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    transition: background-color var(--mzift-transition-slow),
                color var(--mzift-transition-slow);
}

/* ----------------------------------------------------------
 * Layout
 * ---------------------------------------------------------- */
.mzift-layout {
    display: flex;
    min-height: 100vh;
}

.mzift-sidebar {
    width: var(--mzift-sidebar-width);
    background: var(--mzift-bg-sidebar);
    border-right: 1px solid var(--mzift-border);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
    transition: transform var(--mzift-transition-slow);
}

.mzift-main {
    flex: 1;
    margin-left: var(--mzift-sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--mzift-transition-slow);
}

/* Mobile: sidebar hidden by default */
@media (max-width: 1023px) {
    .mzift-sidebar {
        transform: translateX(-100%);
    }

    .mzift-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--mzift-shadow-lg);
    }

    .mzift-main {
        margin-left: 0;
    }
}

/* ----------------------------------------------------------
 * Cards
 * ---------------------------------------------------------- */
.mzift-card {
    background: var(--mzift-bg-card);
    border: 1px solid var(--mzift-border);
    border-radius: 0.75rem;
    box-shadow: var(--mzift-shadow-sm);
    transition: box-shadow var(--mzift-transition),
                border-color var(--mzift-transition);
}

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

.mzift-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mzift-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mzift-card-body {
    padding: 1.25rem;
}

/* ----------------------------------------------------------
 * KPI Stat Cards
 * ---------------------------------------------------------- */
.mzift-stat {
    position: relative;
    overflow: hidden;
}

.mzift-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mzift-text);
    letter-spacing: -0.025em;
}

.mzift-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mzift-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mzift-stat-change {
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.mzift-stat-change.up {
    color: var(--mzift-success);
}

.mzift-stat-change.down {
    color: var(--mzift-danger);
}

/* ----------------------------------------------------------
 * Data Tables
 * ---------------------------------------------------------- */
.mzift-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mzift-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.mzift-table th {
    text-align: left;
    padding: 0.625rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mzift-text-secondary);
    border-bottom: 1px solid var(--mzift-border);
    white-space: nowrap;
}

.mzift-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mzift-border);
    color: var(--mzift-text);
    vertical-align: middle;
}

.mzift-table tbody tr {
    transition: background-color var(--mzift-transition);
}

.mzift-table tbody tr:hover {
    background-color: var(--mzift-bg-hover);
}

.mzift-table tbody tr:last-child td {
    border-bottom: none;
}

/* Progress bar inside table cells */
.mzift-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--mzift-bg-hover);
    overflow: hidden;
    min-width: 60px;
}

.mzift-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--mzift-primary);
    transition: width var(--mzift-transition-slow);
}

/* ----------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------- */
.mzift-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--mzift-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}

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

.mzift-btn-primary {
    background: var(--mzift-primary);
    color: #FFFFFF;
    border-color: var(--mzift-primary);
}

.mzift-btn-primary:hover {
    background: var(--mzift-primary-hover);
    border-color: var(--mzift-primary-hover);
}

.mzift-btn-secondary {
    background: var(--mzift-bg-card);
    color: var(--mzift-text);
    border-color: var(--mzift-border);
}

.mzift-btn-secondary:hover {
    background: var(--mzift-bg-hover);
    border-color: var(--mzift-border-hover);
}

.mzift-btn-danger {
    background: var(--mzift-danger);
    color: #FFFFFF;
    border-color: var(--mzift-danger);
}

.mzift-btn-danger:hover {
    opacity: 0.9;
}

.mzift-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.mzift-btn-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
}

/* ----------------------------------------------------------
 * Form Inputs
 * ---------------------------------------------------------- */
.mzift-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--mzift-bg-input);
    color: var(--mzift-text);
    border: 1px solid var(--mzift-border);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color var(--mzift-transition),
                box-shadow var(--mzift-transition);
}

.mzift-input:focus {
    border-color: var(--mzift-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--mzift-primary-rgb), 0.15);
}

.mzift-input::placeholder {
    color: var(--mzift-text-muted);
}

.mzift-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* ----------------------------------------------------------
 * Date Range Picker
 * ---------------------------------------------------------- */
.mzift-date-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--mzift-bg-card);
    border: 1px solid var(--mzift-border);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.mzift-date-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--mzift-text-secondary);
    cursor: pointer;
    transition: all var(--mzift-transition);
}

.mzift-date-btn:hover {
    color: var(--mzift-text);
    background: var(--mzift-bg-hover);
}

.mzift-date-btn.active {
    background: var(--mzift-primary);
    color: #FFFFFF;
}

/* ----------------------------------------------------------
 * Sidebar Navigation
 * ---------------------------------------------------------- */
.mzift-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin: 0.125rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mzift-text-secondary);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all var(--mzift-transition);
}

.mzift-nav-item:hover {
    color: var(--mzift-text);
    background: var(--mzift-bg-hover);
}

.mzift-nav-item.active {
    color: var(--mzift-primary);
    background: var(--mzift-bg-active);
}

.mzift-nav-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

/* ----------------------------------------------------------
 * Toast Notifications
 * ---------------------------------------------------------- */
.mzift-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.mzift-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--mzift-bg-card);
    border: 1px solid var(--mzift-border);
    border-radius: 0.5rem;
    box-shadow: var(--mzift-shadow-lg);
    font-size: 0.875rem;
    color: var(--mzift-text);
    pointer-events: auto;
    animation: mzift-slide-in 0.3s ease forwards;
    max-width: 380px;
}

.mzift-toast.success {
    border-left: 3px solid var(--mzift-success);
}

.mzift-toast.error {
    border-left: 3px solid var(--mzift-danger);
}

.mzift-toast.removing {
    animation: mzift-slide-out 0.3s ease forwards;
}

/* ----------------------------------------------------------
 * Live Pulse Indicator
 * ---------------------------------------------------------- */
.mzift-pulse {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mzift-success);
}

.mzift-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--mzift-success);
    opacity: 0;
    animation: mzift-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ----------------------------------------------------------
 * Flag & Icon Helpers
 * ---------------------------------------------------------- */
.mzift-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}

.mzift-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
 * Tab Navigation (Dashboard Panels)
 * ---------------------------------------------------------- */
.mzift-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--mzift-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.mzift-tab {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mzift-text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--mzift-transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

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

.mzift-tab.active {
    color: var(--mzift-primary);
    border-bottom-color: var(--mzift-primary);
}

.mzift-tab-panel {
    display: none;
}

.mzift-tab-panel.active {
    display: block;
}

/* ----------------------------------------------------------
 * Tooltip
 * ---------------------------------------------------------- */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mzift-text-inverse);
    background: var(--mzift-bg-tooltip);
    border-radius: 0.375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mzift-transition),
                transform var(--mzift-transition);
    z-index: 50;
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ----------------------------------------------------------
 * Skeleton Loading
 * ---------------------------------------------------------- */
.mzift-skeleton {
    background: linear-gradient(
        90deg,
        var(--mzift-bg-hover) 25%,
        var(--mzift-border) 50%,
        var(--mzift-bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: mzift-shimmer 1.5s infinite;
    border-radius: 0.375rem;
}

/* ----------------------------------------------------------
 * Chart Container
 * ---------------------------------------------------------- */
.mzift-chart-wrap {
    position: relative;
    width: 100%;
}

.mzift-chart-wrap canvas {
    width: 100% !important;
    height: auto !important;
}

/* ----------------------------------------------------------
 * Script Code Block (for copy)
 * ---------------------------------------------------------- */
.mzift-code {
    position: relative;
    background: var(--mzift-bg-code);
    border: 1px solid var(--mzift-border);
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--mzift-text);
    word-break: break-all;
}

.mzift-code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* ----------------------------------------------------------
 * Mobile Bottom Navigation
 * ---------------------------------------------------------- */
.mzift-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mzift-bg-card);
    border-top: 1px solid var(--mzift-border);
    z-index: 40;
    padding: 0.25rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mzift-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--mzift-text-muted);
    text-decoration: none;
    transition: color var(--mzift-transition);
}

.mzift-bottom-nav a.active {
    color: var(--mzift-primary);
}

.mzift-bottom-nav a i {
    font-size: 1.125rem;
}

@media (max-width: 1023px) {
    .mzift-bottom-nav {
        display: flex;
    }

    .mzift-main {
        padding-bottom: 4.5rem;
    }
}

/* ----------------------------------------------------------
 * Scrollbar Styling
 * ---------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mzift-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mzift-text-muted);
}

/* ----------------------------------------------------------
 * Animations
 * ---------------------------------------------------------- */
@keyframes mzift-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mzift-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes mzift-ping {
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes mzift-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

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

.mzift-fade-in {
    animation: mzift-fade-in 0.3s ease forwards;
}

/* ----------------------------------------------------------
 * Login Page
 * ---------------------------------------------------------- */
.mzift-login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mzift-bg);
}

.mzift-login-card {
    width: 100%;
    max-width: 400px;
    margin: 1rem;
}

/* ----------------------------------------------------------
 * Setup Wizard
 * ---------------------------------------------------------- */
.mzift-setup-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.mzift-setup-step {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--mzift-border);
    transition: background var(--mzift-transition-slow);
}

.mzift-setup-step.done {
    background: var(--mzift-primary);
}

.mzift-setup-step.current {
    background: var(--mzift-primary);
    opacity: 0.5;
}

/* ----------------------------------------------------------
 * Empty State
 * ---------------------------------------------------------- */
.mzift-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--mzift-text-muted);
}

.mzift-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

/* ----------------------------------------------------------
 * Responsive Utilities
 * ---------------------------------------------------------- */
@media (max-width: 639px) {
    .mzift-stat-value {
        font-size: 1.375rem;
    }

    .mzift-card-body {
        padding: 1rem;
    }

    .mzift-card-header {
        padding: 0.75rem 1rem;
    }
}

/* ----------------------------------------------------------
 * Print Styles
 * ---------------------------------------------------------- */
@media print {
    .mzift-sidebar,
    .mzift-bottom-nav,
    .mzift-toast-container,
    .mzift-btn {
        display: none !important;
    }

    .mzift-main {
        margin-left: 0 !important;
    }

    .mzift-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}