.head-1{
    font-size: 11px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;

 }

 .head-2{
    font-size: 14px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;

 }

 .text-18{
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
 }

 body {
    font-family: 'Inter', sans-serif;
 }

 h1, h2, h3, h4, h5, h6, .outfit-font {
    font-family: 'Outfit', sans-serif;
 }

.d-text{
   display: block;
   padding: 3px 0 3px 0;

}
.sp-1{
   width: 50em !important;
   padding: 2px;

}

.form-label{
        font-size: 11px;
        font-weight: 800;
        
    }

/* ════════════════════════════════════════════════════════════════════
   CUSTOM UI STYLES
   Moved from inline style blocks in bills.php, add_bill.php, edit_bill.php, vendor.php 
   ════════════════════════════════════════════════════════════════════ */

/* Hero Headers */
.bill-hero { background:linear-gradient(135deg,#3b82f6 0%,#6366f1 52%,#8b5cf6 100%); padding:32px 32px 72px; border-radius:0 0 24px 24px; position:relative; overflow:hidden; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.15); }
.bill-hero::before { content:''; position:absolute; bottom:-1px; left:0; right:0; height:40px; background:#f4f6fb; border-radius:50% 50% 0 0/100% 100% 0 0; pointer-events:none; }
.bill-hero::after { content:''; position:absolute; top:-50px; right:-70px; width:220px; height:220px; background:rgba(255,255,255,.1); border-radius:50%; animation:borbf 12s ease-in-out infinite; pointer-events:none; backdrop-filter: blur(5px); }
@keyframes borbf { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-18px,14px)} }
.bill-hero h1 { font-family:'Outfit',sans-serif; font-size:23px; font-weight:800; color:#fff; margin:0 0 4px; position:relative; z-index:2; }
.bill-hero p { font-size:13px; color:rgba(255,255,255,.78); margin:0; position:relative; z-index:2; }
.bill-hero .breadcrumb { background:transparent; padding:0; margin:0 0 12px; position:relative; z-index:2; }
.bill-hero .breadcrumb-item a { color:rgba(255,255,255,.75); font-size:12.5px; text-decoration:none; }
.bill-hero .breadcrumb-item.active { color:rgba(255,255,255,.55); font-size:12.5px; }
.bill-hero .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.4); }

