/* ============ Billing System UI — Theme: Primary #5B3DF5 / Secondary #FC6C26 ============ */
:root {
  --primary:       #5B3DF5;   /* Primary — sidebar, links, focus, active */
  --primary-dark:  #4630c9;
  --primary-light: #efecfe;
  --secondary:     #FC6C26;   /* Secondary — buttons */
  --secondary-dark:#e2560f;
  --brand:         #5B3DF5;   /* kept as alias for primary */
  --brand-dark:    #4630c9;
  --sidebar:       #5B3DF5;
  --sidebar-line:  rgba(255,255,255,.16);
  --success:       #1faa59;
  --danger:        #e74c3c;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Arial, sans-serif; background:#f1f2f7; color:#222; font-size:15px; }
a { text-decoration:none; }

.app { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar { width:250px; background:var(--primary); color:#fff; flex-shrink:0; }
.brand { font-size:26px; font-weight:800; padding:24px 22px; border-bottom:1px solid var(--sidebar-line); }
.brand span { color:var(--brand); }
.brand-logo { padding:16px 18px; }
.brand-logo a { display:block; background:#fff; border-radius:10px; padding:8px 10px; text-align:center; }
.brand-logo img { max-width:100%; height:46px; object-fit:contain; display:inline-block; }
.sidebar nav { display:flex; flex-direction:column; padding:14px 0; }
.sidebar nav a { color:#e8e7ff; padding:12px 22px; font-size:15px; transition:.15s; }
.sidebar nav a:hover, .sidebar nav a.active { background:var(--primary-dark); color:#fff; }

/* Main */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { background:#fff; padding:18px 30px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.topbar h1 { font-size:24px; }
.topbar-right { display:flex; gap:14px; align-items:center; }
.user-chip { background:var(--primary-light); color:var(--primary); padding:6px 14px; border-radius:20px; font-weight:600; font-size:13px; }
.content { padding:26px 30px; }

/* Card */
.card { background:#fff; border-radius:14px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.05); margin-bottom:24px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.card-head h2 { font-size:22px; }

/* Buttons */
.btn { display:inline-block; border:none; cursor:pointer; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; }
.btn-primary { background:var(--secondary); color:#fff; }
.btn-primary:hover { background:var(--secondary-dark); opacity:1; }
.btn-success { background:var(--secondary); color:#fff; }
.btn-success:hover { background:var(--secondary-dark); opacity:1; }
.btn-danger  { background:#e74c3c; color:#fff; }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn:hover { opacity:.9; }

/* Forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full { grid-column:1 / -1; }
label { display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
input, select, textarea {
  width:100%; padding:11px 13px; border:1px solid #d9dbe3; border-radius:8px;
  font-size:14px; background:#fff;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); border-color:var(--brand); }
textarea { min-height:80px; resize:vertical; }
.section-title { font-size:17px; font-weight:700; margin:18px 0 10px; }

/* Table */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { background:var(--primary-light); text-align:left; padding:12px 10px; font-size:14px; white-space:nowrap; }
td { padding:12px 10px; border-bottom:1px solid #f0f0f5; font-size:14px; vertical-align:top; }
tr:hover td { background:#f6f4ff; }
.link { color:var(--brand); font-weight:600; }
.paid { color:#1faa59; font-weight:700; }
.remaining { color:#e74c3c; font-weight:700; }
.zero { color:#1faa59; font-weight:700; }

/* Action icons */
.actions a { margin-right:8px; font-size:17px; }

/* Invoice item rows */
.item-row { display:grid; grid-template-columns:2.4fr .7fr 1fr .8fr 1fr 40px; gap:12px; align-items:end;
  background:#f6f4ff; padding:14px; border-radius:10px; margin-bottom:12px; }
.item-row .remove { color:#e74c3c; font-size:20px; background:none; border:none; cursor:pointer; }

/* Totals */
.totals { max-width:420px; margin-left:auto; margin-top:18px; }
.totals .row { display:flex; justify-content:space-between; padding:8px 0; font-size:15px; }
.totals .grand { border-top:2px solid var(--primary); font-size:18px; font-weight:800; padding-top:12px; }

/* Alerts */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px; }
.alert-success { background:#e2f7e9; color:#146b38; }
.alert-danger { background:#fde5e3; color:#a02318; }

/* Dashboard stat cards */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:18px; margin-bottom:24px; }
.stat { background:#fff; border-radius:14px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.stat .num { font-size:26px; font-weight:800; margin-top:6px; color:var(--primary); }
.stat .lbl { color:#777; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--primary); }
.login-box { background:#fff; padding:40px; border-radius:16px; width:380px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.login-box h1 { text-align:center; margin-bottom:22px; color:var(--primary); }
.login-box .field { margin-bottom:16px; }

/* Search bar */
.searchbar { display:flex; gap:10px; flex-wrap:wrap; }
.searchbar input { width:260px; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns:1fr; }
  .item-row { grid-template-columns:1fr 1fr; }
  .sidebar { width:200px; }
}

/* Print invoice */
@media print {
  .no-print { display:none !important; }
  body { background:#fff; }
}

/* Filter bar */
.filterbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  background:#f6f4ff; padding:14px; border-radius:10px; align-items:center; }
.filterbar input[type="text"] { width:250px; }
.filterbar select, .filterbar input[type="date"] { width:auto; min-width:140px; }
.btn-light { background:#e6e8ef; color:#333; }

/* ---- Sidebar Font Awesome icons ---- */
.sidebar nav a i { width:22px; text-align:center; margin-right:10px; font-size:15px; opacity:.9; }
.user-chip i { margin-right:5px; }
.btn i { margin-right:6px; }
.status-badge { padding:4px 12px; border-radius:14px; font-size:12.5px; font-weight:700; }
.status-on  { background:#e6f9ee; color:#1faa59; }
.status-off { background:#fdecec; color:#e74c3c; }

/* ---- Dashboard charts ---- */
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.chart-grid > .card { min-width:0; overflow:hidden; }   /* stops canvas from blowing out page width */
.trend-card { grid-column:1 / -1; }                     /* line chart full width on top */
.chart-card { margin-bottom:0; }
.line-wrap  { position:relative; height:300px; width:100%; }
.donut-wrap { position:relative; height:250px; width:100%; }
@media (max-width:700px) { .chart-grid { grid-template-columns:1fr; } .line-wrap { height:240px; } }

/* ---- Pagination ---- */
.pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.pg-info { color:#777; font-size:13.5px; }
.pg-links { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pg-btn { padding:8px 14px; border-radius:8px; background:#f1f0fb; color:var(--primary); font-weight:600; font-size:14px; }
.pg-btn:hover { background:var(--primary-light); }
.pg-active { background:var(--primary); color:#fff; }
.pg-active:hover { background:var(--primary-dark); }
.pg-dots { color:#999; padding:0 4px; }