@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800&family=Noto+Serif+Bengali:wght@600;700;800&display=swap');

/* 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;
}



/* =====================================================
   CLIENT PAYMENT MODAL — ACTIVE INVOICE
   Active invoice uses pink text only; no row background.
   This is intentionally independent of Tailwind's runtime
   class scanning so dynamically-rendered rows stay reliable.
===================================================== */
.client-payment-active-invoice,
.client-payment-active-invoice td{
  color:#f472b6 !important;
  font-weight:600 !important;
}

/* =====================================================
   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);

}


/* ===============================
   FORGOT PASSWORD LINK ROW
   Visual-only styling: keeps the existing #forgotPasswordLink
   click handler and recovery logic unchanged.
================================*/

.login-forgot-row{
  width:100%;
  min-height:34px;
  gap:12px;
}

.login-card button.login-forgot-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:132px;
  padding:9px 13px;
  border-radius:9px;
  background:rgba(2, 6, 23, 0.78);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.30);
  color:rgba(255,255,255,0.88);
  font-size:12px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  transform:none;
}

.login-card button.login-forgot-button:hover{
  background:rgba(15, 23, 42, 0.92);
  color:#fff;
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 8px 22px rgba(0,0,0,0.38);
  transform:none;
}

.login-card button.login-forgot-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,0.20), 0 8px 22px rgba(0,0,0,0.38);
}

.login-forgot-hint{
  flex:1 1 auto;
  min-width:0;
  text-align:right;
  color:rgba(255,255,255,0.58);
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}

@media (max-width:420px){
  .login-forgot-row{
    gap:8px;
  }
  .login-card button.login-forgot-button{
    min-width:126px;
    padding-left:11px;
    padding-right:11px;
  }
  .login-forgot-hint{
    font-size:10px;
  }
}


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

.login-card .copyright{

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

font-size:12px;

text-align:center;

margin-top:10px;

}

/* ==========================================
   Backup Button Override
========================================== */
/* Backup Button */

.backup-img{
    width:40px;
    height:40px;
    object-fit:contain;
    display:block;
    cursor:pointer;
    user-select:none;
}



/* ===========================
   USER PHOTO INPUT FIX
=========================== */

#userPhoto{
    display:block;
    width:100%;
    height:42px;

    padding:0;
    margin:0;
	margin-top: -5px;

    background:#121214;
    border:1px solid #2a2a30;
    border-radius:10px;

    color:#e5e7eb;

    overflow:hidden;
}

#userPhoto::file-selector-button{

    height:40px;
    padding:0 14px;

    margin-right:12px;

    border:none;

    background:#1f2937;
    color:#fff;

    cursor:pointer;
}

#userPhotoPreview{

    width:64px;
    height:64px;

    border-radius:50%;
    object-fit:cover;

    flex-shrink:0;
	margin-top: -5px;

    display:block;
}




/* =====================================================
   SELF PROFILE PHOTO INPUT — Screenshot_24 style
   Scoped only to the non-admin profile editor so the
   existing System Admin / RBAC forms remain untouched.
===================================================== */
#selfProfileForm #selfProfilePhoto{
    display:block;
    width:100%;
    height:42px;
    padding:0;
    margin:0;
    background:#121214;
    border:1px solid #2a2a30;
    border-radius:10px;
    color:#e5e7eb;
    overflow:hidden;
    font-size:14px;
    line-height:40px;
    box-sizing:border-box;
}

#selfProfileForm #selfProfilePhoto::file-selector-button{
    height:40px;
    padding:0 14px;
    margin:0 12px 0 0;
    border:0;
    border-right:1px solid #30343b;
    background:#1f2937;
    color:#fff;
    cursor:pointer;
    font:inherit;
}

#selfProfileForm #selfProfilePhotoPreview{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    display:block;
    border:2px solid #64748b;
    background:#fff;
}

#selfProfileForm .self-profile-photo-row{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-top:2px;
}

#selfProfileForm .self-profile-photo-input-wrap{
    flex:1 1 auto;
    min-width:0;
}

/* ===========================
   EDIT USER PHOTO INPUT FIX
=========================== */

#editUserPhoto{
    display:block;
    width:100%;
    height:42px;

    padding:0;
    margin:0;
    margin-top:-5px;

    background:#121214;
    border:1px solid #2a2a30;
    border-radius:10px;

    color:#e5e7eb;

    overflow:hidden;
}

#editUserPhoto::file-selector-button{

    height:40px;
    padding:0 14px;

    margin-right:12px;

    border:none;

    background:#1f2937;
    color:#fff;

    cursor:pointer;
}

#editUserPhotoPreview{

    width:64px;
    height:64px;

    border-radius:50%;
    object-fit:cover;

    flex-shrink:0;
    margin-top:-5px;

    display:block;
}
/* =====================================================
   AJKER BECHAKENA - DATE CONTROL CONTRAST FIX
   Scoped only to the daily sales/purchases report.
===================================================== */

#view-ajker-bechakena .ajker-report-date-pill{
  background:#eef2ff !important;
  color:#4338ca !important;
  border:1px solid #c7d2fe !important;
}

#view-ajker-bechakena .ajker-report-date-value{
  background:#f8fafc !important;
  color:#334155 !important;
  border:1px solid #cbd5e1 !important;
}

#view-ajker-bechakena input[type="date"]{
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid #475569 !important;
  color-scheme:light;
}

#view-ajker-bechakena input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:1 !important;
  filter:none !important;
  cursor:pointer;
}

#view-ajker-bechakena input[type="date"]:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}



/* =====================================================
   AJKER BECHAKENA - PAYMENT TYPE + ACCOUNTING NOTE FIX
   Scoped only to the daily sales/purchases report.
===================================================== */

#view-ajker-bechakena .ajker-payment-type-badge{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  border-radius:9999px !important;
  padding:5px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:600 !important;
  text-transform:capitalize !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}