.vendor-hero { background:#fff; padding:30px 40px; border-bottom:1px solid #e9ecef; position:relative; }
.vendor-hero h1 { font-family:'Outfit', sans-serif; font-weight:800; color:#212529; margin:0; font-size:28px; }
.vendor-hero p { color:#6c757d; margin:4px 0 0 0; font-size:14px; }

/* Body Layouts */
.bill-body { padding:0 28px 40px; background:#f4f6fb; }
.addbill-body { padding:40px; background:#f4f6fb; min-height:calc(100vh - 120px); }
.vendor-body { padding:40px; background:#f8f9fa; min-height:calc(100vh - 120px); }

/* KPI Strips */
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:-38px; margin-bottom:24px; position:relative; z-index:2; }
@media(max-width:900px){ .kpi-strip{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .kpi-strip{grid-template-columns:1fr;} }
.kpi-sc { background:#fff; border:1px solid rgba(226, 232, 240, 0.8); border-radius:16px; padding:20px 22px 16px; box-shadow:0 4px 20px rgba(0,0,0,.03); position:relative; overflow:hidden; transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1); }
.kpi-sc:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.06); }
.kpi-sc::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:16px 0 0 16px; transition: width 0.3s ease; }
.kpi-sc:hover::before { width: 6px; }
.kpi-sc.blue::before { background:linear-gradient(180deg, #3b82f6, #6366f1); } .kpi-sc.green::before { background:linear-gradient(180deg, #10b981, #059669); }
.kpi-sc.red::before { background:linear-gradient(180deg, #ef4444, #dc2626); } .kpi-sc.amber::before { background:linear-gradient(180deg, #f59e0b, #d97706); }
.kpi-si { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:12px; }
.kpi-sc.blue .kpi-si { background:#e8f0fe; color:#0d6efd; } .kpi-sc.green .kpi-si { background:#d1f2e3; color:#198754; }
.kpi-sc.red .kpi-si { background:#fde8ea; color:#dc3545; } .kpi-sc.amber .kpi-si { background:#fff3cd; color:#d97706; }
.kpi-sl { font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#6c757d; margin-bottom:4px; }
.kpi-sv { font-family:'Outfit',sans-serif; font-size:20px; font-weight:800; color:#212529; line-height:1; }
.kpi-ss { font-size:11px; color:#6c757d; margin-top:6px; }

/* Panels */
.bill-panel { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border:1px solid rgba(226, 232, 240, 0.8); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.03); overflow:hidden; margin-bottom:24px; transition: all 0.3s ease; }
.bill-panel:hover { box-shadow:0 15px 35px rgba(0,0,0,.05); }
.bill-ph { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid rgba(226, 232, 240, 0.8); flex-wrap:wrap; gap:10px; background:linear-gradient(to right, rgba(248, 250, 252, 0.5), transparent); }
.bill-pt { font-family:'Outfit', sans-serif; font-size:16px; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:8px; margin:0; }

.ab-panel { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border:1px solid rgba(226, 232, 240, 0.8); border-radius:20px; margin-bottom:24px; box-shadow:0 10px 40px rgba(0,0,0,.04); overflow:hidden; }
.ab-ph { background:linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(255, 255, 255, 0.8)); padding:24px 28px; border-bottom:1px solid rgba(241, 245, 249, 0.8); display:flex; justify-content:space-between; align-items:center; }
.ab-pt { font-family:'Outfit', sans-serif; font-size:18px; font-weight:700; color:#1e293b; margin:0; display:flex; align-items:center; gap:10px; }
.ab-pb { padding:28px; }

.v-panel { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border:1px solid rgba(226, 232, 240, 0.8); border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.04); overflow:hidden; }

/* Meta Grid */
.bill-meta-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; }
.meta-card { background:linear-gradient(145deg, #f8fafc, #f1f5f9); border:1px solid #e2e8f0; border-radius:16px; padding:20px; box-shadow:inset 0 2px 4px rgba(255,255,255,0.5); transition:transform 0.2s; }
.meta-card:hover { transform: translateY(-2px); }
.meta-label { font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.meta-fl { font-size:14px; color:#334155; margin-bottom:8px; font-weight:500; }

/* Dynamic Rows */
.items-div { display:flex; align-items:flex-start; gap:8px; padding:12px; background:#fff; border:1px solid #e9ecef; border-radius:10px; margin-bottom:10px; box-shadow:0 2px 4px rgba(0,0,0,.02); transition:all .2s; }
.items-div:hover { border-color:#dee2e6; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.col-item { flex:2; min-width:180px; }
.col-exp { flex:1.5; min-width:150px; }
.col-desc { flex:2; min-width:180px; }
.col-qty { width:80px; }
.col-amt { width:130px; }
.col-tax { width:120px; }
.col-act { width:40px; display:flex; justify-content:flex-end; padding-top:6px; }

/* Totals Card */
.totals-card { background:#f8f9fa; border:1px solid #e9ecef; border-radius:12px; padding:20px; min-width:260px; }
.totals-row { display:flex; justify-content:space-between; margin-bottom:12px; font-size:14px; color:#495057; }
.totals-row span:last-child { font-weight:600; color:#212529; }
.totals-row:last-child { margin-bottom:0; padding-top:12px; border-top:1px solid #dee2e6; font-size:18px; font-weight:800; color:#0d6efd; }
.totals-row:last-child span:last-child { color:#0d6efd; font-family:'Outfit',sans-serif; }

/* Tables */
.bill-tbl thead th { background:#fafbfc; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#6c757d; border-bottom:1px solid #e9ecef; padding:11px 14px; white-space:nowrap; }
.bill-tbl tbody td { font-size:13px; color:#495057; padding:12px 14px; border-bottom:1px solid #f4f5f7; vertical-align:middle; }
.bill-tbl tbody tr:hover td { background:#f8f9fe; color:#212529; }
.bill-tbl tbody tr:last-child td { border-bottom:none; }

/* Badges */
.b-paid { background:#d1f2e3; color:#0f6b42; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.b-paid::before { content:'●'; font-size:7px; color:#198754; }
.b-unpaid { background:#f8f9fa; color:#6c757d; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.b-unpaid::before { content:'●'; font-size:7px; color:#adb5bd; }
.b-amber { background:#fff3cd; color:#d97706; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.b-amber::before { content:'●'; font-size:7px; color:#ffc107; }
.b-overdue { background:#fde8ea; color:#842029; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.b-overdue::before { content:'●'; font-size:7px; color:#dc3545; }

/* Action buttons */
.btn-record { font-family:'Inter', sans-serif; font-size:13px; font-weight:600; padding:6px 14px; border-radius:24px; background:#eff6ff; color:#3b82f6; border:none; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease; cursor:pointer; }
.btn-record:hover { background:#3b82f6; color:#fff; transform:translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }
.btn-add-bill { font-family:'Inter', sans-serif; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none; border-radius:50px; padding:12px 28px; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 8px 20px rgba(99, 102, 241, 0.25); transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration:none; display:inline-flex; align-items:center; gap:8px; position:relative; z-index:10; }
.btn-add-bill:hover { background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; transform:translateY(-3px); box-shadow:0 12px 28px rgba(99, 102, 241, 0.35); }
.btn-add-item { display:inline-flex; align-items:center; gap:8px; background:#eff6ff; color:#3b82f6; border:none; border-radius:24px; padding:8px 20px; font-size:13px; font-weight:600; transition:all .3s ease; cursor:pointer; }
.btn-add-item:hover { background:#3b82f6; color:#fff; transform:translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }
.btn-submit-bill { font-family:'Inter', sans-serif; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none; border-radius:50px; padding:14px 40px; font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:10px; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer; box-shadow:0 8px 24px rgba(99, 102, 241, 0.25); }
.btn-submit-bill:hover:not(:disabled) { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 32px rgba(99, 102, 241, 0.35); color:#fff; }
.btn-submit-bill:disabled { opacity:.55; cursor:not-allowed; background:#94a3b8; box-shadow:none; }
.btn-add-vendor { font-family:'Inter', sans-serif; background:linear-gradient(135deg, #3b82f6, #6366f1); color:#fff; border:none; border-radius:50px; padding:12px 28px; font-size:14px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 8px 20px rgba(99, 102, 241, 0.25); cursor:pointer; }
.btn-add-vendor:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(99, 102, 241, 0.35); color:#fff; }

/* Modals */
.modal-hdr-blue { background:linear-gradient(135deg,#0d6efd,#3b82f6); color:#fff; border-bottom:none; padding:20px 24px; }
.modal-hdr-blue .modal-title { font-weight:700; font-family:'Outfit',sans-serif; }
.btn-close-white { filter:brightness(0) invert(1); opacity:.8; }
.btn-close-white:hover { opacity:1; }

/* Wave Strip */
.wave-strip { height:4px; background:linear-gradient(90deg,#0d6efd 0%,#0dcaf0 40%,#20c997 70%,#6f42c1 100%); }

/* ════════════════════════════════════════════════════════════════════
   THEME OVERRIDES FOR SB-ADMIN V7
   ════════════════════════════════════════════════════════════════════ */
.sb-topnav.navbar-dark.bg-dark,
.sb-sidenav-dark,
body.sb-nav-fixed .sb-topnav {
    background: linear-gradient(180deg, #1e1b4b 0%, #2e1065 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover,
.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #8b5cf6 !important;
    transform: translateX(2px);
}

/* Sidebar Footer Theme Alignment */
.sb-sidenav-dark .sb-sidenav-footer {
    background-color: rgba(15, 23, 42, 0.6) !important;
    color: #e2e8f0 !important;
}
.sb-sidenav-dark .sb-sidenav-footer .text-primary-subtle {
    color: #a5b4fc !important;
}