/* Extracted from Target.html */

body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 0; background: #fff; color: #111827; }
            .page { max-width: 900px; margin: 24px auto; padding: 24px; border: 1px solid #e5e7eb; border-radius: 14px; }
            .muted { color: #6b7280; }
            .row { display: flex; justify-content: space-between; gap: 16px; }
            .col { flex: 1; }
            h1 { font-size: 24px; margin: 0; }
            .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid #e5e7eb; background: #f9fafb; }
            table { width:100%; border-collapse: collapse; }
            .totals { width: 360px; margin-left: auto; }
            .totals td { padding: 6px 0; }
            .totals tr:last-child td { border-top: 1px solid #e5e7eb; padding-top: 10px; font-weight: 700; }
            @media print { .page { border: none; border-radius: 0; margin: 0; max-width: none; } }


/* Developer info css start */

/* Header */
.dev-header {
  background-color: #0f766e;
}

.dev-header-title {
  color: #facc15;
  font-size: 22px;
  font-weight: bold;
}


/* Image */
.dev-image {
  width: 110px;
  height: 110px;
  object-fit: cover;
}


/* Name */
.dev-name {
  color: #0f766e;
  font-size: 16px;
  font-weight: 600;
}


/* Role / Relation */
.dev-role {
  color: #0369a1;
  font-size: 14px;
}


/* Message */
.dev-message {
  color: #16a34a;
  font-size: 12px;
}


/* Country */
.dev-country {
  color: #15803d;
  font-size: 15px;
  font-weight: bold;
}


/* Developer info css end */

/* Dashboard Responsive Css Start */

/* ========================= */
/* Base Style (default) */
/* ========================= */

.topCustomersRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.customersList{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}


/* ========================= */
/* Small screens (800px ↓) */
/* ========================= */

@media (max-width:800px){

  .topCustomersRow{
    flex-wrap:wrap;
  }

  .customersList{
    flex-wrap:wrap;
    gap:8px;
  }

}


/* ========================= */
/* 801px → 1024px */
/* ========================= */

@media (min-width:801px) and (max-width:1024px){

  .customersList{
    gap:10px;
  }

}


/* ========================= */
/* 1025px → 1366px */
/* ========================= */

@media (min-width:1025px) and (max-width:1366px){

  .customersList{
    gap:12px;
  }

}


/* ========================= */
/* 1367px ↑ */
/* ========================= */

@media (min-width:1367px){

  .topCustomersRow{
    flex-wrap:nowrap;
  }

  .customersList{
    flex-wrap:nowrap;
    gap:16px;
  }

}




/* Default: scrollbar hidden */
.customersList{
  overflow-x:auto;
  scrollbar-width:none; /* Firefox */
}

/* Chrome / Edge / Safari */
.customersList::-webkit-scrollbar{
  height:0px;
}

/* Hover করলে scrollbar show */
.customersList:hover{
  scrollbar-width:thin; /* Firefox */
}

.customersList:hover::-webkit-scrollbar{
  height:6px;
}

.customersList:hover::-webkit-scrollbar-track{
  background:transparent;
}

.customersList:hover::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:10px;
}
/* Dashboard Responsive Css Start */


/* COlorful Dashboard Css Start */

/* =====================================================
   GLOBAL PURE BLACK THEME (Clean & Conflict-Free)
===================================================== */

/* BODY */

body{
background:#0b0b0c;
color:#e5e7eb;
}


/* =====================================================
   SIDEBAR
===================================================== */

aside{
background:#0f0f11;
border-right:1px solid #1f1f23;
color:#e5e7eb;
}

aside .text-slate-500{
color:#9ca3af !important;
}

aside button:hover{
background:#1a1a1d;
}

aside .font-semibold{
color:#f9fafb !important;
}


/* =====================================================
   TOPBAR
===================================================== */

.no-print.sticky{
background:#0f0f11;
border-bottom:1px solid #1f1f23;
color:#e5e7eb;
}

#pageHint{
color:#9ca3af !important;
}

#pageTitle{
color:#f9fafb !important;
}


/* =====================================================
   CARDS
===================================================== */

.bg-white{
background:#141417 !important;
border:1px solid #26262b !important;
color:#e5e7eb !important;

box-shadow:0 6px 20px rgba(0,0,0,0.6);
}

.bg-white:hover{
transform:translateY(-3px);
transition:.2s;
box-shadow:0 10px 30px rgba(0,0,0,0.7);
}


/* =====================================================
   TEXT COLORS
===================================================== */

.text-slate-900,
.text-slate-800,
.text-slate-700{
color:#f3f4f6 !important;
}