#view-ajker-bechakena .ajker-payment-type-invoice{
  background:#172554 !important;
  color:#93c5fd !important;
  border-color:#1d4ed8 !important;
}

#view-ajker-bechakena .ajker-payment-type-old-invoice{
  background:#3f2a12 !important;
  color:#fbbf24 !important;
  border-color:#92400e !important;
}

#view-ajker-bechakena .ajker-payment-type-adjustment{
  background:#2e1065 !important;
  color:#c4b5fd !important;
  border-color:#6d28d9 !important;
}

#view-ajker-bechakena .ajker-payment-type-purchase{
  background:#063b3b !important;
  color:#67e8f9 !important;
  border-color:#0e7490 !important;
}

#view-ajker-bechakena .ajker-payment-type-old-purchase{
  background:#3f2a12 !important;
  color:#fbbf24 !important;
  border-color:#92400e !important;
}

#view-ajker-bechakena .ajker-payment-type-default{
  background:#1e293b !important;
  color:#cbd5e1 !important;
  border-color:#475569 !important;
}

#view-ajker-bechakena .ajker-accounting-note{
  background:#111827 !important;
  color:#cbd5e1 !important;
  border:1px solid #334155 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#view-ajker-bechakena .ajker-accounting-note strong{
  color:#f8fafc !important;
  font-weight:700 !important;
}

#view-ajker-bechakena .ajker-accounting-note strong:last-of-type{
  color:#67e8f9 !important;
}


/* =====================================================
   AJKER BECHAKENA - COLORFUL SUMMARY + SECTION ICONS
   Scoped only to the daily sales/purchases report.
===================================================== */

#view-ajker-bechakena .ajker-summary-icon,
#view-ajker-bechakena .ajker-section-icon{
  border-width:1px !important;
  border-style:solid !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
}

#view-ajker-bechakena .ajker-summary-icon-indigo,
#view-ajker-bechakena .ajker-section-icon-indigo{
  background:linear-gradient(135deg,#312e81,#4f46e5) !important;
  color:#e0e7ff !important;
  border-color:#6366f1 !important;
}

#view-ajker-bechakena .ajker-summary-icon-emerald,
#view-ajker-bechakena .ajker-section-icon-emerald{
  background:linear-gradient(135deg,#064e3b,#10b981) !important;
  color:#d1fae5 !important;
  border-color:#10b981 !important;
}

#view-ajker-bechakena .ajker-summary-icon-teal,
#view-ajker-bechakena .ajker-section-icon-teal{
  background:linear-gradient(135deg,#134e4a,#0d9488) !important;
  color:#ccfbf1 !important;
  border-color:#14b8a6 !important;
}

#view-ajker-bechakena .ajker-summary-icon-amber,
#view-ajker-bechakena .ajker-section-icon-amber{
  background:linear-gradient(135deg,#78350f,#f59e0b) !important;
  color:#fef3c7 !important;
  border-color:#f59e0b !important;
}

#view-ajker-bechakena .ajker-summary-icon-rose,
#view-ajker-bechakena .ajker-section-icon-rose{
  background:linear-gradient(135deg,#881337,#f43f5e) !important;
  color:#ffe4e6 !important;
  border-color:#fb7185 !important;
}

#view-ajker-bechakena .ajker-summary-icon-violet,
#view-ajker-bechakena .ajker-section-icon-violet{
  background:linear-gradient(135deg,#4c1d95,#8b5cf6) !important;
  color:#ede9fe !important;
  border-color:#8b5cf6 !important;
}

#view-ajker-bechakena .ajker-summary-icon-slate,
#view-ajker-bechakena .ajker-section-icon-slate{
  background:linear-gradient(135deg,#1e293b,#475569) !important;
  color:#e2e8f0 !important;
  border-color:#64748b !important;
}

/* Today Due rows get a subtle visual emphasis without overpowering the table. */
#view-ajker-bechakena .ajker-due-highlight{
  background:rgba(127,29,29,.16) !important;
}

#view-ajker-bechakena .ajker-due-highlight:hover{
  background:rgba(127,29,29,.25) !important;
}

#view-ajker-bechakena .ajker-due-amount{
  color:#fb7185 !important;
  font-weight:800 !important;
}


/* =====================================================
   AJKER BECHAKENA - EXPENSE + PAGINATION POLISH
===================================================== */
#view-ajker-bechakena .ajker-summary-icon-expense,
#view-ajker-bechakena .ajker-section-icon-expense{
  background:linear-gradient(135deg,#7f1d1d,#ef4444) !important;
  color:#fee2e2 !important;
  border:1px solid #f87171 !important;
  box-shadow:0 8px 20px rgba(239,68,68,.20) !important;
}
#view-ajker-bechakena .ajker-expense-row{background:rgba(127,29,29,.08) !important;}
#view-ajker-bechakena .ajker-expense-row:hover{background:rgba(127,29,29,.16) !important;}
#view-ajker-bechakena .ajker-expense-category{
  display:inline-flex;align-items:center;border-radius:9999px;padding:5px 10px;
  background:#3f1d1d;color:#fca5a5;border:1px solid #b91c1c;font-size:12px;font-weight:700;
}
#view-ajker-bechakena .ajker-expense-amount{color:#f87171 !important;}
#view-ajker-bechakena .ajker-pagination{
  background:linear-gradient(135deg,#0f172a,#172554) !important;
  border-top:1px solid #334155 !important;
}
#view-ajker-bechakena .ajker-pagination-summary{
  color:#cbd5e1 !important;
}
#view-ajker-bechakena .ajker-pagination-summary span{
  color:#67e8f9 !important;
  font-weight:800 !important;
}
#view-ajker-bechakena .ajker-page-btn{
  min-width:34px;height:34px;padding:0 9px;border-radius:9px;border:1px solid #475569 !important;
  background:#1e293b !important;color:#e2e8f0 !important;font-size:12px;font-weight:800;cursor:pointer;
  transition:all .15s ease;
}
#view-ajker-bechakena .ajker-page-btn:hover:not(:disabled){
  background:#312e81 !important;border-color:#818cf8 !important;color:#fff !important;
  transform:translateY(-1px);
}
#view-ajker-bechakena .ajker-page-btn.ajker-page-active{
  background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;
  border-color:#818cf8 !important;color:#fff !important;
  box-shadow:0 4px 12px rgba(99,102,241,.35);
}
#view-ajker-bechakena .ajker-page-btn:disabled{
  opacity:.45;cursor:not-allowed;background:#0f172a !important;color:#64748b !important;
}
#view-ajker-bechakena .ajker-page-size{
  min-width:68px;height:34px;border-radius:9px;border:1px solid #475569 !important;
  background:#1e293b !important;color:#e2e8f0 !important;padding:0 9px;
  font-size:12px;font-weight:800;outline:none;
}
#view-ajker-bechakena .ajker-page-size:focus{
  border-color:#818cf8 !important;box-shadow:0 0 0 2px rgba(99,102,241,.2);
}


