/* ==========================================================
   POSITIVE COMPUTER Billing ERP — theme
   Clean, premium, Apple-inspired: soft shadows, rounded corners,
   generous spacing, restrained color palette.
   ========================================================== */

:root {
  --pc-bg: #f5f6f8;
  --pc-surface: #ffffff;
  --pc-border: #e7e8ec;
  --pc-text: #1d1d1f;
  --pc-text-muted: #6e6e73;
  --pc-primary: #0a66ff;
  --pc-primary-dark: #084ecb;
  --pc-success: #1fa463;
  --pc-warning: #c98a06;
  --pc-danger: #d43f3f;
  --pc-sidebar-w: 250px;
  --pc-radius: 14px;
  --pc-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}

[data-theme="dark"] {
  --pc-bg: #0f1115;
  --pc-surface: #181a20;
  --pc-border: #2a2d35;
  --pc-text: #f2f2f4;
  --pc-text-muted: #9a9ba3;
  --pc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body.app-body {
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  min-height: 100vh;
}

/* ---- Navbar ---- */
.app-navbar {
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  padding: .55rem 1rem;
  z-index: 1030;
}
.app-navbar .navbar-brand { color: var(--pc-text); font-size: 1.05rem; }
.app-navbar .navbar-brand i { color: var(--pc-primary); margin-right: .35rem; }
.btn-icon, .btn-user {
  background: transparent; border: 1px solid var(--pc-border); color: var(--pc-text);
  border-radius: 10px; padding: .35rem .6rem;
}
.btn-icon:hover, .btn-user:hover { background: var(--pc-bg); }

/* ---- Shell / Sidebar ---- */
.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); }
.app-sidebar {
  width: var(--pc-sidebar-w); flex-shrink: 0;
  background: var(--pc-surface); border-right: 1px solid var(--pc-border);
  height: calc(100vh - 56px); position: sticky; top: 56px; overflow-y: auto;
}
.sidebar-scroll { padding: .9rem .7rem 2rem; }
.nav-section-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pc-text-muted); margin: 1rem .6rem .35rem;
}
.nav-section-title:first-child { margin-top: 0; }
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: .6rem;
  color: var(--pc-text); padding: .5rem .7rem; border-radius: 10px; font-size: .89rem;
}
.app-sidebar .nav-link i { width: 18px; text-align: center; color: var(--pc-text-muted); }
.app-sidebar .nav-link:hover { background: var(--pc-bg); }
.app-sidebar .nav-link.active { background: var(--pc-primary); color: #fff; }
.app-sidebar .nav-link.active i { color: #fff; }
.sidebar-backdrop { display: none; }

.app-main { flex: 1; min-width: 0; }

/* ---- Cards / surfaces ---- */
.card, .pc-card {
  background: var(--pc-surface); border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
}
.card-header { background: transparent; border-bottom: 1px solid var(--pc-border); font-weight: 600; }

.stat-card { padding: 1.1rem 1.25rem; border-radius: var(--pc-radius); background: var(--pc-surface); border: 1px solid var(--pc-border); box-shadow: var(--pc-shadow); }
.stat-card .stat-label { font-size: .78rem; color: var(--pc-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; margin-top: .15rem; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.stat-icon.bg-blue   { background: rgba(10,102,255,.12); color: var(--pc-primary); }
.stat-icon.bg-green  { background: rgba(31,164,99,.12); color: var(--pc-success); }
.stat-icon.bg-amber  { background: rgba(201,138,6,.12); color: var(--pc-warning); }
.stat-icon.bg-red    { background: rgba(212,63,63,.12); color: var(--pc-danger); }

/* ---- Tables ---- */
.table { color: var(--pc-text); }
.table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-text-muted);
  border-bottom: 1px solid var(--pc-border); font-weight: 600;
}
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--pc-bg); }

/* ---- Buttons ---- */
.btn-primary { background: var(--pc-primary); border-color: var(--pc-primary); }
.btn-primary:hover { background: var(--pc-primary-dark); border-color: var(--pc-primary-dark); }

/* ---- Badges ---- */
.badge-paid, .bg-paid { background: rgba(31,164,99,.14) !important; color: var(--pc-success) !important; }
.badge-pending, .bg-pending { background: rgba(201,138,6,.14) !important; color: var(--pc-warning) !important; }
.badge-overdue, .bg-overdue { background: rgba(212,63,63,.14) !important; color: var(--pc-danger) !important; }

/* ---- Forms ---- */
.form-control, .form-select {
  background: var(--pc-surface); color: var(--pc-text); border-color: var(--pc-border); border-radius: 10px;
}
.form-control:focus, .form-select:focus { border-color: var(--pc-primary); box-shadow: 0 0 0 .2rem rgba(10,102,255,.15); }
label.form-label { font-size: .85rem; font-weight: 500; color: var(--pc-text-muted); }

/* ---- Invoice line-item table ---- */
#lineItemsTable input, #lineItemsTable select { min-width: 90px; }

/* ---- Print / invoice preview ---- */
.invoice-sheet {
  background: #fff; color: #111; padding: 28px; border-radius: 10px; max-width: 900px; margin: 0 auto;
}
.invoice-sheet table { width: 100%; border-collapse: collapse; }
.invoice-sheet th, .invoice-sheet td { border: 1px solid #ccc; padding: 6px 8px; font-size: 13px; }

@media print {
  .app-navbar, .app-sidebar, .no-print { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
}

/* ---- Auth pages (login) ---- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0a66ff 0%, #063aa6 100%);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--pc-surface); border-radius: 18px;
  padding: 2.2rem; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ---- Responsive sidebar (mobile) ---- */
@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; left: -100%; top: 56px; z-index: 1050; transition: left .25s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .app-sidebar.show { left: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.35); z-index: 1040;
  }
}