.text-slate-600{
color:#d1d5db !important;
}

.text-slate-500{
color:#9ca3af !important;
}

.font-semibold{
color:#ffffff !important;
}

h1,h2,h3,h4{
color:#f9fafb;
}

.text-sm{
color:#d1d5db;
}


/* =====================================================
   TABLE
===================================================== */

table{
color:#e5e7eb;
}

thead{
color:#d1d5db;
}

tbody tr:hover{
background:#021a1a;
}


/* =====================================================
   BUTTONS
===================================================== */

button{
border:1px solid #2a2a30;
color:#f3f4f6;
}

button:hover{
background:#1a1a1d;
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.bg-slate-900{
background:#000000 !important;
border:1px solid #2a2a30;
}

.bg-slate-900:hover{
background:#111111 !important;
}


/* =====================================================
   ICON BACKGROUNDS
===================================================== */

.bg-blue-50,
.bg-indigo-100,
.bg-emerald-100,
.bg-purple-100,
.bg-amber-100{
background:#1a1a1d !important;
color:#e5e7eb !important;
}


/* =====================================================
   ACTION CARDS
===================================================== */

button[data-action]{
background:#121214 !important;
border:1px solid #2a2a30 !important;
color:#f3f4f6 !important;

box-shadow:0 6px 20px rgba(0,0,0,0.6);
}

button[data-action]:hover{
background:#1a1a1d !important;
transform:translateY(-3px);
transition:.2s;
}


/* icon colors */

button[data-action] .bg-amber-500{background:#f59e0b !important;}
button[data-action] .bg-indigo-600{background:#6366f1 !important;}
button[data-action] .bg-purple-600{background:#9333ea !important;}
button[data-action] .bg-blue-600{background:#2563eb !important;}

button[data-action] .rounded-full{
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}


/* =====================================================
   PROFIT STRIP
===================================================== */

/* container */

.bg-emerald-50\/60{
background:#06281a !important;
border:1px solid #14532d !important;
color:#86efac !important;
}


/* net profit card */

.bg-emerald-50{
background:#0f172a !important;
border:1px solid #1f2937 !important;
color:#e5e7eb !important;
}


/* net profit text */

.bg-emerald-50 .text-emerald-700{
color:#22c55e !important;
}

.bg-emerald-50 .text-emerald-800{
color:#4ade80 !important;
}


/* net profit icon */

.bg-emerald-50 .bg-white\/70{
background:#111827 !important;
border:1px solid #374151 !important;
color:#4ade80 !important;
}


/* =====================================================
   INPUTS
===================================================== */

input,
select,
textarea{
background:#121214;
border:1px solid #2a2a30;
color:#e5e7eb;
}

input::placeholder{
color:#6b7280;
}


/* =====================================================
   MODAL
===================================================== */

#modalBackdrop .bg-white{
background:#141417 !important;
border:1px solid #26262b !important;
}

#modalBackdrop .border-slate-200{
border-color:#26262b !important;
}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-track{
background:#0b0b0c;
}

::-webkit-scrollbar-thumb{
background:#2a2a30;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#3a3a40;
}

/* ===== FIX MARKED PROFIT STRIP ===== */

/* strip background black */
#view-dashboard .bg-emerald-50\/60{
background:#0b0b0c !important;
border:1px solid #26262b !important;
}

/* ===== NORMAL STATS ICON FIX ===== */

#view-dashboard .bg-slate-50{
background:#1a1a1d !important;
border:1px solid #2a2a30 !important;
}

#view-dashboard .bg-slate-50 svg{
color:#22c55e !important;
}


/* ===== NET PROFIT ICON ===== */

#view-dashboard .bg-emerald-50 .bg-white\/70{
background:#1a1a1d !important;
border:1px solid #2a2a30 !important;
}

#view-dashboard .bg-emerald-50 .bg-white\/70 svg{
color:#22c55e !important;
}
/* Customers Overview icon fix */

#view-dashboard .bg-slate-100{
background:#1a1a1d !important;
border:1px solid #2a2a30 !important;
}

#view-dashboard .bg-slate-100 svg{
color:#e5e7eb !important;
}
/* Dashboard bottom stats container border fix */

#view-dashboard .rounded-2xl.border,
#view-dashboard .rounded-2xl.ring,
#view-dashboard .rounded-2xl.ring-1{
border-color:#585959 !important;
box-shadow:none !important;
}




/* ===== PURCHASE FORM WHITE BACKGROUND FIX ===== */