/* =========================================================
   AJKER BECHAKENA - FINAL RESPONSIVE / PAGINATION FIX
   This block intentionally comes last so it wins over legacy
   responsive and dark-theme overrides.
========================================================= */

#view-ajker-bechakena .ajker-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
  min-width:0 !important;
  align-items:stretch !important;
}

#view-ajker-bechakena .ajker-summary-grid > *{
  min-width:0 !important;
  width:100% !important;
}

#view-ajker-bechakena .ajker-summary-grid > .rounded-2xl{
  min-height:145px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  overflow:hidden !important;
}

#view-ajker-bechakena .ajker-summary-grid .ajker-summary-icon{
  flex:0 0 40px !important;
}

#view-ajker-bechakena .ajker-section-header{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#17191f,#121419) !important;
  border-bottom:1px solid #334155 !important;
  min-width:0 !important;
}

#view-ajker-bechakena .ajker-section-header::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:4px !important;
  background:#64748b !important;
}

#view-ajker-bechakena .ajker-section-header-teal::before{
  background:linear-gradient(180deg,#14b8a6,#22d3ee) !important;
}
#view-ajker-bechakena .ajker-section-header-indigo::before{
  background:linear-gradient(180deg,#6366f1,#8b5cf6) !important;
}
#view-ajker-bechakena .ajker-section-header-emerald::before{
  background:linear-gradient(180deg,#10b981,#34d399) !important;
}
#view-ajker-bechakena .ajker-section-header-amber::before{
  background:linear-gradient(180deg,#f59e0b,#fbbf24) !important;
}
#view-ajker-bechakena .ajker-section-header-rose::before{
  background:linear-gradient(180deg,#f43f5e,#fb7185) !important;
}
#view-ajker-bechakena .ajker-section-header-expense::before{
  background:linear-gradient(180deg,#ef4444,#fb7185) !important;
}

#view-ajker-bechakena .ajker-section-header h3{
  color:#f8fafc !important;
}
#view-ajker-bechakena .ajker-section-header p{
  color:#94a3b8 !important;
}

#view-ajker-bechakena .ajker-pagination{
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
}

#view-ajker-bechakena .ajker-pagination > div{
  min-width:0 !important;
}

#view-ajker-bechakena .ajker-pagination .ajker-pagination-summary{
  flex:1 1 180px !important;
  white-space:nowrap !important;
}

#view-ajker-bechakena .ajker-pagination .ajker-page-size{
  flex:0 0 auto !important;
  min-width:72px !important;
  cursor:pointer !important;
}

#view-ajker-bechakena .ajker-pagination .ajker-page-btn{
  flex:0 0 auto !important;
}

#view-ajker-bechakena .ajker-pagination label{
  margin-left:auto !important;
  white-space:nowrap !important;
}

#view-ajker-bechakena .overflow-x-auto{
  max-width:100% !important;
  scrollbar-width:thin;
}

#view-ajker-bechakena table{
  width:100% !important;
}

@media (max-width:1199px){
  #view-ajker-bechakena .ajker-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:700px){
  #view-ajker-bechakena .ajker-summary-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #view-ajker-bechakena .ajker-summary-grid > .rounded-2xl{
    min-height:125px !important;
  }

  #view-ajker-bechakena .ajker-section-header{
    padding:14px 14px 14px 17px !important;
  }

  #view-ajker-bechakena .ajker-pagination{
    align-items:stretch !important;
  }

  #view-ajker-bechakena .ajker-pagination-summary{
    flex:1 1 100% !important;
  }

  #view-ajker-bechakena .ajker-pagination > div:nth-child(2){
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
  }

  #view-ajker-bechakena .ajker-pagination label{
    margin-left:0 !important;
    width:100% !important;
    justify-content:flex-end !important;
  }
}

@media (max-width:420px){
  #view-ajker-bechakena .ajker-pagination{
    padding:10px !important;
  }

  #view-ajker-bechakena .ajker-page-btn{
    min-width:32px !important;
    height:32px !important;
    padding:0 7px !important;
  }

  #view-ajker-bechakena .ajker-pagination > div:nth-child(2){
    gap:4px !important;
  }
}

/* =========================================================
   AJKER BECHAKENA - SUMMARY NEGATIVE VALUE + SECTION TOTALS
   Final overrides; existing business logic is untouched.
========================================================= */
#view-ajker-bechakena .ajker-summary-value.text-rose-500{
  color:#f43f5e !important;
}

#view-ajker-bechakena .ajker-section-header-meta{
  min-width:0 !important;
}

