/* Reset & Base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI','Tahoma',sans-serif;background:#f0f2f5;color:#333;line-height:1.6}

/* Navbar */
.navbar{background:linear-gradient(135deg,#2c3e50,#3498db);color:#fff;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;height:60px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.nav-brand{font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:.6rem}
.nav-logo{height:36px;width:auto;max-width:120px;object-fit:contain;border-radius:6px;background:#fff;padding:2px;display:block;flex-shrink:0}
.nav-links{display:flex;gap:1rem}
.nav-links a{color:rgba(255,255,255,.8);text-decoration:none;padding:.5rem 1rem;border-radius:6px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.15)}

/* Container */
.container{max-width:1100px;margin:2rem auto;padding:0 1rem}

/* Card */
.card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);margin-bottom:1.5rem;overflow:hidden}
.card-header{padding:1rem 1.5rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background:#fafbfc}
.card-header h2{font-size:1.1rem}
.card-body{padding:1.5rem}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column}
.form-group.full-width{grid-column:1/-1}
.form-group label{font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:#555}
.form-group input,.form-group select,.form-group textarea{padding:.6rem .8rem;border:1px solid #ddd;border-radius:8px;font-size:.95rem;transition:.2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px rgba(52,152,219,.15)}
.form-actions{margin-top:1.5rem;display:flex;gap:.5rem}

/* Buttons */
.btn{display:inline-block;padding:.5rem 1.2rem;border:1px solid #ddd;border-radius:8px;background:#fff;color:#333;text-decoration:none;cursor:pointer;font-size:.9rem;transition:.2s}
.btn:hover{background:#f0f0f0}
.btn-primary{background:#3498db;color:#fff;border-color:#3498db}
.btn-primary:hover{background:#2980b9}
.btn-success{background:#27ae60;color:#fff;border-color:#27ae60}
.btn-success:hover{background:#219a52}
.btn-danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
.btn-danger:hover{background:#c0392b}
.btn-secondary{background:#6c757d;color:#fff;border-color:#6c757d}
.btn-secondary:hover{background:#5a6268}
.btn-sm{padding:.3rem .7rem;font-size:.8rem}

/* Table */
.table{width:100%;border-collapse:collapse;margin-top:.5rem}
.table th,.table td{padding:.7rem .8rem;text-align:left;border-bottom:1px solid #eee;font-size:.9rem}
.table th{background:#f8f9fa;font-weight:600;color:#555}
.table tr:hover{background:#f8f9fa}
.table .actions{display:flex;gap:.3rem;flex-wrap:wrap}

/* Badge */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-draft{background:#fff3cd;color:#856404}
.badge-approved{background:#d4edda;color:#155724}
.badge-unpaid{background:#f8d7da;color:#721c24}
.badge-paid{background:#d1ecf1;color:#0c5460}

/* Totals */
.totals-preview{margin-top:1.5rem;padding:1rem;background:#f8f9fa;border-radius:8px;text-align:right}
.totals-preview p{margin:.2rem 0;font-size:.9rem}
.totals-preview .grand-total{font-size:1.2rem;font-weight:700;color:#2c3e50;margin-top:.5rem}

/* Text */
.text-muted{color:#999;font-style:italic}
.text-muted a{color:#3498db}

/* Invoice info */
.invoice-info{margin-bottom:1rem;padding:1rem;background:#f8f9fa;border-radius:8px}

/* Responsive */
@media(max-width:768px){
  .form-grid{grid-template-columns:1fr}
  .navbar{flex-direction:column;height:auto;padding:1rem}
  .nav-links{margin-top:.5rem}
  .table{font-size:.8rem}
  .card-header{flex-direction:column;gap:.5rem;align-items:flex-start}
}

/* Item Template Card */
.tpl-card{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border:1px solid #e9ecef;border-radius:10px;margin-bottom:.5rem;transition:.15s;cursor:pointer}
.tpl-card:hover{background:#f8f9fa;border-color:#3498db;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tpl-card .tpl-price{font-weight:700;color:#27ae60;font-size:1rem}
.tpl-card .tpl-cat{font-size:.7rem;color:#888;background:#f0f2f5;padding:.1rem .4rem;border-radius:4px;margin-left:.4rem}

/* Withholding Tax */
.wht-badge{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;background:#fff3cd;color:#856404;border:1px solid #ffc107;margin-left:.3rem}
.wht-active{background:#fde8e8;border-color:#e74c3c}

/* PDF Theme Swatches */
.theme-swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.theme-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:3px solid transparent;transition:.2s;display:inline-flex;align-items:center;justify-content:center}
.theme-swatch:hover{transform:scale(1.15)}
.theme-swatch.active{border-color:#333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333}
.theme-swatch .check{color:#fff;font-size:.75rem;opacity:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.theme-swatch.active .check{opacity:1}
.swatch-purple{background:linear-gradient(135deg,#4A3B6B,#6B5B8A)}
.swatch-blue{background:linear-gradient(135deg,#1A5276,#2980B9)}
.swatch-green{background:linear-gradient(135deg,#1E8449,#27AE60)}
.swatch-red{background:linear-gradient(135deg,#922B21,#C0392B)}
.swatch-orange{background:linear-gradient(135deg,#CA6F1E,#E67E22)}
.swatch-dark{background:linear-gradient(135deg,#2C3E50,#34495E)}

/* Table theme badge */
.theme-badge{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}

/* Navbar user & logout */
.nav-user{color:rgba(255,255,255,.7);padding:.5rem .8rem;font-size:.85rem;display:inline-flex;align-items:center}
.nav-logout{color:#fff;background:rgba(231,76,60,.7);text-decoration:none;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;transition:.2s}
.nav-logout:hover{background:rgba(231,76,60,1)}