#modalBackdrop .bg-slate-50,
#modalBackdrop .bg-slate-100,
#modalBackdrop .bg-gray-50,
#modalBackdrop .bg-gray-100{
background:#141417 !important;
border:1px solid #26262b !important;
color:#e5e7eb !important;
}

/* purchase subtotal strip fix */

#modalBackdrop .bg-slate-200,
#modalBackdrop .bg-gray-200{
background:#141417 !important;
border-top:1px solid #26262b !important;
}

/* ===== CLIENT DROPDOWN BUTTON FIX ===== */

#view-invoice-editor #clientDropdownBtn{
background:#1a1a1d !important;
color:#e5e7eb !important;
border:1px solid #2a2a30 !important;
}

/* hover */
#view-invoice-editor #clientDropdownBtn:hover{
background:#26262b !important;
}

/* ===== ITEM DROPDOWN BUTTON FIX ===== */

#view-invoice-editor .itemDropdownBtn{
background:#1a1a1d !important;
color:#e5e7eb !important;
border:1px solid #2a2a30 !important;
}

#view-invoice-editor .itemDropdownBtn:hover{
background:#26262b !important;
}
/* CLIENT DROPDOWN HOVER FIX */

#invClientResults div:hover{
background:#0f172a !important;
color:#ffffff !important;
}

/* ITEM DROPDOWN HOVER FIX */
/*
.itemSearchResults div:hover{
background:#0f172a !important;
color:#ffffff !important;
}
*/
/* ===== ALL TABLE HEADER STYLE ===== */
/*
table thead th{
color:#036e75 !important;
font-weight:600;
letter-spacing:0.3px;
}

/*or 

/* dark theme background */
/*
table thead.bg-slate-50{
  background:#0f172a !important;
}
*/
/* ===== GLOBAL TABLE HEADER DARK FIX ===== */

table thead.bg-slate-50,
table thead tr.bg-slate-50{
  background:#0f172a !important;
}

table thead.bg-slate-50 th,
table thead tr.bg-slate-50 th{
  color:#00eaff !important;
  font-weight:600;
  letter-spacing:0.4px;
}


/* Track Stock bright color */

#view-items td span.text-emerald-700{
color:#22c55e !important;   /* bright green */
font-weight:600;
}

#view-items td span.text-slate-500{
color:#ef4444 !important;   /* bright red */
font-weight:600;
}
/* Supplier History Modal Table Header Bright */

table thead.bg-slate-50 th{
color:#00eaff !important;
font-weight:600 !important;
letter-spacing:0.4px;
}


/* Supplier History Paid value brighter */

table tbody td.text-emerald-600{
color:#00ffb3 !important;
font-weight:600;
text-shadow:0 0 6px rgba(0,255,179,0.5);
}

/* ===== CHART TEXT FIX FOR DARK DASHBOARD ===== */

canvas{
filter: brightness(1.2) contrast(1.1);
}

/* chart legend text */
.chartjs-render-monitor{
color:#e5e7eb !important;
}

/* improve visibility */
#view-reports canvas{
color:#e5e7eb !important;
}

/* chart container text */
#view-reports{
color:#e2e8f0;
}





/* ===== PROFIT LOSS PAGE FIX ===== */

#view-profitloss .bg-white{
background:#0f172a !important;
}

#view-profitloss .ring-slate-200{
--tw-ring-color:#334155 !important;
}

#view-profitloss .text-slate-500{
color:#94a3b8 !important;
}

#view-profitloss .text-slate-800{
color:#e2e8f0 !important;
}

/* icons */
#view-profitloss .bg-slate-100{
background:#1e293b !important;
}

#view-profitloss svg{
color:#cbd5f1 !important;
}

/* profit cards numbers */
#view-profitloss .text-2xl{
color:#f8fafc;
}

/* NET PROFIT CARD */
#view-profitloss .bg-emerald-100{
background:rgba(16,185,129,0.15) !important;
}

#view-profitloss .ring-emerald-200{
--tw-ring-color:rgba(16,185,129,0.4) !important;
}

#view-profitloss .text-emerald-900{
color:#34d399 !important;
}

#view-profitloss .text-emerald-700{
color:#6ee7b7 !important;
}

/* date inputs */
#view-profitloss input[type="date"]{
background:#020617 !important;
border-color:#334155 !important;
color:#e2e8f0 !important;
}

/* buttons */
#view-profitloss #pl-apply{
background:#0f172a !important;
}

#view-profitloss #pl-reset{
background:#020617 !important;
border:1px solid #334155 !important;
}