#view-ajker-bechakena .ajker-section-total{
  background:rgba(15,23,42,.92) !important;
  color:#67e8f9 !important;
  border:1px solid rgba(100,116,139,.55) !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.2) inset !important;
  white-space:nowrap !important;
}

#view-ajker-bechakena .ajker-section-count{
  background:#020617 !important;
  color:#f8fafc !important;
  border:1px solid rgba(100,116,139,.45) !important;
  white-space:nowrap !important;
}

@media (max-width:700px){
  #view-ajker-bechakena .ajker-section-header-meta{
    width:100% !important;
    justify-content:flex-start !important;
  }
}


/* =========================================================
   AJKER BECHAKENA - PRINT CLEANUP
   Hide application navigation/actions from browser print/PDF.
   The report content itself remains printable, including its
   summary cards, section totals and paginated table rows.
========================================================= */
@media print {
  .no-print,
  aside.no-print,
  .no-print.sticky,
  #app > .flex > aside,
  #app > .flex > main > .no-print {
    display: none !important;
  }

  /* Let the report occupy the complete printable page width. */
  #view-ajker-bechakena {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #view-ajker-bechakena .ajker-section-header,
  #view-ajker-bechakena .ajker-summary-grid,
  #view-ajker-bechakena section,
  #view-ajker-bechakena .ajker-accounting-note {
    break-inside: avoid;
  }
}


/* =====================================================
   AJKER BECHAKENA - BANGLA TITLE + STICKY REPORT HEADER
   The report header stays visible while the page scrolls.
   Existing business/data logic is untouched.
===================================================== */

#view-ajker-bechakena .ajker-report-title{
  font-family:"Noto Serif Bengali","Noto Sans Bengali","Nirmala UI","SolaimanLipi",sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
  line-height:1.25 !important;
  text-rendering:optimizeLegibility;
}

#view-ajker-bechakena .ajker-report-header{
  position:sticky !important;
  top:73px;
  z-index:35 !important;
  isolation:isolate;
  background:#111113 !important;
  border-color:#27272a !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30) !important;
}

/* Keep the sticky header safely below the existing global topbar.
   On narrower screens the topbar can become taller. */
@media (max-width: 1100px){
  #view-ajker-bechakena .ajker-report-header{
    top:76px;
  }
}

@media (max-width: 700px){
  #view-ajker-bechakena .ajker-report-header{
    top:96px;
  }
}

/* Sticky positioning must never affect print layout. */
@media print{
  #view-ajker-bechakena .ajker-report-header{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    box-shadow:none !important;
  }

  #view-ajker-bechakena .ajker-report-title{
    font-family:"Noto Serif Bengali","Noto Sans Bengali","Nirmala UI","SolaimanLipi",sans-serif !important;
  }
}

/* =========================================================
   USERS & PERMISSIONS - compact action controls
   Keeps the Actions column stable on desktop and narrow screens.
   ========================================================= */
