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

:root {
  --color-surface-00dp: #121212;
  --color-surface-01dp: #1e1e1e;
  --color-surface-02dp: #222222;
  --color-surface-03dp: #242424;
  --color-surface-04dp: #272727;
  --color-surface-06dp: #2c2c2c;
  --color-surface-08dp: #2e2e2e;
  --color-surface-12dp: #333333;
  --color-surface-16dp: #353535;
  --color-surface-24dp: #383838;
  --color-primary-dark: #90caf9;
  --color-primary-variant: #64b5f6;
  --color-primary-light: #bbdefb;
  --color-secondary-dark: #80deea;
  --color-secondary-variant: #4dd0e1;
  --color-success: #81c784;
  --color-warning: #ffb74d;
  --color-error: #e57373;
  --color-info: #64b5f6;
  --color-text-high: rgba(255,255,255,0.87);
  --color-text-medium: rgba(255,255,255,0.60);
  --color-text-disabled: rgba(255,255,255,0.38);
  --shadow-dark-1: 0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4);
  --shadow-dark-2: 0 3px 6px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
  --shadow-dark-lg: 0 10px 25px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.4);
}

* { font-family: 'Inter', system-ui, sans-serif; }
body { background-color: #121212; color: var(--color-text-high); }

/* Buttons */
.btn { display:inline-flex;align-items:center;justify-content:center;padding:0.625rem 1.5rem;border-radius:0.5rem;font-weight:500;font-size:0.875rem;transition:all 0.2s;cursor:pointer;border:none;text-decoration:none; }
.btn:focus { outline:2px solid transparent;box-shadow:0 0 0 2px #121212,0 0 0 4px var(--color-primary-dark); }
.btn-primary { background-color:var(--color-primary-dark);color:#111827; }
.btn-primary:hover { background-color:var(--color-primary-light);box-shadow:var(--shadow-dark-lg); }
.btn-secondary { background-color:var(--color-surface-08dp);color:var(--color-primary-dark);border:1px solid var(--color-primary-dark); }
.btn-secondary:hover { background-color:var(--color-surface-12dp); }
.btn-danger { background-color:var(--color-error);color:#111827; }
.btn-danger:hover { opacity:0.9; }
.btn-sm { padding:0.375rem 1rem;font-size:0.8125rem; }
.btn-icon { display:inline-flex;align-items:center;justify-content:center;padding:0.5rem;border-radius:0.5rem;background:transparent;color:var(--color-text-medium);transition:all 0.2s;border:none;cursor:pointer; }
.btn-icon:hover { background-color:var(--color-surface-08dp);color:var(--color-text-high); }

/* Nav */
.nav-link { display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:0.875rem;font-weight:500;color:var(--color-text-medium);transition:all 0.2s;text-decoration:none; }
.nav-link:hover { background-color:var(--color-surface-08dp);color:var(--color-text-high); }
.nav-link.active,.nav-link-active { background-color:rgba(144,202,249,0.15);color:var(--color-primary-dark); }

/* Cards */
.card { background-color:var(--color-surface-01dp);border-radius:0.75rem;padding:1.5rem;box-shadow:var(--shadow-dark-1); }
.card-interactive { background-color:var(--color-surface-01dp);border-radius:0.75rem;padding:1.5rem;box-shadow:var(--shadow-dark-1);cursor:pointer;transition:all 0.2s; }
.card-interactive:hover { background-color:var(--color-surface-04dp);box-shadow:var(--shadow-dark-lg);transform:translateY(-1px); }

/* Forms */
.form-label { display:block;font-size:0.875rem;font-weight:500;margin-bottom:0.5rem;color:var(--color-text-high); }
.form-input,.form-select,.form-textarea { width:100%;padding:0.625rem 1rem;border-radius:0.5rem;background-color:var(--color-surface-04dp);border:1px solid rgba(255,255,255,0.12);color:var(--color-text-high);font-size:0.875rem;transition:all 0.2s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none;border-color:var(--color-primary-dark);background-color:var(--color-surface-06dp);box-shadow:0 0 0 2px rgba(144,202,249,0.2); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--color-text-disabled); }
.form-textarea { resize:vertical; }
.form-select { appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgba(255,255,255,0.6)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:1.25em; }

/* Badges */
.badge { display:inline-flex;align-items:center;padding:0.25rem 0.625rem;border-radius:0.375rem;font-size:0.75rem;font-weight:500; }
.badge-active { background-color:rgba(144,202,249,0.15);color:var(--color-primary-dark);border:1px solid rgba(144,202,249,0.3); }
.badge-on-hold { background-color:rgba(255,183,77,0.15);color:var(--color-warning);border:1px solid rgba(255,183,77,0.3); }
.badge-closed { background-color:var(--color-surface-08dp);color:var(--color-text-medium);border:1px solid rgba(255,255,255,0.12); }
.badge-success,.badge-received { background-color:rgba(129,199,132,0.15);color:var(--color-success);border:1px solid rgba(129,199,132,0.3); }
.badge-warning,.badge-pending { background-color:rgba(255,183,77,0.15);color:var(--color-warning);border:1px solid rgba(255,183,77,0.3); }
.badge-error { background-color:rgba(229,115,115,0.15);color:var(--color-error);border:1px solid rgba(229,115,115,0.3); }
.badge-info,.badge-invoiced,.badge-sent { background-color:rgba(100,181,246,0.15);color:var(--color-info);border:1px solid rgba(100,181,246,0.3); }
.badge-draft { background-color:var(--color-surface-08dp);color:var(--color-text-medium);border:1px solid rgba(255,255,255,0.12); }
.badge-approved { background-color:rgba(129,199,132,0.15);color:var(--color-success);border:1px solid rgba(129,199,132,0.3); }
.badge-rejected { background-color:rgba(229,115,115,0.15);color:var(--color-error);border:1px solid rgba(229,115,115,0.3); }

/* Tables */
.table-container { overflow-x:auto;border-radius:0.75rem;background-color:var(--color-surface-01dp);border:1px solid rgba(255,255,255,0.05); }
.table { width:100%;border-collapse:collapse; }
.table thead { background-color:var(--color-surface-04dp); }
.table th { padding:1rem 1.5rem;text-align:left;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-medium); }
.table td { padding:1rem 1.5rem;font-size:0.875rem;color:var(--color-text-high);border-top:1px solid rgba(255,255,255,0.05); }
.table tbody tr { transition:background-color 0.15s; }
.table tbody tr:hover { background-color:var(--color-surface-04dp); }

/* Tabs */
.tab-nav { display:flex;gap:0.25rem;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:1.5rem; }
.tab-link { padding:0.75rem 1rem;font-size:0.875rem;font-weight:500;color:var(--color-text-medium);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;text-decoration:none;white-space:nowrap; }
.tab-link:hover { color:var(--color-text-high); }
.tab-link.active { color:var(--color-primary-dark);border-bottom-color:var(--color-primary-dark); }

/* Stat tiles */
.stat-tile { background-color:var(--color-surface-01dp);border-radius:0.75rem;padding:1.25rem 1.5rem;border:1px solid rgba(255,255,255,0.05); }
.stat-label { font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-medium);margin-bottom:0.5rem; }
.stat-value { font-size:1.5rem;font-weight:700;color:var(--color-text-high); }

/* Progress bar */
.progress-bar { height:0.5rem;border-radius:9999px;background-color:var(--color-surface-06dp);overflow:hidden; }
.progress-fill { height:100%;border-radius:9999px;background-color:var(--color-primary-dark);transition:width 0.3s; }

/* Animations */
.fade-in { animation:fadeIn 0.3s ease-out; }
.slide-up { animation:slideUp 0.4s ease-out; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Divider */
.divider { border-top:1px solid rgba(255,255,255,0.1);margin:1.5rem 0; }

/* Page layout */
.page-header { margin-bottom:2rem; }
.page-title { font-size:1.875rem;font-weight:700;color:var(--color-text-high);margin-bottom:0.5rem; }
.section-label { font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-medium); }

/* Messages */
.message-success { background-color:rgba(129,199,132,0.15);border:1px solid rgba(129,199,132,0.3);color:var(--color-success);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.875rem; }
.message-error { background-color:rgba(229,115,115,0.15);border:1px solid rgba(229,115,115,0.3);color:var(--color-error);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.875rem; }
.message-warning { background-color:rgba(255,183,77,0.15);border:1px solid rgba(255,183,77,0.3);color:var(--color-warning);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.875rem; }
.message-info { background-color:rgba(100,181,246,0.15);border:1px solid rgba(100,181,246,0.3);color:var(--color-info);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.875rem; }

/* Scrollbar */
::-webkit-scrollbar { width:8px;height:8px; }
::-webkit-scrollbar-track { background-color:var(--color-surface-02dp); }
::-webkit-scrollbar-thumb { background-color:var(--color-surface-12dp);border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background-color:var(--color-surface-16dp); }