/* selected cards icons */
#view-profitloss .h-9.w-9{
background:#1e293b !important;
color:#cbd5f1 !important;
}

/* Sales - Cost text */
#view-profitloss .text-emerald-700{
font-weight:600;
letter-spacing:0.3px;
}

/* numbers alignment */
#view-profitloss .text-2xl,
#view-profitloss .text-xl{
font-variant-numeric: tabular-nums;
}




/* DATE PICKER FIX */

#view-profitloss input[type="date"]{
  background:#020617;
  color:#e2e8f0;
  border:1px solid #1e293b;
  padding:6px 10px;
  color-scheme:dark;
}

/* FORCE DATE ICON */

#view-profitloss input[type="date"]{
  background:#020617 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2e8f0' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center;

  background-size:16px;
  padding-right:36px;
  color:#e2e8f0;
  border:1px solid #1e293b;
}

/* ===== PURCHASE MODAL DROPDOWN HOVER FIX ===== */

/* FORCE PURCHASE DROPDOWN HOVER COLOR */

#modalBackdrop .itemSearchResults div:hover,
#modalBackdrop #supplierResults div:hover,
#modalBackdrop div.hover\:bg-indigo-50:hover{

  background:#0f766e !important;
  color:#ffffff !important;
}


/* ===== INVOICE ITEM DROPDOWN HOVER FIX ===== */

#view-invoice-editor div.hover\:bg-indigo-50:hover{
  background:#0f766e !important;
  color:#ffffff !important;
}
/* CLIENT DROPDOWN HOVER FULL FIX */

#invClientResults div:hover,
#invClientResults div:hover *{
  background:#0f766e !important;
  color:#ffffff !important;
}


/* PROFIT ICON COLORFUL */

#view-profitloss .bg-emerald-100 .h-10{
  background:linear-gradient(135deg,#10b981,#059669) !important;
  border:none !important;
  box-shadow:0 6px 18px rgba(16,185,129,0.45);
}

#view-profitloss .bg-emerald-100 .h-10 span{
  font-size:18px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* SELECTED PROFIT ICON */

#view-profitloss .bg-emerald-100 .h-9{
  background:linear-gradient(135deg,#34d399,#10b981) !important;
  border:none !important;
  box-shadow:0 5px 14px rgba(16,185,129,0.45);
}

#view-profitloss .bg-emerald-100 .h-9 span{
  font-size:16px;
}

/* DASHBOARD ICON COLOR FIX */

#view-dashboard .h-8.w-8,
#view-dashboard .h-9.w-9{
border:none !important;
color:#fff !important;
}

/* Invoice Overview */
#view-dashboard .bg-indigo-100{
background:linear-gradient(135deg,#6366f1,#4f46e5) !important;
}

/* Invoices This Month */
#view-dashboard .bg-blue-50{
background:linear-gradient(135deg,#06b6d4,#0891b2) !important;
}

/* Paid vs Unpaid ICON only */
#view-dashboard .h-8.w-8.bg-emerald-50{
background:linear-gradient(135deg,#22c55e,#16a34a) !important;
}

/* Customers Overview */
#view-dashboard .bg-slate-100{
background:linear-gradient(135deg,#a855f7,#7e22ce) !important;
}

/* Items Overview */
#view-dashboard .bg-purple-100{
background:linear-gradient(135deg,#f59e0b,#d97706) !important;
}

/* Suppliers Overview */
#view-dashboard .bg-amber-100{
background:linear-gradient(135deg,#14b8a6,#0f766e) !important;
}

/* icon color */
#view-dashboard svg{
color:white !important;
}
/* Overdue icon */

#view-dashboard .bg-rose-50{
background:linear-gradient(135deg,#ef4444,#dc2626) !important;
color:white !important;
}

#view-dashboard .bg-rose-50 svg{
color:white !important;
}
/* SALES OVERVIEW ICON BIGGER */

/* FIX SALES OVERVIEW ICON POSITION */

#view-dashboard .absolute.top-4.right-4{
top:12px !important;
right:12px !important;

height:40px !important;
width:40px !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

font-size:30px !important;
}
/* Make date picker icon white in dark UI */
#modalBackdrop input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(2);
  cursor: pointer;
}
/* DELETE WARNING FIX */

#modalBackdrop .bg-rose-50{
background:#3b0d0d !important;
border:1px solid #7f1d1d !important;
color:#fecaca !important;
}

#modalBackdrop .text-rose-800{
color:#fecaca !important;
}

#modalBackdrop .ring-rose-200{
border-color:#7f1d1d !important;
}
/* ============================= */
/* SETTINGS PAGE ROLES BOX FIX */
/* ============================= */