.user-access-actions{
  width: 110px;
  min-width: 110px;
}
.user-action-btn{
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid #334155;
  background: #111827;
  color: #e5e7eb;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.user-action-btn:hover{
  background: #1e293b;
  border-color: #64748b;
  transform: translateY(-1px);
}
.user-action-delete{
  border-color: rgba(244,63,94,.45);
  color: #fb7185;
}
.user-action-delete:hover{
  background: rgba(127,29,29,.35);
  border-color: #fb7185;
}
.user-action-btn:focus-visible{
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}
.user-action-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 900px){
  .user-access-actions{
    width: 88px;
    min-width: 88px;
  }
  .user-action-btn{
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}


/* =========================================================
   USERS & PERMISSIONS — PREMIUM COMPATIBILITY UI
   Existing RBAC logic is preserved; this block only styles
   the dedicated user_settings page and its permission modal.
   ========================================================= */
#view-user_settings .rbac-page{
  color:#e5e7eb;
  display:flex;
  flex-direction:column;
  gap:16px;
}
#view-user_settings .rbac-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 24px;border:1px solid rgba(34,211,238,.24);border-radius:18px;
  background:linear-gradient(135deg,#0b1220 0%,#111827 55%,#062c33 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
#view-user_settings .rbac-eyebrow{font-size:10px;letter-spacing:.22em;color:#67e8f9;font-weight:800;margin-bottom:5px}
#view-user_settings .rbac-hero h2{margin:0;font-size:25px;font-weight:800;color:#f8fafc}
#view-user_settings .rbac-hero p{margin:5px 0 0;color:#94a3b8;font-size:13px;max-width:760px}
#view-user_settings .rbac-hero-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#view-user_settings .rbac-btn{border-radius:10px;padding:9px 13px;font-size:13px;font-weight:700;transition:.18s ease;cursor:pointer}
#view-user_settings .rbac-btn:hover{transform:translateY(-1px)}
#view-user_settings .rbac-btn-primary{background:#06b6d4;color:#06202a;border:1px solid #22d3ee}
#view-user_settings .rbac-btn-secondary{background:rgba(15,23,42,.65);color:#dbeafe;border:1px solid rgba(34,211,238,.35)}
#view-user_settings .rbac-btn-ghost{background:rgba(255,255,255,.03);color:#cbd5e1;border:1px solid rgba(148,163,184,.22)}
#view-user_settings .rbac-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#view-user_settings .rbac-stat{padding:16px 18px;border:1px solid #252a36;border-radius:15px;background:#111318;box-shadow:0 10px 25px rgba(0,0,0,.16)}
#view-user_settings .rbac-stat-label{font-size:10px;letter-spacing:.12em;color:#64748b;font-weight:800}
#view-user_settings .rbac-stat-value{font-size:25px;font-weight:800;color:#f8fafc;margin-top:4px}
#view-user_settings .rbac-stat-note{font-size:11px;color:#64748b;margin-top:2px}
#view-user_settings .rbac-panel{border:1px solid #2a2f3a;border-radius:18px;background:#111318;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,.18)}
#view-user_settings .rbac-panel-head{padding:17px 19px;border-bottom:1px solid #2a2f3a;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
#view-user_settings .rbac-panel-head.compact{align-items:center}
#view-user_settings .rbac-panel-head h3{margin:0;color:#f8fafc;font-size:16px;font-weight:800}
#view-user_settings .rbac-panel-head p{margin:4px 0 0;color:#64748b;font-size:11px}
#view-user_settings .rbac-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#view-user_settings .rbac-search{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px;border:1px solid #303644;border-radius:9px;background:#0b0e13;color:#64748b}
#view-user_settings .rbac-search input{width:190px;background:transparent;border:0;outline:0;color:#e5e7eb;font-size:12px}
#view-user_settings .rbac-search input::placeholder{color:#64748b}
#view-user_settings .rbac-select{height:36px;border:1px solid #303644;border-radius:9px;background:#0b0e13;color:#cbd5e1;padding:0 10px;font-size:12px;outline:0}
#view-user_settings .rbac-select-small{width:68px}
#view-user_settings .rbac-per-page{display:flex;align-items:center;gap:6px;color:#64748b;font-size:11px}
#view-user_settings .rbac-table-wrap{overflow:auto}
#view-user_settings .rbac-table{width:100%;min-width:1040px;border-collapse:collapse;font-size:12px}
#view-user_settings .rbac-table th{padding:11px 12px;text-align:left;color:#22d3ee;font-size:11px;font-weight:800;border-bottom:1px solid #38404e;background:#10131a;white-space:nowrap}
#view-user_settings .rbac-table td{padding:10px 12px;border-bottom:1px solid #242934;color:#cbd5e1;vertical-align:middle}
#view-user_settings .rbac-table tbody tr:hover{background:rgba(34,211,238,.035)}
#view-user_settings .rbac-name-cell strong{display:block;color:#f8fafc;font-size:12px}
#view-user_settings .rbac-name-cell small{display:block;color:#64748b;font-size:10px;margin-top:2px}
#view-user_settings .rbac-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #374151;background:#111827}
#view-user_settings .rbac-username{font-weight:700;color:#e2e8f0}
#view-user_settings .rbac-presence{font-size:10px;font-weight:600;margin-left:5px}
#view-user_settings .rbac-presence.online{color:#10b981}.rbac-presence.idle{color:#f59e0b}.rbac-presence.offline{color:#94a3b8}
#view-user_settings .rbac-role-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid #3b4250;background:#1b1e25;color:#dbeafe;font-size:10px;font-weight:800}
#view-user_settings .rbac-role-badge.system-admin{border-color:#4b5563;background:#252932}.rbac-role-badge.local-admin{border-color:#164e63;background:#0c2a34}.rbac-role-badge.staff{border-color:#374151;background:#1f232b}
#view-user_settings .rbac-last-main{color:#e2e8f0;font-size:11px;font-weight:700;white-space:nowrap}.rbac-never{color:#e2e8f0;font-weight:700}.rbac-subline{font-size:10px;color:#64748b;margin-top:2px}
#view-user_settings .rbac-status{font-size:10px;margin-top:3px;font-weight:700;display:flex;align-items:center;gap:5px}.rbac-status.online{color:#34d399}.rbac-status.idle{color:#fbbf24}.rbac-status.offline{color:#94a3b8}.rbac-status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
#view-user_settings .rbac-perm-count{font-weight:800;color:#f8fafc}.rbac-perm-total{color:#64748b}
#view-user_settings .rbac-actions-cell{white-space:nowrap;text-align:right}
#view-user_settings .rbac-icon-btn{width:34px;height:32px;border-radius:9px;border:1px solid #303644;background:#0b0e13;color:#cbd5e1;margin-left:4px;cursor:pointer;transition:.15s ease;font-size:14px}
#view-user_settings .rbac-icon-btn:hover{transform:translateY(-1px);background:#171b24}.rbac-icon-btn.edit:hover{border-color:#fb923c;color:#fb923c}.rbac-icon-btn.key:hover{border-color:#facc15;color:#facc15}.rbac-icon-btn.delete{border-color:#4b1d1d;color:#f87171}.rbac-icon-btn.delete:hover{background:#3a1010;border-color:#ef4444}
#view-user_settings .rbac-table-foot{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#64748b;font-size:11px}
#view-user_settings .rbac-pagination{display:flex;gap:4px}.rbac-page-btn{min-width:28px;height:28px;border:1px solid #303644;background:#0b0e13;color:#94a3b8;border-radius:7px;cursor:pointer}.rbac-page-btn.active{background:#0e7490;border-color:#22d3ee;color:white}.rbac-empty{text-align:center;padding:30px!important;color:#64748b!important}
#view-user_settings .rbac-role-grid{padding:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#view-user_settings .rbac-role-card{border:1px solid #2b313d;background:#0d1015;border-radius:13px;padding:13px}.rbac-role-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.rbac-role-name{font-weight:800;color:#f1f5f9;font-size:12px}.rbac-role-desc{font-size:10px;color:#64748b;margin-top:4px;line-height:1.5}.rbac-protected{font-size:8px;font-weight:800;letter-spacing:.08em;color:#67e8f9;border:1px solid #155e75;padding:4px 6px;border-radius:999px}.rbac-role-actions{display:flex;gap:4px}.rbac-role-actions button{font-size:10px;border:1px solid #303644;background:#11151c;color:#cbd5e1;border-radius:7px;padding:4px 7px;cursor:pointer}.rbac-role-actions button.danger{color:#f87171;border-color:#4b1d1d}
#view-user_settings .rbac-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rbac-info-card{border:1px solid #2a2f3a;background:#111318;border-radius:15px;padding:15px}.rbac-info-card.accent{border-color:rgba(34,211,238,.22)}.rbac-info-title{font-weight:800;color:#f8fafc;font-size:13px;margin-bottom:7px}.rbac-info-card ul{margin:0;padding-left:18px;color:#94a3b8;font-size:11px;line-height:1.8}.rbac-info-card b{color:#e2e8f0}.rbac-role-pills{display:flex;flex-wrap:wrap;gap:6px}.rbac-role-pills span{font-size:10px;color:#cbd5e1;border:1px solid #374151;background:#1b1e25;padding:5px 8px;border-radius:999px}.rbac-role-pills span.custom{border-color:#155e75;color:#67e8f9}.rbac-info-small{font-size:10px;color:#64748b;margin-top:8px}
#view-user_settings .rbac-denied{padding:35px;text-align:center;border:1px solid #2a2f3a;background:#111318;border-radius:18px}.rbac-denied-icon{font-size:28px}.rbac-denied h3{margin:8px 0 0;color:#f8fafc}.rbac-denied p{color:#64748b;font-size:12px}

/* Permission modal: restore fully clickable checkbox UX and premium dark styling. */
#rbacUserForm .rbac-group-card{border:1px solid #26303a;border-radius:14px;background:#0c1117;padding:14px}
#rbacUserForm .rbac-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.rbac-group-title{color:#f8fafc;font-weight:800;font-size:13px}.rbac-group-subtitle{color:#64748b;font-size:10px;margin-top:3px}
#rbacUserForm .rbac-group-toggle{border:1px solid #334155;background:#111827;color:#94a3b8;border-radius:8px;padding:5px 8px;font-size:10px;cursor:pointer}.rbac-group-toggle:not(:disabled):hover{border-color:#22d3ee;color:#67e8f9}.rbac-group-toggle:disabled{opacity:.45;cursor:not-allowed}
#rbacUserForm .rbac-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#rbacUserForm .rbac-permission-card{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid #26303a;border-radius:10px;background:#10151c;cursor:pointer;user-select:none;transition:.15s ease}
#rbacUserForm .rbac-permission-card:hover{border-color:#155e75;background:#0f1b22}.rbac-permission-card.is-disabled{opacity:.58;cursor:not-allowed}
#rbacUserForm .rbac-permission-card input.rbac-permission{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0!important;cursor:pointer;z-index:2;pointer-events:auto!important}
#rbacUserForm .rbac-permission-card input.rbac-permission:disabled{cursor:not-allowed;pointer-events:none}
#rbacUserForm .rbac-checkmark{width:17px;height:17px;flex:0 0 17px;border:1px solid #475569;border-radius:4px;background:#0b0f14;position:relative;margin-top:1px}
#rbacUserForm .rbac-permission-card input.rbac-permission:checked + .rbac-checkmark{background:#0891b2;border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.08)}
#rbacUserForm .rbac-permission-card input.rbac-permission:checked + .rbac-checkmark:after{content:'✓';position:absolute;left:3px;top:-2px;color:#fff;font-size:14px;font-weight:900}
#rbacUserForm .rbac-permission-copy{min-width:0}.rbac-permission-name{display:block;color:#e2e8f0;font-size:11px;font-weight:700}.rbac-permission-key{display:block;color:#64748b;font-size:9px;margin-top:3px}
#rbacUserForm .rbac-photo-row{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;padding:13px;border:1px solid #26303a;border-radius:13px;background:#0c1117}.rbac-photo-preview{width:66px;height:66px;border-radius:50%;object-fit:cover;border:2px solid #155e75;background:#111827}
#rbacUserForm input[type=file]{color:#94a3b8}

@media (max-width: 900px){#view-user_settings .rbac-hero{flex-direction:column;align-items:flex-start}#view-user_settings .rbac-hero-actions{justify-content:flex-start}#view-user_settings .rbac-stats{grid-template-columns:1fr}.rbac-role-grid{grid-template-columns:1fr!important}.rbac-info-grid{grid-template-columns:1fr!important}.rbac-permission-grid{grid-template-columns:1fr!important}.rbac-panel-head{align-items:flex-start!important;flex-direction:column}.rbac-toolbar{width:100%}}


/* =========================================================
   User Settings — Screenshot_44 / Screenshot_45 compatible
   premium dark refresh (existing controls preserved)
   ========================================================= */
#view-user_settings .rbac-user-settings-classic{
  gap:14px;
}

#view-user_settings .rbac-legacy-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid #252b36;
  border-radius:16px;
  background:linear-gradient(135deg,#111318 0%,#10151d 58%,#06252b 100%);
  box-shadow:0 14px 38px rgba(0,0,0,.22);
}

#view-user_settings .rbac-legacy-hero h2{
  margin:0;
  color:#f8fafc;
  font-size:22px;
  font-weight:800;
}

