/* AccountingTech v5.1 UI System */
:root {
    --brand-900:#0d1b2a;
    --brand-800:#102a43;
    --brand-700:#243b53;
    --brand-600:#0d47a1;
    --brand-500:#1f7ae0;
    --brand-400:#5aa9fd;
    --accent-emerald:#10b981;
    --accent-amber:#f59e0b;
    --accent-rose:#f43f5e;
    --gray-900:#0f172a;
    --gray-700:#334155;
    --gray-500:#64748b;
    --gray-300:#e2e8f0;
    --gray-200:#eef2f6;
    --gray-100:#f8fafc;
    --bg-body:#f1f4f9;
    --card-bg:#ffffff;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow-sm:0 4px 12px rgba(15,23,42,.08);
    --shadow-md:0 12px 30px rgba(15,23,42,.12);
    --shadow-lg:0 25px 55px -20px rgba(15,23,42,.35);
}

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

body {
    margin:0;
    font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
    background:var(--bg-body);
    color:var(--brand-800);
    line-height:1.6;
    min-height:100vh;
}

a {
    color:var(--brand-500);
    text-decoration:none;
}

a:hover {
    color:var(--brand-600);
}

img {
    max-width:100%;
    display:block;
}

/* Utilities */
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

.container-fluid {
    width:100%;
    padding:0 24px;
}

.w-100 { width:100%; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.flex { display:flex; }
.justify-between { justify-content:space-between; }
.align-center { align-items:center; }
.gap-10 { gap:10px; }
.mt-10 { margin-top:10px; }
.mt-20 { margin-top:20px; }
.mb-10 { margin-bottom:10px; }
.mb-20 { margin-bottom:20px; }
.stack-md > * + * { margin-top:16px; }
.breadcrumb {
    font-size:13px;
    color:var(--gray-500);
    margin:0 0 6px 0;
}
.breadcrumb span { margin-right:6px; }
.page-content { display:flex; flex-direction:column; gap:24px; }
.grid-auto {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}
.metric-card {
    color:#fff;
    min-height:160px;
}
.field-label {
    display:block;
    font-size:13px;
    margin-bottom:5px;
    color:var(--gray-500);
    font-weight:600;
}

/* Buttons */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 20px;
    border:none;
    border-radius:var(--radius-sm);
    font-weight:600;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease;
    text-decoration:none;
}

.btn-sm {
    padding:8px 14px;
    font-size:14px;
}

.btn-primary {
    background:var(--brand-500);
    color:#fff;
    box-shadow:0 8px 20px rgba(31,122,224,.25);
}
.btn-primary:hover {
    background:var(--brand-600);
    transform:translateY(-1px);
}
.btn-secondary {
    background:var(--gray-200);
    color:var(--brand-700);
}
.btn-success {
    background:var(--accent-emerald);
    color:#fff;
}
.btn-danger {
    background:var(--accent-rose);
    color:#fff;
}
.btn-warning {
    background:var(--accent-amber);
    color:#fff;
}
.btn:disabled {
    opacity:.6;
    cursor:not-allowed;
}

/* Cards */
.card {
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(15,23,42,.05);
}
.card-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(148,163,184,.2);
    padding-bottom:12px;
}
.card-title {
    font-size:20px;
    font-weight:600;
    color:var(--brand-800);
}

/* Tables */
.table-wrapper {
    border:1px solid var(--gray-300);
    border-radius:var(--radius-md);
    overflow:auto;
}
table {
    width:100%;
    border-collapse:collapse;
    min-width:700px;
    background:var(--card-bg);
}
thead {
    background:var(--gray-100);
    text-transform:uppercase;
    font-size:13px;
}
th,td {
    padding:14px 16px;
    text-align:left;
    border-bottom:1px solid var(--gray-200);
}
tr:hover td {
    background:#fdfefe;
}

/* Forms */
.form-group { margin-bottom:18px; }
label {
    display:block;
    font-weight:600;
    font-size:14px;
    margin-bottom:6px;
}
.form-row {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}
input,
select,
textarea {
    width:100%;
    padding:12px 14px;
    border-radius:var(--radius-sm);
    border:1px solid var(--gray-300);
    font-size:15px;
    background:#fff;
    transition:border .2s ease, box-shadow .2s ease;
}
input:focus,
select:focus,
textarea:focus {
    outline:none;
    border-color:var(--brand-500);
    box-shadow:0 0 0 3px rgba(31,122,224,.15);
}

/* Alerts */
.alert {
    border-radius:var(--radius-md);
    padding:14px 18px;
    font-weight:500;
    margin-bottom:18px;
}
.alert-success {
    background:#ecfdf5;
    border:1px solid #6ee7b7;
    color:#047857;
}
.alert-danger {
    background:#fef2f2;
    border:1px solid #fca5a5;
    color:#b91c1c;
}
.alert-warning {
    background:#fef3c7;
    border:1px solid #fcd34d;
    color:#92400e;
}
.alert-info {
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
}