#view-settings .bg-slate-50,
#view-settings .bg-gray-50,
#view-settings .bg-gray-100,

#view-user-settings .bg-slate-50,
#view-user-settings .bg-gray-50,
#view-user-settings .bg-gray-100{

background:#141417 !important;
border:1px solid #2a2a30 !important;
color:#e5e7eb !important;

}

/* USER SETTINGS ROLES TEXT FIX */

#view-user_settings .text-slate-600{
color:#9ca3af !important;
}

#view-user_settings .text-slate-500{
color:#9ca3af !important;
}

#view-user_settings .bg-slate-50{
background:#141417 !important;
border:1px solid #2a2a30 !important;
color:#e5e7eb !important;
}

/* roles text */
#view-settings .text-slate-500{
color:#9ca3af !important;
}

/* roles title */
#view-settings h3{
color:#f9fafb !important;
}
/* ============================= */
/* INVOICE STATUS BADGE FIX */
/* ============================= */

/* Draft */
span.bg-slate-100.text-slate-800{
background:#334155 !important;
color:#f1f5f9 !important;
border:1px solid #475569 !important;
}

/* Cancelled */
span.bg-slate-100.text-slate-700{
background:#3f3f46 !important;
color:#e5e7eb !important;
border:1px solid #52525b !important;
}

/* Sent */
span.bg-blue-50.text-blue-700{
background:#1e3a8a !important;
color:#93c5fd !important;
border:1px solid #1d4ed8 !important;
}

/* Paid */
span.bg-emerald-50.text-emerald-700{
background:#064e3b !important;
color:#6ee7b7 !important;
border:1px solid #10b981 !important;
}

/* Partially Paid */
span.bg-amber-50.text-amber-700{
background:#78350f !important;
color:#fcd34d !important;
border:1px solid #f59e0b !important;
}

/* Overdue */
span.bg-rose-50.text-rose-700{
background:#7f1d1d !important;
color:#fecaca !important;
border:1px solid #ef4444 !important;
}

/* ===== CLEAN PREMIUM DASHBOARD BUTTONS ===== */

.no-print.sticky button{

background:#111827 !important;
color:#e5e7eb !important;

border:1px solid #374151 !important;

padding:8px 16px !important;
border-radius:10px !important;

font-size:14px;
font-weight:500;

transition:all .2s ease;

}

/* hover */

.no-print.sticky button:hover{

background:#1f2937 !important;
border-color:#4b5563 !important;

transform:translateY(-1px);

}

/* ===== TOPBAR BUTTON ACCENTS ===== */

#quickAddItem{
border-color:#7c3aed !important;
}

#quickAddClient{
border-color:#10b981 !important;
}

#quickCreateInvoice{
border-color:#2563eb !important;
}

#quickAddPayment{
border-color:#f59e0b !important;
}

#quickAddExpenseCategory{
border-color:#ec4899 !important;
}

#quickAddExpense{
border-color:#ef4444 !important;
}
/* ===== FIX TOPBAR BUTTON ALIGNMENT ===== */

.no-print.sticky .flex.items-center.gap-2{
margin-right:24px !important;
}
/* =====InvoicePage PAYMENTS TABLE DARK FIX ===== */

#view-invoice-editor table{
background:#141417 !important;
color:#e5e7eb !important;
}

#view-invoice-editor table thead{
background:#1a1a1d !important;
color:#9ca3af !important;
}

#view-invoice-editor table tbody tr{
background:#141417 !important;
border-color:#26262b !important;
}

#view-invoice-editor table tbody tr:hover{
background:#1f1f23 !important;
}

/* delete button */
#view-invoice-editor table button{
background:#1f1f23 !important;
border:1px solid #2a2a30 !important;
color:#f3f4f6 !important;
}

#view-invoice-editor table button:hover{
background:#26262b !important;
}

/* ===== FIX PAYMENTS HEADER ===== */

#view-invoice-editor .bg-slate-50 > .px-3.py-2.text-xs {
    
    background: #020617 !important;   /* dark header */
    color: #38bdf8 !important;        /* cyan text */

    font-weight: 600;
    letter-spacing: .5px;

    border-bottom: 1px solid #334155 !important;
}
/* ===== INVOICE PAGE DATE PICKER ICON WHITE ===== */

#view-invoice-editor input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(2);
  cursor:pointer;
}
/* ===== INVOICE HISTORY DATE PICKER ICON WHITE ===== */

#view-history input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(2);
  cursor:pointer;
}






