/* =========================================
   1. RESET & VARIABLES
   ========================================= */
/* modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

:root {
    /* Colors - Slate & Indigo Theme */
    --color-primary: #4f46e5;       /* Indigo 600 */
    --color-primary-hover: #4338ca; /* Indigo 700 */
    --color-primary-light: #e0e7ff; /* Indigo 100 */
    
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    
    --color-bg: #f8fafc;            /* Slate 50 */
    --color-surface: #ffffff;
    --color-border: #e2e8f0;        /* Slate 200 */
    
    --color-text-main: #0f172a;     /* Slate 900 */
    --color-text-muted: #64748b;    /* Slate 500 */
    --color-text-light: #94a3b8;    /* Slate 400 */

    /* Spacing */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem;  /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-6: 1.5rem;  /* 24px */
    --space-8: 2rem;    /* 32px */
    
    /* UI Tokens */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    --font-sans: system-ui, -apple-system, sans-serif;
    
    --container-width: 1200px;
    --header-height: 64px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;        /* Slate 900 */
        --color-surface: #1e293b;   /* Slate 800 */
        --color-border: #334155;    /* Slate 700 */
        --color-text-main: #f1f5f9; /* Slate 100 */
        --color-text-muted: #94a3b8; /* Slate 400 */
        --color-primary-light: #312e81; /* Indigo 900 */
    }
}

/* =========================================
   2. CORE STYLES
   ========================================= */
body {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--color-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* Wrapper */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* =========================================
   3. COMPONENTS
   ========================================= */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    gap: var(--space-2);
}

.btn--primary {
    background-color: var(--color-primary);
    color: white;
}
.btn--primary:hover {
    background-color: var(--color-primary-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-main);
}
.btn--secondary:hover {
    background-color: var(--color-bg);
    border-color: var(--color-text-muted);
}

.btn--danger {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn--danger:hover {
    background-color: #fef2f2;
}

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
}

.btn--fab {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    font-size: 1.5rem;
    z-index: 50;
    padding: 0;
}

/* Cards */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Forms */
.form-group {
    margin-bottom: var(--space-4);
}
.form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-main);
}
.form-control {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Navbar */
.navbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 40;
}
.navbar__container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar__brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.navbar__menu {
    display: flex;
    gap: var(--space-1);
}
.nav-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}
.nav-link:hover, .nav-link.active {
    background-color: var(--color-bg);
    color: var(--color-primary);
}
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-main);
    cursor: pointer;
}

/* Alerts */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border-left: 4px solid currentColor;
}
.alert--success { background: #ecfdf5; color: #047857; }
.alert--error { background: #fef2f2; color: #b91c1c; }
.alert--info { background: #eff6ff; color: #1d4ed8; }

/* Grid Utilities */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Badges */
.badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge--primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge--gray { background: #f1f5f9; color: #475569; }

/* Specific: Movements List */
.movement-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: transform 0.2s;
}
.movement-item:hover {
    border-color: var(--color-primary);
}
.movement-header {
    background: #f8fafc;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
}
.movement-body {
    padding: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.amount { font-size: 1.125rem; font-weight: 700; color: var(--color-text-main); }
.amount.positive { color: var(--color-success); }
.amount.negative { color: var(--color-danger); }

/* =========================================
   4. RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .navbar__menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-surface);
        flex-direction: column;
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        transform: translateY(-150%);
        transition: transform 0.3s ease;
    }
    .navbar__menu.is-open {
        transform: translateY(0);
    }
    .nav-toggle {
        display: block;
    }
    .btn--fab {
        bottom: var(--space-4);
        right: var(--space-4);
    }
    h1 { font-size: 1.5rem; }
}