#view-user_settings .rbac-legacy-hero p{
  margin:4px 0 0;
  color:#7f8da3;
  font-size:12px;
}

#view-user_settings .rbac-legacy-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#view-user_settings .rbac-user-list-panel{
  border-radius:16px;
}

#view-user_settings .rbac-user-list-panel .rbac-panel-head{
  padding:16px 18px;
}

#view-user_settings .rbac-user-settings-table{
  min-width:980px;
}

#view-user_settings .rbac-user-settings-table th{
  padding:10px 12px;
  color:#22d3ee;
  background:#11141b;
}

#view-user_settings .rbac-user-settings-table td{
  padding:10px 12px;
  height:56px;
}

#view-user_settings .rbac-user-settings-table tbody tr{
  transition:background .15s ease;
}

#view-user_settings .rbac-user-settings-table tbody tr:hover{
  background:rgba(34,211,238,.025);
}

#view-user_settings .rbac-user-photo{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #3b4656;
  box-shadow:0 0 0 2px rgba(255,255,255,.02);
}

#view-user_settings .rbac-inline-presence{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:3px;
  font-size:9px;
  font-weight:700;
}

#view-user_settings .rbac-inline-presence.online{color:#10b981}
#view-user_settings .rbac-inline-presence.idle{color:#f59e0b}
#view-user_settings .rbac-inline-presence.offline{color:#94a3b8}