/* ===============================
   TOP PROFILE BUTTON
================================*/

.top-profile-wrap{
  position: relative;
}

.top-profile-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 16px 0 10px;
  border-radius: 14px;
  border: 1px solid #d9dee7;
  background: #ffffff;
  color: #334155;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  cursor: pointer;
  transition: all .2s ease;
}

.top-profile-btn:hover{
  background: #f8fafc;
}

.top-profile-avatar{
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.top-profile-name{
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.top-profile-arrow{
  width: 16px;
  height: 16px;
  color: #64748b;
  flex-shrink: 0;
}

/* ===============================
   DROPDOWN MENU
================================*/

.top-profile-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 255px;
  border-radius: 18px;
  background: #d8ebef;
  border: 1px solid #c5d8dd;
  box-shadow:0 25px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 70;
}

.top-profile-menu.hidden{
  display: none;
}

/* ===============================
   PROFILE HEADER
================================*/

.top-profile-menu-head{
  padding: 18px 18px 14px;
  text-align: center;
  background: #cfe2e7;
  border-bottom: 1px solid #b8d0d6;
}

.top-profile-menu-avatar{
display:block;
width:72px;
height:72px;
border-radius:9999px;
object-fit:cover;
margin:6px auto 6px;
border:3px solid #ffffff;
}

.top-profile-menu-name{
  font-size: 20px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1.2;
}

.top-profile-menu-role{

display:inline-block;

margin-top:8px;
padding:4px 10px;

font-size:12px;
font-weight:600;

background:#dc2626;     /* red background */
color:#ffffff;          /* white text */

border-radius:999px;    /* pill shape */

letter-spacing:.3px;

}

/* ===============================
   MENU ITEMS
================================*/

.top-profile-item{
  display:flex;
  align-items:center;
  gap:10px;

  width: calc(100% - 14px);
  margin: 6px 7px 0;
  padding: 11px 14px;

  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;

  color: #334155;
  font-weight: 600;
  cursor: pointer;

  transition: all .2s ease;
}

.top-profile-item:hover{
  background: #f1f5f9;
  transform: translateY(-1px);
}

/* ===============================
   ICON STYLE
================================*/

.top-icon{
  width:28px;
  height:28px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  color:white;
  background:#16a34a;
  flex-shrink:0;
}

/* ===============================
   LOGOUT STYLE
================================*/

.top-profile-logout{
  margin-bottom: 8px;
  color: #dc2626;
}

.top-profile-logout .top-icon{
  background:#dc2626;
}
/* ===== EDIT USER MODAL FIX ===== */

#modalBackdrop{
align-items:flex-start !important;
padding-top:60px;
}

#modalBackdrop > div{
max-height:85vh !important;
overflow-y:auto !important;
}

/* =====================================
   GLOBAL TABLE ACTION BUTTON FIX
===================================== */

table td button{
width:34px;
height:34px;
}

#view-settings table td button{
width:auto !important;
height:auto !important;
padding:4px 10px !important;
}

/* hover */

table td button:hover{

background:#1e293b !important;
border-color:#475569 !important;

transform:translateY(-1px);

}

/* icon color */

table td button svg{
color:#e5e7eb !important;
}

/* delete button */

table td button.text-rose-600{
background:#3b0d0d !important;
border:1px solid #7f1d1d !important;
color:#fecaca !important;
}

table td button.text-rose-600:hover{
background:#7f1d1d !important;
}
/* =====================================
   SETTINGS PAGE RESPONSIVE FIX
===================================== */

#view-settings table{
width:100%;
min-width:600px;
}

#view-settings td{
vertical-align:middle;
}

/* actions buttons container */

#view-settings td:last-child{
white-space:nowrap;
}

/* buttons */

#view-settings td:last-child button{

padding:3px 8px !important;
font-size:12px;
border-radius:6px;

}

/* ========================= */
/* ≤800px (Mobile)
/* ========================= */

@media (max-width:800px){

#view-settings .grid{
grid-template-columns:1fr !important;
}

#view-settings table{
min-width:500px;
}

#view-settings td:last-child{
flex-direction:column;
align-items:flex-start;
}

}

/* ========================= */
/* 801 → 1024px (Tablet)
/* ========================= */

@media (min-width:801px) and (max-width:1024px){

#view-settings td:last-child{
flex-wrap:wrap;
gap:6px;
}

#view-settings td:last-child button{
font-size:11px;
padding:4px 8px !important;
}

}

/* ========================= */
/* 1025 → 1366px
/* ========================= */