/* Legacy navbar support */
.navbar {
    background:#fff;
    padding:15px 0;
    box-shadow:var(--shadow-sm);
    margin-bottom:30px;
}
.navbar .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.navbar-menu {
    list-style:none;
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
}
.navbar-menu a {
    color:var(--brand-700);
    font-weight:500;
}
.navbar-brand {
    font-weight:700;
    font-size:1.5rem;
    color:var(--brand-500);
}

/* App Shell */
.app-shell {
    display:flex;
    min-height:100vh;
}
.sidebar {
    width:260px;
    background:linear-gradient(180deg,#061237 0%,#0b225c 100%);
    color:#fff;
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.sidebar .logo {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    text-align:left;
    width:100%;
}
.sidebar .logo img {
    width:100%;
    max-width:150px;
    height:auto;
}
.sidebar .logo strong {
    display:block;
    font-size:17px;
    line-height:1.2;
    word-break:break-word;
}
.sidebar-tagline {
    margin:0;
    font-size:13px;
    color:#cbd5f5;
    word-break:break-word;
}
.logo-text {
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    align-items:flex-start;
}
.nav-links {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}
.nav-links a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:var(--radius-sm);
    color:#cbd5f5;
    transition:background .2s,color .2s;
}
.nav-links a.active,
.nav-links a:hover {
    background:rgba(255,255,255,.1);
    color:#fff;
}
.nav-icon {
    font-size:18px;
}
.sidebar-footer {
    margin-top:auto;
}
.app-main {
    flex:1;
    padding:32px 40px 60px;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}
.topbar-meta {
    color:var(--gray-500);
}
.topbar-subtitle {
    margin:0;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.topbar-title {
    margin:2px 0 0 0;
    font-size:20px;
    color:var(--brand-800);
    font-weight:600;
}
.user-chip {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border-radius:999px;
    background:var(--gray-100);
    box-shadow:var(--shadow-sm);
}
.page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
}
.page-header h1 {
    margin:4px 0 0 0;
    font-size:32px;
    font-weight:600;
    color:var(--brand-900);
}
.page-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.context-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    background:var(--gray-200);
    color:var(--gray-700);
    font-size:13px;
    margin-top:8px;
}

/* Auth */
.auth-hero {
    min-height:100vh;
    background:linear-gradient(135deg,#051937 0%,#12284b 35%,#1f7ae0 100%);
    display:grid;
    place-items:center;
    padding:24px;
    color:#fff;
}
.auth-card {
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:24px;
    padding:40px 36px;
    box-shadow:var(--shadow-lg);
}
.auth-card header {
    text-align:center;
    margin-bottom:32px;
}
.auth-card label {
    color:var(--brand-800);
}
.auth-card .lead {
    margin-top:12px;
    color:var(--gray-500);
    font-size:15px;
}
.auth-footer {
    margin-top:24px;
    text-align:center;
    color:var(--gray-500);
    font-size:13px;
}

/* Upload zones */
.upload-zone {
    border:2px dashed var(--brand-400);
    border-radius:var(--radius-md);
    padding:32px;
    text-align:center;
    background:#f5f9ff;
    transition:border .2s, transform .2s, background .2s;
}
.upload-zone.drag-over {
    border-color:var(--brand-600);
    background:#e9f2ff;
    transform:scale(1.01);
}
.upload-zone.success {
    border-color:var(--accent-emerald);
    background:#ecfdf5;
}
.upload-zone.success.drag-over {
    border-color:#059669;
    background:#d1fae5;
}
.file-list {
    margin-top:16px;
    max-height:320px;
    overflow-y:auto;
}
.file-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border:1px solid var(--gray-300);
    border-radius:var(--radius-sm);
    margin-bottom:8px;
    background:#fff;
}
.file-item .file-name {
    font-weight:600;
    color:var(--brand-700);
}
.file-item .file-size {
    font-size:13px;
    color:var(--gray-500);
}
.file-item .remove-btn {
    border:none;
    background:var(--accent-rose);
    color:#fff;
    border-radius:var(--radius-sm);
    padding:6px 12px;
    cursor:pointer;
}

/* Loading overlay */
.loading-overlay {
    position:fixed;
    inset:0;
    background:rgba(6,18,55,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:999;
}
.loading-overlay.active {
    opacity:1;
    pointer-events:auto;
}
.loading-card {
    background:#fff;
    padding:32px 40px;
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-lg);
}
.spinner {
    width:54px;
    height:54px;
    border-radius:50%;
    border:5px solid var(--gray-200);
    border-top-color:var(--brand-500);
    animation:spin 1s linear infinite;
    margin:0 auto 14px;
}
@keyframes spin {
    to { transform:rotate(360deg); }
}

/* Responsive */
@media (max-width:1024px) {
    .app-shell { flex-direction:column; }
    .sidebar { width:100%; flex-direction:row; align-items:center; overflow-x:auto; }
    .app-main { padding:24px; }
}
@media (max-width:768px) {
    .navbar .container { flex-direction:column; }
    .topbar,
    .page-header {
        flex-direction:column;
        align-items:flex-start;
    }
}
@media (max-width:640px) {
    .auth-card { padding:28px 24px; }
}