#view-user_settings .rbac-permission-hint{
  margin-top:4px;
  color:#64748b;
  font-size:9px;
  line-height:1.2;
}

#view-user_settings .rbac-role-summary-panel{
  overflow:hidden;
}

#view-user_settings .rbac-role-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px 15px;
}

#view-user_settings .rbac-role-summary-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:10px 12px;
  border:1px solid #2b313c;
  border-radius:11px;
  background:#0d1015;
}

#view-user_settings .rbac-role-summary-item b{
  display:block;
  color:#e5e7eb;
  font-size:11px;
}

#view-user_settings .rbac-role-summary-item small{
  display:block;
  color:#64748b;
  font-size:9px;
  margin-top:3px;
  line-height:1.35;
}

#view-user_settings .rbac-role-summary-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow:0 0 10px currentColor;
}

#view-user_settings .rbac-role-summary-dot.system{color:#a5b4fc;background:currentColor}
#view-user_settings .rbac-role-summary-dot.local{color:#22d3ee;background:currentColor}
#view-user_settings .rbac-role-summary-dot.staff{color:#94a3b8;background:currentColor}

#view-user_settings .rbac-role-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 15px 0;
  color:#f8fafc;
}

#view-user_settings .rbac-role-library-head b{
  font-size:12px;
}

#view-user_settings .rbac-role-library-head span{
  color:#64748b;
  font-size:9px;
  margin-left:7px;
}

#view-user_settings .rbac-role-library-actions button{
  border:1px solid #303644;
  background:#0b0e13;
  color:#94a3b8;
  border-radius:7px;
  padding:5px 8px;
  font-size:9px;
  cursor:pointer;
}

#view-user_settings .rbac-role-grid.compact{
  padding:12px 15px 14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

#view-user_settings .rbac-role-grid.compact .rbac-role-card{
  padding:11px;
  border-radius:11px;
}

#view-user_settings .rbac-role-footnote{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:0 15px 14px;
  color:#64748b;
  font-size:9px;
}

#view-user_settings .rbac-page-dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  color:#64748b;
  font-size:12px;
}

@media(max-width:900px){
  #view-user_settings .rbac-legacy-hero{
    align-items:flex-start;
    flex-direction:column;
  }
  #view-user_settings .rbac-role-summary{
    grid-template-columns:1fr;
  }
  #view-user_settings .rbac-role-grid.compact{
    grid-template-columns:1fr;
  }
  #view-user_settings .rbac-role-footnote{
    flex-direction:column;
  }
}



/* =========================================================
   CLASSIC USER SETTINGS — OLD PROJECT VISUAL COMPATIBILITY
   Scoped only to #view-user_settings. No business-page styles.
   ========================================================= */
#view-user_settings .bg-white{
  background:#141417 !important;
  color:#e5e7eb !important;
}
#view-user_settings .ring-slate-200{
  --tw-ring-color:#3a3a42 !important;
  box-shadow:0 0 0 1px #3a3a42 !important;
}
#view-user_settings .border-slate-200{
  border-color:#3a3a42 !important;
}
#view-user_settings .bg-slate-50{
  background:#141417 !important;
  border-color:#2a2a30 !important;
  color:#e5e7eb !important;
}
#view-user_settings .text-slate-500,
#view-user_settings .text-slate-600{
  color:#9ca3af !important;
}
#view-user_settings .text-slate-700{
  color:#d1d5db !important;
}
#view-user_settings table{
  color:#e5e7eb;
}
#view-user_settings table thead{
  background:#141417 !important;
}
#view-user_settings table tbody tr{
  background:#141417 !important;
}
#view-user_settings table tbody tr:hover{
  background:#1b1b20 !important;
}
#view-user_settings table th,
#view-user_settings table td{
  border-color:#3a3a42 !important;
}
#view-user_settings input,
#view-user_settings select{
  background:#141417 !important;
  color:#e5e7eb !important;
  border-color:#3a3a42 !important;
}
#view-user_settings .icon-btn{
  background:#141417 !important;
  color:#e5e7eb !important;
  border:1px solid #2a2a30 !important;
}
#view-user_settings .icon-btn:hover{
  background:#1f1f23 !important;
}


/* ============================================================
   Rafid Enterprise Language Switcher
   UI-only; intentionally isolated from application controls.
   ============================================================ */
.rafid-language-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  z-index:60;
}
.rafid-language-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:34px;
  padding:.42rem .68rem;
  border:1px solid #334155;
  border-radius:.55rem;
  background:#0f172a;
  color:#e2e8f0;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.rafid-language-btn:hover,
.rafid-language-btn:focus-visible{
  background:#172033;
  border-color:#64748b;
  color:#fff;
  outline:none;
  box-shadow:0 0 0 2px rgba(59,130,246,.16);
}
.rafid-language-globe{
  display:inline-flex;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#1e293b;
  color:#93c5fd;
  font-size:.72rem;
  font-weight:800;
}
.rafid-language-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
}
.rafid-language-option-name{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
.rafid-language-option-flag{
  display:inline-flex;
  width:22px;
  justify-content:center;
  font-size:1rem;
  line-height:1;
}
.rafid-language-chevron{
  color:#94a3b8;
  font-size:.7rem;
}
.rafid-language-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  min-width:170px;
  padding:.35rem;
  border:1px solid #334155;
  border-radius:.75rem;
  background:#0b1120;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.rafid-language-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.55rem .65rem;
  border:0;
  border-radius:.5rem;
  background:transparent;
  color:#e2e8f0;
  font-size:.82rem;
  text-align:left;
  cursor:pointer;
}
.rafid-language-option:hover,
.rafid-language-option:focus-visible{
  background:#1e293b;
  color:#fff;
  outline:none;
}
.rafid-language-code{
  color:#64748b;
  font-size:.68rem;
  font-weight:700;
}
.rafid-rtl{
  font-family:inherit;
}
.rafid-rtl .rafid-language-menu{
  right:auto;
  left:0;
}
@media (max-width: 900px){
  .rafid-language-btn{
    min-width:34px;
    padding:.42rem .5rem;
  }
  .rafid-language-btn [data-language-current]{
    display:none;
  }
}