@media (min-width:1025px) and (max-width:1366px){

#view-settings td:last-child{
gap:8px;
}

}

/* ========================= */
/* ≥1367px (Large Desktop)
/* ========================= */

@media (min-width:1367px){

#view-settings td:last-child{
gap:10px;
}

}

/* ===============================
   SETTINGS TABLE ROW HEIGHT FIX
================================*/

#view-settings table td{
padding:6px 10px !important;
}

#view-settings table th{
padding:8px 10px !important;
}

#view-settings table tbody tr{
height:44px;
}


/* SETTINGS ICON BUTTON */

#view-settings .icon-btn{

width:30px;
height:30px;

display:inline-flex;
align-items:center;
justify-content:center;

border-radius:6px;
border:1px solid #334155;

background:#0f172a;
color:#e5e7eb;

font-size:14px;
padding:0;

}

#view-settings .icon-btn:hover{

background:#1e293b;
border-color:#475569;

}

/* SETTINGS TABLE NO WRAP */

#view-settings table{
white-space:nowrap;
}

#view-settings th,
#view-settings td{
white-space:nowrap;
}

#view-settings td:first-child{
min-width:170px;
}

/* DELETE ICON RED */

button[data-action*="delete"] svg{
color:#ef4444 !important;
}

button[data-action*="delete"]:hover svg{
color:#dc2626 !important;
}
/* =========================
   ACTION ICON COLORS
========================= */

/* PAYMENT */
button[data-action*="payment"] svg,
button[data-action*="addPayment"] svg,
button[data-action*="clientAddPayment"] svg{
color:#10b981 !important;   /* emerald */
}

/* EDIT */
button[data-action*="edit"]{
color:#fbbf24 !important;   /* yellow pencil */
}

/* DELETE */
button[data-action*="delete"] svg{
color:#ef4444 !important;   /* red */
}

/* REMOVE LINE */
button[data-action="removeLine"]{
color:#ef4444 !important;
}

/* ===============================
   DEVELOPER SECTION (PREMIUM)
================================*/

/* Header */

.dev-header{
background:linear-gradient(135deg,#115e59,#0f766e);
border-bottom:1px solid #1f2937;
}

.dev-header-title{
color:#e5e7eb;
font-size:20px;
font-weight:600;
letter-spacing:.4px;
}


/* Card */

.dev-card{
padding:10px;
}


/* Image */

.dev-image{
width:105px;
height:105px;
object-fit:cover;

border-radius:8px;

border:1px solid #374151;

box-shadow:0 6px 18px rgba(0,0,0,0.45);
}


/* Name */

.dev-name{
color:#f1f5f9;
font-size:15px;
font-weight:600;
margin-top:6px;
}


/* Role / Relation */

.dev-role{
color:#9ca3af;
font-size:13px;
margin-top:2px;
}


/* Message */

.dev-message{
color:#38bdf8;
font-size:12px;
margin-top:4px;
}


/* Country */

.dev-country{
color:#22c55e;
font-size:13px;
font-weight:600;
margin-top:4px;
letter-spacing:.3px;
}

/* FIX DISABLED BUTTON WHITE ISSUE */

button:disabled{

background:#121214 !important;
border:1px solid #2a2a30 !important;
color:#6b7280 !important;

opacity:.6;
cursor:not-allowed;

}
/* LOGIN ERROR TEXT FIX */

#loginError{
color:#ef4444 !important;   /* bright red */
font-weight:600;
}
/* ===============================
   GLOBAL SELECT DROPDOWN FIX
   (Items + Clients)
================================*/

select{

background:#111827;
color:#e5e7eb;

border:1px solid #374151;

outline:none;
box-shadow:none;

transition:none !important;

}

/* focus flicker remove */

select:focus{
outline:none;
box-shadow:none;
}

/* option color */

select option{
background:#0b0b0c;
color:#e5e7eb;
}
/* ======================================
   FIX PAYMENTS EMPTY WHITE BOX
   (INVOICE EDITOR ONLY)
====================================== */

#view-invoice-editor .rounded-2xl.bg-white .bg-slate-50,
#view-invoice-editor .rounded-2xl.bg-white .bg-white{
background:#141417 !important;
border-color:#26262b !important;
color:#e5e7eb !important;
}

/* empty payments row */

#view-invoice-editor .rounded-2xl.bg-white .text-slate-500{
color:#9ca3af !important;
}

/* payments table container */

#view-invoice-editor .rounded-2xl.bg-white div[class*="bg"]{
background:#141417 !important;
}

/* QUICK ACTION BUTTONS */