/* =====================================================
   USER SESSION HISTORY — ACTIVE STATUS
   Dedicated class keeps the Facebook-style green status
   reliable even when the modal HTML is rendered dynamically.
===================================================== */
.user-session-active-status{
  color:#22c55e !important;
  font-weight:700 !important;
}

/* PWA install action — intentionally isolated from existing quick-action styles. */
#pwaInstallButton {
  white-space: nowrap;
}
#pwaInstallButton.hidden {
  display: none !important;
}


/* ============================================================
   USER PHOTO PREVIEW — FINAL ALIGNMENT FIX
   Scoped only to the RBAC/profile User Photo row.
   Keeps the preview aligned with the file input instead of
   vertically centering it against the label + input block.
   No upload/preview logic is changed.
   ============================================================ */
#rbacUserForm .rbac-photo-row{
  align-items:start;
}

#rbacUserForm .rbac-photo-row > .rbac-photo-preview{
  align-self:start;
  /* The first column contains the label + helper text + file input.
     Position the 66px preview so its vertical center matches the
     42px file input, rather than aligning to the bottom of the text block. */
  margin-top:18px;
}

@media (max-width: 900px){
  #rbacUserForm .rbac-photo-row{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }
  #rbacUserForm .rbac-photo-row > .rbac-photo-preview{
    margin-top:18px;
  }
}

/* ============================================================
   SELF PROFILE USER PHOTO — FINAL VERTICAL ALIGNMENT
   Scoped only to the non-System-Admin profile modal.
   Keeps the existing photo upload/preview logic unchanged.
   The preview is centered against the file control so it does
   not visually hang below the input.
============================================================ */
#selfProfileForm .self-profile-photo-row{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

#selfProfileForm .self-profile-photo-input-wrap{
    flex:1 1 auto !important;
    min-width:0 !important;
}

#selfProfileForm #selfProfilePhoto{
    display:block !important;
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    line-height:40px !important;
}

#selfProfileForm #selfProfilePhotoPreview{
    flex:0 0 64px !important;
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    min-height:64px !important;
    display:block !important;
    margin:0 !important;
    align-self:center !important;
    object-fit:cover !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
}



/* ============================================================
   USER PHOTO ROW — DEFINITIVE ALIGNMENT (Screenshot_24 match)
   The file control must sit on the same baseline as the Role
   control, while the 64px circular preview is vertically
   centered on the 42px file control and may safely overflow
   the 42px row. This is visual-only; upload/preview logic is
   untouched.
   ============================================================ */
#selfProfileForm .self-profile-photo-row{
    height:42px !important;
    min-height:42px !important;
    align-items:center !important;
    position:relative !important;
    overflow:visible !important;
}

#selfProfileForm .self-profile-photo-input-wrap{
    height:42px !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
}

#selfProfileForm #selfProfilePhoto{
    position:relative !important;
    top:0 !important;
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
}

#selfProfileForm #selfProfilePhotoPreview{
    position:relative !important;
    top:0 !important;
    flex:0 0 64px !important;
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    min-height:64px !important;
    align-self:center !important;
    margin:0 !important;
    transform:none !important;
}


/* PAYROLL: REFERENCE PROJECT MODAL/TABLE THEME */
#modalBackdrop .bg-white{
  background:#141417 !important;
  border-color:#26262b !important;
}
#modalBackdrop .border-slate-200{
  border-color:#26262b !important;
}
table thead.bg-slate-50,
table thead tr.bg-slate-50,
table thead tr{
  background:#0f172a !important;
}
table thead.bg-slate-50 th,
table thead tr.bg-slate-50 th,
table thead tr th{
  color:#00eaff !important;
  font-weight:600 !important;
  letter-spacing:.4px !important;
}
table{
  color:#e5e7eb !important;
}
table tbody tr:hover{
  background:#021a1a !important;
}
input,select,textarea{
  background:#121214;
  border:1px solid #2a2a30;
  color:#e5e7eb;
}
input::placeholder,textarea::placeholder{
  color:#6b7280;
}


#rbacUserForm .rbac-permission-head{
  padding:15px 17px !important;
  border:1px solid #c8dde1 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#0f6f73 0%,#0b7d80 62%,#0c6970 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(11,99,105,.16) !important;
}
#rbacUserForm .rbac-permission-head-title{
  color:#fff !important;
  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
}
#rbacUserForm .rbac-permission-head-title::after{
  content:'Server-side checks also enforce these permissions.';
  display:block !important;
  margin-top:5px !important;
  color:rgba(255,255,255,.76) !important;
  font-size:10.5px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}

/* ============================================================
   PAYMENT HISTORY DELETE BUTTON — Screenshot_23 reference
   ============================================================ */
#modalContainer .history-delete-btn{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #f1a3aa !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#fffafa 0%,#fff1f3 100%) !important;
  color:#d92d3b !important;
  box-shadow:0 2px 6px rgba(181,35,47,.08) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}
#modalContainer .history-delete-btn svg{
  width:16px !important;
  height:16px !important;
}
#modalContainer .history-delete-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  background:linear-gra