.qa-btn{
display:flex;
align-items:center;
gap:6px;

background:#111827;
border:1px solid #374151;
color:#e5e7eb;

padding:8px 14px;
border-radius:10px;

font-size:14px;
font-weight:500;

transition:.2s;
}

.qa-btn:hover{
background:#1f2937;
transform:translateY(-1px);
}

.qa-icon{
font-size:15px;
}

/* mobile toggle */

.qa-toggle{
display:none;

background:#111827;
border:1px solid #374151;
color:#e5e7eb;

padding:8px 14px;
border-radius:10px;
}

/* MOBILE */

@media (max-width:900px){

.qa-btn{
display:none;
}

.qa-toggle{
display:flex;
align-items:center;
}

.quick-actions.open .qa-btn{
display:flex;
width:100%;
}

.quick-actions{
flex-direction:column;
align-items:flex-end;
}

}
/* Expense Category button */

#quickAddExpenseCategory{
border-color:#06b6d4 !important;   /* cyan */
}

/* Add Expense button */

#quickAddExpense{
border-color:#ef4444 !important;   /* red */
}

/* ADD CLIENT ICON COLOR FIX */

#quickAddClient .qa-icon{
color:#f59e0b !important;
filter: brightness(1.2);
}
/* ================================
   DASHBOARD RECENT INVOICE STATUS FIX Start
================================ */

#view-dashboard span.bg-blue-50.text-blue-700{
background:#1e3a8a !important;
color:#93c5fd !important;
border:1px solid #1d4ed8 !important;
}

#view-dashboard span.bg-emerald-50.text-emerald-700{
background:#064e3b !important;
color:#6ee7b7 !important;
border:1px solid #10b981 !important;
}

#view-dashboard span.bg-amber-50.text-amber-700{
background:#78350f !important;
color:#fcd34d !important;
border:1px solid #f59e0b !important;
}



/* Dashboard Recent Invoce Status Fix End */


/* ===============================
   LOGIN OVERLAY
================================*/

#loginOverlay{
position:fixed;
inset:0;
width:100%;
height:100vh;
min-height:100vh;

align-items:center;
justify-content:center;

overflow:hidden;
}

/* overlay visible only when NOT hidden */

#loginOverlay:not(.hidden){
display:flex;
}


/* ===============================
   BACKGROUND VIDEO / IMAGE
================================*/

#loginVideo,
#loginFallback{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}


/* ===============================
   OVERLAY DARK CONTROL
================================*/

#loginOverlay::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.28);
z-index:-1;
}


/* ===============================
   LOGIN CARD (PREMIUM GLASS)
================================*/

.login-card{

background: linear-gradient(
135deg,
rgba(30,30,30,0.75),
rgba(80,80,80,0.45)
);

backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);

border:1px solid rgba(255,255,255,0.18);

border-radius:18px;

box-shadow:
0 40px 120px rgba(0,0,0,0.75),
0 0 40px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.15);

color:#ffffff;

transition:all .3s ease;

}


/* ===============================
   TITLE
================================*/

.login-card h2{

font-size:24px;
font-weight:700;

letter-spacing:.3px;

text-shadow:0 4px 18px rgba(255,255,255,0.18);

}


/* ===============================
   LABEL
================================*/

.login-card label{

color:rgba(255,255,255,0.85);
font-weight:500;

}


/* ===============================
   INPUT
================================*/

#loginOverlay input{

background: rgba(255,255,255,0.18);

border:1px solid rgba(255,255,255,0.30);

color:white;

border-radius:10px;

padding:11px 14px;

transition:all .2s ease;

}


/* placeholder */

#loginOverlay input::placeholder{

color:rgba(255,255,255,0.55);

}


/* focus glow */

#loginOverlay input:focus{

border-color:#3b82f6;

box-shadow:0 0 0 2px rgba(59,130,246,0.35);

background: rgba(255,255,255,0.25);

}


/* ===============================
   BUTTON
================================*/

.login-card button{

background:linear-gradient(135deg,#020617,#111827);

border:none;

font-weight:600;

letter-spacing:.3px;

padding:10px;

border-radius:10px;

box-shadow:0 8px 25px rgba(0,0,0,0.45);

transition:all .2s ease;

}

.login-card button:hover{

background:linear-gradient(135deg,#0f172a,#020617);

transform:translateY(-2px);

box-shadow:0 12px 35px rgba(0,0,0,0.55);

}


/* ===============================
   FOOTER
================================*/

.login-card .copyright{

color:rgba(255,255,255,0.6);

font-size:12px;

text-align:center;

margin-top:10px;

}