@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;
}



/* ===== Additional top-level ERP modules ===== */
#topParentMenus .top-parent-menu-btn[data-top-module]{
  position:relative!important;
}
#topParentMenus .top-parent-menu-btn[data-top-module]:focus,
#topParentMenus .top-parent-menu-btn[data-top-module]:focus-visible{
  outline:none!important; box-shadow:none!important;
}
/* ===== Main Parent Menu Navigation — exact flat reference-style menu ===== */
.top-parent-menu-wrap{display:flex!important;align-items:stretch!important;min-width:0!important;flex:1 1 auto!important}
#topParentMenus.top-parent-menus{display:flex!important;align-items:stretch!important;background:#fff!important;border-top:3px solid #743c8b!important;border-right:0!important;border-bottom:1px solid #d9d9de!important;border-left:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;max-width:100%!important;height:42px!important}
#topParentMenus .top-parent-menu-btn{position:relative!important;appearance:none!important;-webkit-appearance:none!important;border:0!important;border-right:1px solid #dedfe4!important;background:#fff!important;color:#9b2154!important;border-radius:0!important;outline:0!important;box-shadow:none!important;padding:0 18px!important;height:39px!important;min-height:39px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-family:inherit!important;font-size:14px!important;font-weight:600!important;line-height:1!important;cursor:pointer!important;transition:background-color .15s ease,color .15s ease!important;white-space:nowrap!important}
#topParentMenus .top-parent-menu-btn:first-child{border-left:1px solid #dedfe4!important}
#topParentMenus .top-parent-menu-btn:hover{background:#f6f6f8!important;color:#7d123f!important;box-shadow:none!important}
#topParentMenus .top-parent-menu-btn.active{background:#c70039!important;color:#fff!important;box-shadow:none!important} #topParentMenus .top-parent-menu-btn.active::after{content:""!important;position:absolute!important;left:50%!important;bottom:-10px!important;transform:translateX(-50%)!important;width:0!important;height:0!important;border-left:9px solid transparent!important;border-right:9px solid transparent!important;border-top:10px solid #c70039!important;z-index:6!important;pointer-events:none!important}
#topParentMenus .top-parent-menu-btn.active:hover{background:#b80035!important;color:#fff!important}
#topParentMenus .top-parent-menu-btn:focus,#topParentMenus .top-parent-menu-btn:focus-visible{outline:none!important;box-shadow:none!important}
@media (max-width:700px){#topParentMenus.top-parent-menus{width:100%!important;overflow-x:auto!important}#topParentMenus .top-parent-menu-btn{padding:0 14px!important;font-size:13px!important;flex:0 0 auto!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
===================================================== */

/* Payroll sidebar navigation: use the native professional hand cursor on the entire clickable row. */
#nav > button[data-nav],
#nav > button[data-nav] * {
  cursor: pointer !important;
}


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

/* ============================================================
   USER LOGIN / LOGOUT HISTORY — CONTRAST POLISH
   Scoped only to the history modal content so existing modal
   themes and unrelated pages remain untouched.
============================================================ */
#userLoginHistoryBody{
  color:#26343b !important;
}
#userLoginHistoryBody .user-login-history-control{
  background:#f5f8fa !important;
  border:1px solid #cbd8de !important;
  box-shadow:0 5px 14px rgba(15,23,42,.06) !important;
}
#userLoginHistoryBody .user-login-history-control__title{
  color:#1f3440 !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}
#userLoginHistoryBody .user-login-history-control__text{
  color:#536873 !important;
  font-weight:500 !important;
}
#userLoginHistoryBody > .grid > div{
  background:#f8fbfc !important;
  border-color:#b8cbd0 !important;
  box-shadow:0 2px 7px rgba(15,23,42,.05) !important;
}
#userLoginHistoryBody > .grid > div > div:first-child{
  color:#475c63 !important;
  font-weight:600 !important;
}
#userLoginHistoryBody > .grid > div > div:nth-child(2){
  color:#16242b !important;
}
#userLoginHistoryBody .user-login-history-card{
  color:#26343b !important;
}
#userLoginHistoryBody .user-login-history-card__label{
  color:#536970 !important;
  font-weight:600 !important;
}
#userLoginHistoryBody .user-login-history-card__value{
  color:#18262d !important;
  font-weight:700 !important;
}
#userLoginHistoryBody .user-login-history-status-active{
  color:#116b5a !important;
}
#userLoginHistoryBody .user-login-history-status-idle{
  color:#a16207 !important;
}
#userLoginHistoryBody .user-login-history-status-offline{
  color:#52656c !important;
}
#userLoginHistoryBody [data-force-logout-user]{
  background:#dc2626 !important;
  color:#ffffff !important;
  border:1px solid #b91c1c !important;
  box-shadow:0 4px 10px rgba(185,28,28,.18) !important;
  font-weight:700 !important;
}
#userLoginHistoryBody [data-force-logout-user]:hover{
  background:#b91c1c !important;
}
#userLoginHistoryBody .user-login-history-status-current{
  color:#16a34a !important;
  font-weight:800 !important;
}
#userLoginHistoryBody [data-force-logout-user]:focus-visible{
  outline:3px solid rgba(14,116,144,.22) !important;
  outline-offset:2px !important;
}

/* ============================================================
   Screenshot-9 exact active-session control styling
============================================================ */
#userLoginHistoryBody .user-login-history-control{
  background:#06666c !important;
  border:1px solid #0a858b !important;
  border-radius:14px !important;
  box-shadow:0 8px 20px rgba(2,44,50,.20) !important;
}
#userLoginHistoryBody .user-login-history-control__title{
  color:#22ff00 !important;
  font-weight:800 !important;
  font-size:1rem !important;
  letter-spacing:.01em !important;
}
#userLoginHistoryBody .user-login-history-control__text{
  color:#ffffff !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}
#userLoginHistoryBody [data-force-logout-user]{
  background:#a60000 !important;
  color:#fff200 !important;
  border:1px solid #cf1414 !important;
  border-radius:10px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.22) !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}
#userLoginHistoryBody [data-force-logout-user]:hover{
  background:#8e0000 !important;
  color:#fff85c !important;
}
#userLoginHistoryBody [data-force-logout-user]:active{
  transform:translateY(1px);
}
#userLoginHistoryBody [data-force-logout-user]:focus-visible{
  outline:3px solid rgba(34,255,0,.25) !important;
  outline-offset:2px !important;
}
#userLoginHistoryBody .user-login-history-status-current{
  color:#16c60c !important;
  font-weight:800 !important;
}

/* ============================================================
   USER LOGIN / LOGOUT HISTORY — FINAL HIGH-CONTRAST FONT FIX
   Scoped strictly to this history component. Higher specificity
   intentionally overrides the generic danger-modal typography so
   the active-session control matches the approved Screenshot-9
   visual language without changing any other modal/page.
============================================================ */
#modalBackdrop #userLoginHistoryBody .user-login-history-control__title{
  color:#22ff00 !important;
  font-weight:800 !important;
}

#modalBackdrop #userLoginHistoryBody .user-login-history-control__text{
  color:#ffffff !important;
  font-weight:700 !important;
}

#modalBackdrop #userLoginHistoryBody [data-force-logout-user],
#modalBackdrop #userLoginHistoryBody [data-force-logout-user].bg-rose-600{
  background:#a60000 !important;
  color:#fff200 !important;
  border-color:#cf1414 !important;
  font-weight:800 !important;
}

#modalBackdrop #userLoginHistoryBody [data-force-logout-user]:hover,
#modalBackdrop #userLoginHistoryBody [data-force-logout-user].bg-rose-600:hover{
  background:#8e0000 !important;
  color:#fff85c !important;
}

#modalBackdrop #userLoginHistoryBody .user-login-history-status-current{
  color:#16c60c !important;
  font-weight:800 !important;
}


/* ============================================================
   USER LOGIN / LOGOUT HISTORY — APPROVED SCREENSHOT-9 STYLE
   Final, component-scoped visual override. No application logic.
============================================================ */
#modalBackdrop #userLoginHistoryBody.user-login-history-root .user-login-history-control__title,
#modalBackdrop #userLoginHistoryBody .user-login-history-control__title {
  color:#22ff00 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

#modalBackdrop #userLoginHistoryBody.user-login-history-root .user-login-history-control__text,
#modalBackdrop #userLoginHistoryBody .user-login-history-control__text {
  color:#ffffff !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:700 !important;
  text-shadow:none !important;
}

#modalBackdrop #userLoginHistoryBody.user-login-history-root [data-force-logout-user],
#modalBackdrop #userLoginHistoryBody [data-force-logout-user] {
  background:#a60000 !important;
  color:#fff200 !important;
  border:1px solid #cf1414 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

#modalBackdrop #userLoginHistoryBody.user-login-history-root .user-login-history-status-current,
#modalBackdrop #userLoginHistoryBody .user-login-history-status-current {
  color:#16c60c !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}


/* ============================================================
   USER LOGIN / LOGOUT HISTORY — UPDATE 09
   - Online label uses the approved live green for active
     non-current sessions.
   - Force-logout confirmation text is high-contrast and scoped
     only to the session confirmation card.
============================================================ */
#modalBackdrop #userLoginHistoryBody .user-login-history-status-active{
  color:#16c60c !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
}
#modalBackdrop #userLoginHistoryBody .user-session-confirm-card__title{
  color:#9f1d1d !important;
  font-weight:800 !important;
}
#modalBackdrop #userLoginHistoryBody .user-session-confirm-card__text{
  color:#35444d !important;
  font-weight:700 !important;
  opacity:1 !important;
}

/* ============================================================
   LOGIN / LOGOUT HISTORY — SCREENSHOT_6 FINAL SIZE + CONTROL
   Visual-only, strictly scoped to this modal instance.
   ============================================================ */
html body #modalBackdrop #modalContainer.login-history-theme {
  width: min(600px, 100vw) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body #modalBackdrop #modalContainer.login-history-theme > div:first-child {
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #modalBackdrop #modalContainer.login-history-theme > div:first-child > div:first-child {
  flex: 0 0 84px !important;
  min-height: 84px !important;
  box-sizing: border-box !important;
  padding: 18px 20px !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #modalBody {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 16px !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #modalFooter {
  flex: 0 0 59px !important;
  min-height: 59px !important;
  box-sizing: border-box !important;
  padding: 8px 20px !important;
}

/* Screenshot_6 control panel: exact teal fill + smaller typography. */
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control {
  background: #06666c !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #0a858b !important;
  border-radius: 14px !important;
  padding: 16px !important;
  min-height: 99px !important;
  box-sizing: border-box !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__title {
  color: #22ff00 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__text {
  color: #ffffff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody [data-force-logout-user] {
  min-height: 39px !important;
  padding: 0 14px !important;
  background: #a60000 !important;
  color: #fff200 !important;
  border: 1px solid #cf1414 !important;
  border-radius: 10px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* ============================================================
   LOGIN / LOGOUT HISTORY — SCREENSHOT_6 COMPACT MODAL v15
   Visual-only, component-scoped. No business/session logic.
   ============================================================ */
html body #modalBackdrop #modalContainer.login-history-theme {
  width: 600px !important;
  max-width: 600px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body #modalBackdrop #modalContainer.login-history-theme > div:first-child {
  width: 600px !important;
  max-width: 600px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

html body #modalBackdrop #modalContainer.login-history-theme #modalTitle {
  font-size: 18px !important;
  line-height: 1.2 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #modalSubtitle {
  font-size: 13px !important;
  line-height: 1.25 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #modalBody {
  font-size: 13px !important;
  padding: 16px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody {
  gap: 12px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control {
  min-height: 96px !important;
  padding: 14px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__title {
  font-size: 15px !important;
  line-height: 1.2 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__text {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody [data-force-logout-user] {
  min-height: 38px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-size: 13px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid {
  gap: 12px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid > div {
  padding: 13px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid > div .text-xs {
  font-size: 11px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid > div .text-2xl {
  font-size: 22px !important;
  line-height: 1.1 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card {
  padding: 14px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .flex > .font-semibold {
  font-size: 15px !important;
  line-height: 1.2 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .flex > span {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .grid {
  margin-top: 12px !important;
  gap: 12px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .grid > div {
  padding: 11px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card__label {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card__value {
  font-size: 14px !important;
  line-height: 1.35 !important;
}
@media (max-width: 600px) {
  html body #modalBackdrop #modalContainer.login-history-theme,
  html body #modalBackdrop #modalContainer.login-history-theme > div:first-child {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}


/* ============================================================
   LOGIN / LOGOUT HISTORY — SCREENSHOT_6 MICRO-TYPOGRAPHY v16
   Visual-only, scoped to this modal. No application logic changes.
   ============================================================ */
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody {
  font-size: 13px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__title {
  font-size: 15px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-control__text {
  font-size: 12px !important;
  line-height: 1.3 !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody [data-force-logout-user] {
  font-size: 13px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid > div .text-xs {
  font-size: 11px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody > .grid > div .text-2xl {
  font-size: 22px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .flex > .font-semibold {
  font-size: 15px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card > .flex > span {
  font-size: 11px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card__label {
  font-size: 11px !important;
}
html body #modalBackdrop #modalContainer.login-history-theme #userLoginHistoryBody .user-login-history-card__value {
  font-size: 13px !important;
}



/* =====================================================
   TOP-LEVEL ERP WORK-IN-PROGRESS PLACEHOLDER
===================================================== */
.top-placeholder-page{min-height:calc(100vh - 105px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px;background:linear-gradient(180deg,#0e0f12 0%,#121318 100%);color:#e5e7eb;border:1px solid #292b33;border-radius:20px;box-shadow:0 20px 52px rgba(0,0,0,.24)}
.top-placeholder-icon{display:flex;gap:7px;margin-bottom:18px;padding:13px 15px;border:1px solid #31343e;border-radius:14px;background:#191b21}.top-placeholder-icon span{display:block;width:8px;height:8px;border-radius:50%;background:#a855f7}.top-placeholder-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c7a1dd;margin-bottom:10px}.top-placeholder-page h1{margin:0;font-size:clamp(28px,4vw,42px);font-weight:800;color:#f9fafb}.top-placeholder-page p{margin:12px 0 0;font-size:18px;font-weight:600;color:#ded0e8}.top-placeholder-note{max-width:650px;margin-top:16px;font-size:14px;line-height:1.7;color:#9ca3af}


/* ============================================================
   GLOBAL APP FOOTER — NO OVERLAY / COMPACT + CENTERED
   Scoped to the application footer only. Keeps the footer in
   normal document flow without changing application logic.
   ============================================================ */
.app-global-footer {
  display: flex !important;
  position: relative !important;
  clear: both !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 14px 0 0 !important;
  padding: 8px 24px 12px !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  z-index: 1 !important;
  overflow: visible !important;
}

#view-payroll,
#view-attendance,
#view-monthly_attendance,
#view-idcard-module {
  margin-bottom: 0 !important;
}

/* The text container spans the main content width, then centers its text. */
.app-global-footer > div {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

@media (max-width: 600px) {
  .app-global-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .app-global-footer > div {
    white-space: normal !important;
  }
}

/* Print output should stay clean and preserve the existing no-print behavior. */
@media print {
  html body #app .app-global-footer {
    display: none !important;
  }
}

/* =====================================================
   PROFESSIONAL ERP HOME
===================================================== */
.erp-home-shell{display:flex;flex-direction:column;gap:22px;max-width:1600px;margin:0 auto;padding-bottom:18px}
.erp-home-hero{position:relative;overflow:hidden;min-height:360px;border:1px solid #272a32;border-radius:28px;background:linear-gradient(135deg,#101217 0%,#17131c 52%,#0d1216 100%);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.erp-home-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;opacity:.35;mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 75%,transparent 100%)}
.erp-home-hero-glow{position:absolute;border-radius:999px;filter:blur(10px);pointer-events:none}.erp-home-glow-a{width:320px;height:320px;right:-50px;top:-100px;background:radial-gradient(circle,rgba(199,0,57,.32),rgba(199,0,57,0) 68%)}.erp-home-glow-b{width:300px;height:300px;left:38%;bottom:-190px;background:radial-gradient(circle,rgba(76,29,149,.28),rgba(76,29,149,0) 70%)}
.erp-home-hero-content{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:20px;padding:46px 46px 40px}
.erp-home-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #333744;border-radius:999px;background:rgba(255,255,255,.04);color:#d7d9e2;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.erp-home-kicker-dot{width:7px;height:7px;border-radius:999px;background:#34d399;box-shadow:0 0 14px rgba(52,211,153,.75)}
.erp-home-hero h1{margin:16px 0 0;color:#fff;font-size:clamp(34px,4.5vw,62px);line-height:1.02;letter-spacing:-.04em;font-weight:850}.erp-home-subtitle{max-width:760px;margin:16px 0 0;color:#b8bdc9;font-size:16px;line-height:1.75}.erp-home-meta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;color:#8f96a5;font-size:12px;font-weight:600}.erp-home-meta-sep{color:#4d5260}.erp-home-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}.erp-home-primary-btn,.erp-home-secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 16px;border-radius:13px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.erp-home-primary-btn{border:1px solid rgba(255,255,255,.12);background:#c70039;color:#fff;box-shadow:0 12px 30px rgba(199,0,57,.24)}.erp-home-primary-btn:hover{transform:translateY(-1px);background:#b80035;box-shadow:0 16px 34px rgba(199,0,57,.3)}.erp-home-secondary-btn{border:1px solid #3a3d47;background:rgba(255,255,255,.04);color:#edf0f7}.erp-home-secondary-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.erp-home-hero-orbit{position:relative;width:320px;height:280px;justify-self:end}.erp-home-orbit-ring{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.erp-home-orbit-ring.ring-1{width:132px;height:132px}.erp-home-orbit-ring.ring-2{width:210px;height:210px;border-style:dashed}.erp-home-orbit-ring.ring-3{width:284px;height:284px;opacity:.65}.erp-home-orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#39222d,#1a1820 68%);border:1px solid #4b3a45;box-shadow:0 0 0 10px rgba(199,0,57,.06),0 16px 42px rgba(0,0,0,.35);color:#fff}.erp-home-orbit-core span{font-size:24px;font-weight:900;letter-spacing:.08em}.erp-home-orbit-core small{margin-top:5px;font-size:7px;line-height:1.25;letter-spacing:.18em;color:#b9a6b0;text-align:center;font-weight:800}.erp-home-orbit-node{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:26px;padding:0 9px;border:1px solid #3b3f49;border-radius:999px;background:#171a20;color:#d7dbe4;font-size:10px;font-weight:900;letter-spacing:.08em;box-shadow:0 8px 20px rgba(0,0,0,.25)}.node-1{left:10px;top:57px}.node-2{right:8px;top:69px}.node-3{left:20px;bottom:42px}.node-4{right:20px;bottom:30px}
.erp-home-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.erp-home-stat-card{display:flex;align-items:center;gap:14px;padding:18px 19px;border:1px solid #252832;border-radius:18px;background:linear-gradient(180deg,#121418 0%,#0e1014 100%);box-shadow:0 14px 32px rgba(0,0,0,.18)}.erp-home-stat-card span{display:block;color:#878d99;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.erp-home-stat-card strong{display:block;margin-top:3px;color:#fff;font-size:27px;line-height:1;font-weight:850}.erp-home-stat-card small{display:block;margin-top:5px;color:#686f7c;font-size:10px}.erp-home-stat-icon{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:900;font-size:18px}.erp-home-stat-icon.cyan{background:rgba(34,211,238,.11);color:#67e8f9;border:1px solid rgba(34,211,238,.16)}.erp-home-stat-icon.blue{background:rgba(59,130,246,.11);color:#93c5fd;border:1px solid rgba(59,130,246,.16)}.erp-home-stat-icon.violet{background:rgba(168,85,247,.11);color:#d8b4fe;border:1px solid rgba(168,85,247,.16)}.erp-home-stat-icon.amber{background:rgba(245,158,11,.11);color:#fcd34d;border:1px solid rgba(245,158,11,.16)}
.erp-home-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:4px 2px 0}.erp-home-section-kicker{font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#c7cbd4}.erp-home-section-head h2{margin:5px 0 0;color:#fff;font-size:26px;font-weight:820;letter-spacing:-.03em}.erp-home-section-note{color:#777e8b;font-size:11px;font-weight:600}
.erp-home-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.erp-home-module-card{min-height:108px;display:flex;align-items:center;gap:13px;text-align:left;padding:16px;border:1px solid #272b34;border-radius:18px;background:linear-gradient(180deg,#121419 0%,#0f1115 100%);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.15);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.erp-home-module-card:hover{transform:translateY(-2px);border-color:#414652;box-shadow:0 18px 34px rgba(0,0,0,.25);background:linear-gradient(180deg,#15181e 0%,#111318 100%)}.erp-home-module-card.accent-payroll{border-color:rgba(199,0,57,.38);background:linear-gradient(180deg,rgba(199,0,57,.12),#111217 80%)}.erp-home-module-badge{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:13px;background:#1a1d24;border:1px solid #30343d;color:#f2f4f8;font-size:12px;font-weight:900;letter-spacing:.04em}.accent-payroll .erp-home-module-badge{background:rgba(199,0,57,.16);border-color:rgba(199,0,57,.28);color:#ff8bab}.erp-home-module-copy{min-width:0;flex:1}.erp-home-module-copy strong{display:block;color:#fff;font-size:14px;font-weight:800}.erp-home-module-copy small{display:block;margin-top:5px;color:#7e8592;font-size:10px;line-height:1.45}.erp-home-module-arrow{font-size:18px;color:#68707d;transition:transform .16s ease,color .16s ease}.erp-home-module-card:hover .erp-home-module-arrow{transform:translateX(3px);color:#cfd4df}
.erp-home-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.erp-home-info-card{border:1px solid #252832;border-radius:18px;background:#101216;padding:20px 21px}.erp-home-info-head{display:flex;align-items:center;gap:12px}.erp-home-info-icon,.erp-home-tip-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.16);color:#6ee7b7;font-weight:900}.erp-home-info-head strong{display:block;color:#fff;font-size:13px;font-weight:800}.erp-home-info-head small{display:block;margin-top:3px;color:#737a87;font-size:10px}.erp-home-progress-list{display:grid;gap:14px;margin-top:19px}.erp-home-progress-list>div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}.erp-home-progress-list span{color:#aeb3be;font-size:11px;font-weight:600}.erp-home-progress-list b{color:#63e6be;font-size:10px;font-weight:800}.erp-home-progress-list i{grid-column:1/-1;display:block;height:6px;border-radius:999px;background:#1c2027;overflow:hidden}.erp-home-progress-list i em{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#c70039,#8b5cf6);box-shadow:0 0 16px rgba(139,92,246,.24)}.erp-home-tip-card{display:flex;align-items:flex-start;gap:13px;background:linear-gradient(145deg,#13151b,#0f1115)}.erp-home-tip-card .erp-home-tip-icon{background:rgba(167,139,250,.10);border-color:rgba(167,139,250,.17);color:#c4b5fd}.erp-home-tip-card strong{display:block;margin-top:1px;color:#fff;font-size:14px;font-weight:800}.erp-home-tip-card p{margin:8px 0 0;color:#818896;font-size:11px;line-height:1.7}
@media (max-width:1100px){.erp-home-hero-content{grid-template-columns:minmax(0,1fr) 280px;padding:36px}.erp-home-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.erp-home-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.erp-home-hero-content{grid-template-columns:1fr;padding:28px 22px}.erp-home-hero-orbit{display:none}.erp-home-section-head{align-items:flex-start;flex-direction:column}.erp-home-bottom-grid{grid-template-columns:1fr}.erp-home-module-grid{grid-template-columns:1fr}.erp-home-stat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.erp-home-stat-grid{grid-template-columns:1fr}.erp-home-hero h1{font-size:36px}.erp-home-subtitle{font-size:14px}.erp-home-meta-row{font-size:10px}.erp-home-actions{flex-direction:column}.erp-home-primary-btn,.erp-home-secondary-btn{width:100%}}


/* =====================================================
   HOME REFERENCE LAYOUT — INSPIRED BY SCREENSHOT_47
   Scoped to #view-home only. Existing modules untouched.
===================================================== */
#view-home{
  background:#f3f5f7 !important;
  color:#18262d !important;
  margin:-24px !important;
  padding:24px !important;
  min-height:calc(100vh - 74px) !important;
}
#view-home .erp-ref-home{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  color:#18262d;
  font-family:Arial,Helvetica,sans-serif;
}
.erp-ref-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:6px 4px 20px;
}
.erp-ref-eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7b5a76;
}
.erp-ref-header h1{
  margin:6px 0 4px;
  color:#17262d !important;
  font-size:32px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
}
.erp-ref-header p{
  margin:0;
  color:#63727a;
  font-size:13px;
  line-height:1.5;
}
.erp-ref-header-meta{
  text-align:right;
  white-space:nowrap;
}
.erp-ref-company{
  font-size:14px;
  font-weight:800;
  color:#31525a;
}
.erp-ref-date{
  margin-top:4px;
  color:#7d8a91;
  font-size:11px;
  font-weight:600;
}
.erp-ref-layout{
  display:grid;
  grid-template-columns:1.05fr 1.65fr .9fr;
  grid-template-areas:
    "sales operations finance"
    "support support support";
  border:1px solid #d4dadd;
  background:#fff;
  box-shadow:0 14px 36px rgba(28,45,52,.08);
}
.erp-ref-group{
  position:relative;
  min-width:0;
  border-right:1px solid #d4dadd;
}
.erp-ref-group:last-child{border-right:0}
.erp-ref-sales{grid-area:sales}
.erp-ref-operations{grid-area:operations}
.erp-ref-finance{grid-area:finance}
.erp-ref-support{grid-area:support;border-right:0;border-top:1px solid #d4dadd}
.erp-ref-group-title{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 14px;
  background:#8b5d82;
  color:#fff;
  font-size:18px;
  font-weight:500;
  letter-spacing:.01em;
}
.erp-ref-group-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  padding:14px;
  min-height:190px;
  align-content:start;
}
.erp-ref-support-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  min-height:150px;
}
.erp-ref-module{
  appearance:none;
  border:1px solid transparent !important;
  background:#fff !important;
  color:#17262d !important;
  min-height:122px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,border-color .16s ease;
  box-shadow:none !important;
}
.erp-ref-support-grid .erp-ref-module{min-height:128px}
.erp-ref-module:hover{
  transform:translateY(-2px);
  background:#fbfcfd !important;
  border-color:#d6dde0 !important;
  box-shadow:0 8px 18px rgba(30,50,56,.08) !important;
}
.erp-ref-icon{
  width:58px;
  height:58px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 5px 12px rgba(0,0,0,.10);
}
.erp-ref-icon svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.erp-ref-tone-indigo .erp-ref-icon{background:#6f69a1}
.erp-ref-tone-orange .erp-ref-icon{background:#be7b4d}
.erp-ref-tone-violet .erp-ref-icon{background:#8f6b96}
.erp-ref-tone-blue .erp-ref-icon{background:#6e8fa9}
.erp-ref-tone-teal .erp-ref-icon{background:#6aa694}
.erp-ref-tone-slate .erp-ref-icon{background:#6c7274}
.erp-ref-tone-rose .erp-ref-icon{background:#b9677e}
.erp-ref-tone-emerald .erp-ref-icon{background:#6d9e86}
.erp-ref-tone-purple .erp-ref-icon{background:#766fa0}
.erp-ref-tone-amber .erp-ref-icon{background:#ba8b49}
.erp-ref-module-text strong{
  display:block;
  color:#1d2a30 !important;
  font-size:13px;
  line-height:1.15;
  font-weight:700;
}
.erp-ref-module-text small{
  display:block;
  margin-top:3px;
  color:#78858b;
  font-size:10px;
  line-height:1.3;
}
.erp-ref-kpi-row{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:16px;
  border:1px solid #d4dadd;
  background:#fff;
  box-shadow:0 8px 24px rgba(28,45,52,.06);
  min-height:58px;
}
.erp-ref-kpi-row > div{
  flex:1;
  min-width:0;
  padding:11px 14px;
  border-right:1px solid #e1e5e7;
}
.erp-ref-kpi-row > div:last-child{border-right:0}
.erp-ref-kpi-row span{
  display:block;
  color:#7b878e;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.erp-ref-kpi-row strong{
  display:block;
  margin-top:2px;
  color:#263941 !important;
  font-size:18px;
  line-height:1;
}
.erp-ref-status{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:.8 !important;
  color:#2e5e4b !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.erp-ref-status span:first-child{
  display:inline-block !important;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#36a269;
  box-shadow:0 0 0 3px rgba(54,162,105,.10);
}
.erp-ref-status .erp-ref-status-dot{display:inline-block !important}
@media (max-width:1100px){
  .erp-ref-layout{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "sales operations"
      "finance finance"
      "support support";
  }
  .erp-ref-support-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:720px){
  #view-home{margin:-16px !important;padding:16px !important}
  .erp-ref-header{align-items:flex-start;flex-direction:column}
  .erp-ref-header-meta{text-align:left}
  .erp-ref-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "sales"
      "operations"
      "finance"
      "support";
  }
  .erp-ref-group{border-right:0;border-bottom:1px solid #d4dadd}
  .erp-ref-group:last-child{border-bottom:0}
  .erp-ref-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .erp-ref-kpi-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .erp-ref-kpi-row > div{border-bottom:1px solid #e1e5e7}
  .erp-ref-status{grid-column:span 2}
}

/* ============================================================
   USER PROFILE MODALS — LIGHT REFERENCE THEME
   Scoped ONLY to Add/Edit User and Change Password modals.
   Functional behavior, form submission and other modal themes
   remain untouched.
   ============================================================ */
#modalContainer.user-profile-light-theme > div {
  background: #eef4f5 !important;
  background-image: none !important;
  border: 2px solid #06666c !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.22) !important;
  color: #23363d !important;
  overflow: hidden !important;
}

#modalContainer.user-profile-light-theme > div > div:first-child {
  background: #06666c !important;
  background-image: none !important;
  border-bottom: 1px solid #49a2a7 !important;
  color: #fff !important;
}

#modalContainer.user-profile-light-theme #modalTitle,
#modalContainer.user-profile-light-theme #modalTitle * {
  color: #fff !important;
}

#modalContainer.user-profile-light-theme #modalSubtitle,
#modalContainer.user-profile-light-theme #modalSubtitle * {
  color: rgba(255,255,255,.88) !important;
}

#modalContainer.user-profile-light-theme #modalClose {
  border-color: rgba(255,255,255,.65) !important;
  background: rgba(0,0,0,.06) !important;
  color: #fff !important;
}

#modalContainer.user-profile-light-theme #modalClose:hover,
#modalContainer.user-profile-light-theme #modalClose:focus-visible {
  background: rgba(0,0,0,.18) !important;
  border-color: #fff !important;
  color: #fff !important;
}

#modalContainer.user-profile-light-theme #modalBody {
  background: #eef4f5 !important;
  color: #23363d !important;
}

#modalContainer.user-profile-light-theme label,
#modalContainer.user-profile-light-theme .text-slate-700,
#modalContainer.user-profile-light-theme .text-slate-800 {
  color: #314a52 !important;
}

#modalContainer.user-profile-light-theme .text-slate-500,
#modalContainer.user-profile-light-theme .text-slate-600 {
  color: #5f737a !important;
}

/* Password-form labels must remain readable in the light reference theme. */
#modalContainer.user-profile-light-theme #pwForm label,
#modalContainer.user-profile-light-theme #pwForm .text-slate-700,
#modalContainer.user-profile-light-theme #pwForm .text-slate-800 {
  color: #314a52 !important;
  opacity: 1 !important;
}

#modalContainer.user-profile-light-theme #pwForm .text-slate-500,
#modalContainer.user-profile-light-theme #pwForm .text-slate-600 {
  color: #5f737a !important;
  opacity: 1 !important;
}

#modalContainer.user-profile-light-theme input,
#modalContainer.user-profile-light-theme select,
#modalContainer.user-profile-light-theme textarea,
#modalContainer.user-profile-light-theme input[type=file] {
  background: #fff !important;
  color: #23363d !important;
  border-color: #c6d5d9 !important;
  box-shadow: none !important;
}

#modalContainer.user-profile-light-theme input::placeholder,
#modalContainer.user-profile-light-theme textarea::placeholder {
  color: #7d9097 !important;
}

#modalContainer.user-profile-light-theme input:focus,
#modalContainer.user-profile-light-theme select:focus,
#modalContainer.user-profile-light-theme textarea:focus {
  border-color: #06666c !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(11,115,121,.12) !important;
}

#modalContainer.user-profile-light-theme input:disabled,
#modalContainer.user-profile-light-theme select:disabled {
  background: #edf2f3 !important;
  color: #687a80 !important;
}

/* Light user-profile modal: keep disabled permission toolbar labels readable. */
#modalContainer.user-profile-light-theme #rbacSelectAll:disabled,
#modalContainer.user-profile-light-theme #rbacClearAll:disabled {
  background: #ffffff !important;
  border-color: #bfd2d7 !important;
  color: #314a52 !important;
  -webkit-text-fill-color: #314a52 !important;
  opacity: 1 !important;
  cursor: not-allowed;
  font-weight: 600 !important;
}

#modalContainer.user-profile-light-theme #rbacSelectAll:disabled *,
#modalContainer.user-profile-light-theme #rbacClearAll:disabled * {
  color: #314a52 !important;
  -webkit-text-fill-color: #314a52 !important;
  opacity: 1 !important;
}

/* User-photo panel used by the full Add/Edit User form. */
#modalContainer.user-profile-light-theme .rbac-photo-row {
  background: #f2f8f9 !important;
  border-color: #c8dce0 !important;
}

#modalContainer.user-profile-light-theme .rbac-photo-preview {
  background: #fff !important;
  border-color: #0b7379 !important;
}

#modalContainer.user-profile-light-theme .rbac-photo-row input[type=file] {
  background: #fff !important;
}

/* Permission heading keeps the dark-card section's teal reference band. */
#modalContainer.user-profile-light-theme .rbac-permission-head {
  background: #0e7476 !important;
  border-color: #5ab0b5 !important;
  color: #fff !important;
}

#modalContainer.user-profile-light-theme .rbac-permission-head .text-slate-300,
#modalContainer.user-profile-light-theme .rbac-permission-head .text-slate-500 {
  color: rgba(255,255,255,.9) !important;
}

/* Self-profile photo block remains visually compatible with the light form. */
#modalContainer.user-profile-light-theme #selfProfilePhotoPreview {
  background: #fff !important;
  border-color: #c2d6da !important;
}

/* The permission selector itself intentionally stays dark, matching the reference. */
#modalContainer.user-profile-light-theme #rbacUserForm .rbac-group-card,
#modalContainer.user-profile-light-theme #rbacUserForm .rbac-permission-card {
  color: #e2e8f0 !important;
}

#modalContainer.user-profile-light-theme #rbacUserForm .rbac-group-title,
#modalContainer.user-profile-light-theme #rbacUserForm .rbac-permission-name {
  color: #f8fafc !important;
}

#modalContainer.user-profile-light-theme #rbacUserForm .rbac-group-subtitle,
#modalContainer.user-profile-light-theme #rbacUserForm .rbac-permission-key {
  color: #64748b !important;
}

#modalContainer.user-profile-light-theme #modalFooter {
  background: #eef4f5 !important;
  border-top: 1px solid #c8d8dc !important;
  box-shadow: 0 -5px 16px rgba(26,61,67,.06) !important;
}

#modalContainer.user-profile-light-theme #modalSecondary {
  background: #fff !important;
  color: #314a52 !important;
  border-color: #bfd2d7 !important;
}

#modalContainer.user-profile-light-theme #modalSecondary:hover,
#modalContainer.user-profile-light-theme #modalSecondary:focus-visible {
  background: #f6fafb !important;
  border-color: #0b7379 !important;
  color: #0b7379 !important;
}

#modalContainer.user-profile-light-theme #modalPrimary {
  background: #06666c !important;
  color: #fff !important;
  border: 1px solid #06666c !important;
  box-shadow: none !important;
}

#modalContainer.user-profile-light-theme #modalPrimary:hover,
#modalContainer.user-profile-light-theme #modalPrimary:focus-visible {
  background: #055b60 !important;
  border-color: #055b60 !important;
}

/* FINAL CONTRAST FIX — Permission toolbar buttons in Add/Edit User modal.
   Intentionally scoped to these two controls so no other buttons are affected. */
#modalContainer.user-profile-light-theme button#rbacSelectAll,
#modalContainer.user-profile-light-theme button#rbacClearAll,
#modalContainer.user-profile-light-theme button#rbacSelectAll:disabled,
#modalContainer.user-profile-light-theme button#rbacClearAll:disabled {
  color: #17383f !important;
  -webkit-text-fill-color: #17383f !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
#modalContainer.user-profile-light-theme button#rbacSelectAll:hover,
#modalContainer.user-profile-light-theme button#rbacClearAll:hover {
  color: #0b5e65 !important;
}

/* ============================================================
   EDIT USER — compact New Password + User Photo on the right
   Scoped only to the full Add/Edit User RBAC form and only
   applies to the existing-user (edit) layout wrapper.
   ============================================================ */
#rbacUserForm .rbac-edit-password-photo-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  gap:16px !important;
  align-items:stretch !important;
  margin-top:0 !important;
}
#rbacUserForm .rbac-edit-password-field{
  flex:0 0 185px !important;
  width:185px !important;
  min-width:185px !important;
  max-width:185px !important;
}
#rbacUserForm .rbac-edit-password-field input{
  width:100% !important;
  box-sizing:border-box !important;
}
#rbacUserForm .rbac-edit-password-photo-row .rbac-photo-row{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  box-sizing:border-box !important;
  margin:0 !important;
}
#modalContainer.user-profile-light-theme #rbacUserForm .rbac-edit-password-photo-row .rbac-photo-row{
  background:#f2f8f9 !important;
  border-color:#c8dce0 !important;
}
@media (max-width: 540px){
  #rbacUserForm .rbac-edit-password-photo-row{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }
  #rbacUserForm .rbac-edit-password-field{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #rbacUserForm .rbac-edit-password-photo-row .rbac-photo-row{
    flex:1 1 auto !important;
    width:100% !important;
  }
}


/* ================================================================
   HOME SCREENSHOT_39 FINAL MATCH — high specificity, #view-home only
   Purpose: keep the Screenshot_39 visual system isolated from legacy
   home styles that may exist elsewhere in the stylesheet.
   ================================================================ */
#view-home.sr39-home{
  margin:-24px -24px 0 !important;
  padding:10px 14px 18px !important;
  background:#f4f7fb !important;
  color:#163b60 !important;
  min-height:calc(100vh - 74px) !important;
  width:auto !important;
  max-width:none !important;
}
#view-home.sr39-home > .sr39-home{
  width:100% !important;
  max-width:none !important;
}
#view-home.sr39-home .sr39-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  font-family:Arial,Helvetica,sans-serif !important;
}
#view-home.sr39-home .sr39-hero{
  min-height:195px !important;
  padding:24px 26px !important;
  border:1px solid #c4d9ea !important;
  border-radius:7px !important;
  background-color:#155a91 !important;background-image:linear-gradient(90deg,rgba(10,66,111,.98) 0%,rgba(17,82,132,.84) 42%,rgba(22,96,153,.48) 68%,rgba(18,76,128,.28) 100%),url('assets/img/home-hero-city-reference.jpg') !important;background-position:center center,right center !important;background-size:100% 100%,auto 100% !important;background-repeat:no-repeat !important;
  box-shadow:0 3px 12px rgba(22,67,105,.12) !important;
}
#view-home.sr39-home .sr39-title{font-size:35px !important;font-weight:800 !important;color:#fff !important}
#view-home.sr39-home .sr39-sub{font-size:12px !important;line-height:1.55 !important;color:#eaf4fb !important}
#view-home.sr39-home .sr39-chip{font-size:10px !important;padding:7px 10px !important;border-radius:7px !important}

#view-home.sr39-home .sr39-kpis{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px !important;
}
#view-home.sr39-home .sr39-kpi{
  position:relative !important;
  display:block !important;
  min-height:95px !important;
  padding:12px 13px !important;
  margin:0 !important;
  border:1px solid #cbdceb !important;
  border-radius:7px !important;
  background:#fff !important;
  box-shadow:0 1px 5px rgba(25,57,88,.06) !important;
  overflow:hidden !important;
}
#view-home.sr39-home .sr39-kpi-icon{
  position:absolute !important;
  left:13px !important;
  top:13px !important;
  width:38px !important;
  height:38px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  font-weight:700 !important;
}
#view-home.sr39-home .sr39-kpi-label{
  display:block !important;
  margin:0 0 0 49px !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1.25 !important;
  color:#597189 !important;
  font-weight:600 !important;
}
#view-home.sr39-home .sr39-kpi-value{
  display:block !important;
  margin:7px 0 0 49px !important;
  padding:0 !important;
  font-size:22px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  color:#1f4a6f !important;
  white-space:nowrap !important;
}
#view-home.sr39-home .sr39-kpi-action[data-sr39-latest-payroll]{cursor:pointer !important;}
#view-home.sr39-home .sr39-kpi-action[data-sr39-latest-payroll]:hover{color:#fff !important;}
#view-home.sr39-home .sr39-kpi-action{
  display:block !important;
  margin:7px 0 0 !important;
  padding:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  color:#4280b8 !important;
  font-weight:600 !important;
}
#view-home.sr39-home .sr39-blue .sr39-kpi-icon{background:#e4f0ff !important;color:#297edf !important}
#view-home.sr39-home .sr39-green .sr39-kpi-icon{background:#e5f8ee !important;color:#24a769 !important}
#view-home.sr39-home .sr39-purple .sr39-kpi-icon{background:#eee7ff !important;color:#7748df !important}
#view-home.sr39-home .sr39-amber .sr39-kpi-icon{background:#fff2dc !important;color:#da961d !important}
#view-home.sr39-home .sr39-cyan .sr39-kpi-icon{background:#dff8f7 !important;color:#14979e !important}
#view-home.sr39-home .sr39-indigo .sr39-kpi-icon{background:#e9ebff !important;color:#5661c8 !important}

#view-home.sr39-home .sr39-body{
  display:grid !important;
  grid-template-columns:minmax(0,2fr) minmax(300px,.82fr) !important;
  gap:10px !important;
  align-items:start !important;
}
#view-home.sr39-home .sr39-top-pair,
#view-home.sr39-home .sr39-lower-pair{
  display:grid !important;
  grid-template-columns:1.25fr .95fr !important;
  gap:10px !important;
}
#view-home.sr39-home .sr39-panel{
  background:#fff !important;
  border:1px solid #cbdceb !important;
  border-radius:7px !important;
  box-shadow:0 1px 5px rgba(25,57,88,.06) !important;
  min-width:0 !important;
}
#view-home.sr39-home .sr39-panel-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:11px 13px !important;
  border-bottom:1px solid #e1e9f0 !important;
}
#view-home.sr39-home .sr39-panel-head strong{font-size:12px !important;color:#173f63 !important}
#view-home.sr39-home .sr39-body-inner{padding:9px 11px !important}
#view-home.sr39-home .sr39-chart{height:205px !important}
#view-home.sr39-home .sr39-donut-area{min-height:205px !important}
#view-home.sr39-home .sr39-activity-row{min-height:58px !important}
#view-home.sr39-home .sr39-alert-row{min-height:52px !important}
#view-home.sr39-home .sr39-ad{min-height:95px !important}
#view-home.sr39-home .sr39-footer{font-size:8px !important}

@media (max-width:1500px) and (min-width:1251px){
  #view-home.sr39-home .sr39-body{grid-template-columns:minmax(0,1.92fr) minmax(290px,.84fr) !important}
}
@media (max-width:1250px){
  #view-home.sr39-home .sr39-body{grid-template-columns:1fr !important}
  #view-home.sr39-home .sr39-right{display:grid !important;grid-template-columns:1fr 1fr !important}
  #view-home.sr39-home .sr39-kpis{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:900px){
  #view-home.sr39-home .sr39-top-pair,#view-home.sr39-home .sr39-lower-pair{grid-template-columns:1fr !important}
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(3,1fr) !important}
  #view-home.sr39-home .sr39-right{display:flex !important}
  #view-home.sr39-home .sr39-hero-right{display:none !important}
}
@media (max-width:620px){
  #view-home.sr39-home .sr39-kpis{grid-template-columns:1fr 1fr !important}
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(2,1fr) !important}
}


/* ================================================================
   HOME SCREENSHOT_39 — FULL VIEWPORT MODE
   The reference Home is a standalone dashboard surface.  When Home is
   active, only the Home canvas is shown; the existing shell returns
   unchanged as soon as any other module is opened.
   ================================================================ */
#app.sr39-home-mode{background:#f4f7fb !important;min-height:100vh !important;}
#app.sr39-home-mode > .flex{display:block !important;min-height:100vh !important;}
#app.sr39-home-mode > .flex > aside{display:none !important;}
#app.sr39-home-mode > .flex > main{width:100% !important;min-width:0 !important;max-width:none !important;background:#f4f7fb !important;}
#app.sr39-home-mode > .flex > main > .no-print.sticky{display:none !important;}
#app.sr39-home-mode > .flex > main > .p-6{padding:0 !important;margin:0 !important;max-width:none !important;}
#app.sr39-home-mode > .flex > main > .app-global-footer{display:none !important;}
#app.sr39-home-mode #view-home.sr39-home{
  display:block !important;
  width:100% !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:15px 13px 14px !important;
  background:#f4f7fb !important;
}
#app.sr39-home-mode #view-home.sr39-home .sr39-shell{max-width:1207px !important;margin:0 auto !important;gap:10px !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-footer{display:none !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-hero{min-height:195px !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-kpis{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-kpi-value{margin-left:49px !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-body{grid-template-columns:minmax(0,2.02fr) minmax(290px,.78fr) !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-top-pair,
#app.sr39-home-mode #view-home.sr39-home .sr39-lower-pair{grid-template-columns:1.25fr .95fr !important;}
#app.sr39-home-mode #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(7,minmax(0,1fr)) !important;}
@media (max-width: 900px){
  #app.sr39-home-mode #view-home.sr39-home{padding:10px !important;}
  #app.sr39-home-mode #view-home.sr39-home .sr39-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  #app.sr39-home-mode #view-home.sr39-home .sr39-body{grid-template-columns:1fr !important;}
  #app.sr39-home-mode #view-home.sr39-home .sr39-top-pair,
  #app.sr39-home-mode #view-home.sr39-home .sr39-lower-pair{grid-template-columns:1fr !important;}
  #app.sr39-home-mode #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media (max-width: 620px){
  #app.sr39-home-mode #view-home.sr39-home .sr39-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  #app.sr39-home-mode #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* ================================================================
   HOME SCREENSHOT_39 — FINAL FULL-WIDTH HERO BACKGROUND FIX V3
   ================================================================ */
#view-home.sr39-home .sr39-hero,
#app.sr39-home-mode #view-home.sr39-home .sr39-hero{
  background-color:#155a91 !important;
  background-image:
    linear-gradient(90deg,
      rgba(10,66,111,.56) 0%,
      rgba(15,78,126,.43) 34%,
      rgba(18,88,140,.25) 58%,
      rgba(18,76,128,.16) 80%,
      rgba(18,76,128,.13) 100%),
    url('assets/img/home-hero-building-wide.jpg') !important;
  background-position:center center, center center !important;
  background-size:100% 100%, 100% 100% !important;
  background-repeat:no-repeat !important;
}
#view-home.sr39-home .sr39-hero-inner{
  position:relative !important;
  z-index:2 !important;
}


/* Screenshot_39 HERO — image visibility/crop correction */
#view-home.sr39-home .sr39-hero,
#app.sr39-home-mode #view-home.sr39-home .sr39-hero{
  background-image:
    linear-gradient(90deg,
      rgba(10,66,111,.56) 0%,
      rgba(15,78,126,.43) 34%,
      rgba(18,88,140,.25) 58%,
      rgba(18,76,128,.16) 80%,
      rgba(18,76,128,.13) 100%),
    url('assets/img/home-hero-building-wide.jpg') !important;
  background-position:center center, center center !important;
  background-size:100% 100%, 100% 100% !important;
  background-repeat:no-repeat !important;
  background-color:#155a91 !important;
}
#view-home.sr39-home .sr39-hero:after{
  background:linear-gradient(90deg,rgba(6,53,90,.06),transparent 58%,rgba(255,255,255,.035)) !important;
}
/* Screenshot_39 KPI card fidelity patch — Home only */
#view-home.sr39-home .sr39-kpis{gap:10px !important;}
#view-home.sr39-home .sr39-kpi{
  min-height:95px !important;
  padding:11px 13px 9px !important;
  border-radius:7px !important;
  border-width:1px !important;
  box-shadow:0 1px 5px rgba(25,57,88,.045) !important;
}
#view-home.sr39-home .sr39-blue{background:linear-gradient(180deg,#ffffff 0%,#f5faff 100%) !important;border-color:#c7def8 !important;}
#view-home.sr39-home .sr39-green{background:linear-gradient(180deg,#ffffff 0%,#f3fcf7 100%) !important;border-color:#c4ead1 !important;}
#view-home.sr39-home .sr39-purple{background:linear-gradient(180deg,#ffffff 0%,#f7f3ff 100%) !important;border-color:#d8caf9 !important;}
#view-home.sr39-home .sr39-amber{background:linear-gradient(180deg,#ffffff 0%,#fff9ef 100%) !important;border-color:#f0d7ae !important;}
#view-home.sr39-home .sr39-cyan{background:linear-gradient(180deg,#ffffff 0%,#fff6fa 100%) !important;border-color:#efcfe0 !important;}
#view-home.sr39-home .sr39-indigo{background:linear-gradient(180deg,#ffffff 0%,#f5f5ff 100%) !important;border-color:#ccd0ee !important;}
#view-home.sr39-home .sr39-kpi-icon{
  left:12px !important;top:11px !important;width:44px !important;height:44px !important;border-radius:11px !important;
  font-size:21px !important;
}
#view-home.sr39-home .sr39-kpi-icon svg{width:22px !important;height:22px !important;display:block !important;}
#view-home.sr39-home .sr39-blue .sr39-kpi-icon{background:#2f8ff0 !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-green .sr39-kpi-icon{background:#31bc72 !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-purple .sr39-kpi-icon{background:#8b58fb !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-amber .sr39-kpi-icon{background:#f9a923 !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-cyan .sr39-kpi-icon{background:#13b7c0 !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-indigo .sr39-kpi-icon{background:#5b5dcb !important;color:#fff !important;border:0 !important;}
#view-home.sr39-home .sr39-kpi-label{margin-left:57px !important;font-size:10px !important;line-height:1.2 !important;color:#496a87 !important;font-weight:600 !important;}
#view-home.sr39-home .sr39-kpi-value{margin:6px 0 0 57px !important;font-size:21px !important;line-height:1.08 !important;color:#1c4a72 !important;font-weight:800 !important;}
#view-home.sr39-home .sr39-kpi-action{margin-top:8px !important;font-size:10px !important;line-height:1.2 !important;font-weight:600 !important;}
#view-home.sr39-home .sr39-blue .sr39-kpi-action{color:#2d75bd !important}#view-home.sr39-home .sr39-green .sr39-kpi-action{color:#27a366 !important}#view-home.sr39-home .sr39-purple .sr39-kpi-action{color:#7144d0 !important}#view-home.sr39-home .sr39-amber .sr39-kpi-action{color:#d89218 !important}#view-home.sr39-home .sr39-cyan .sr39-kpi-action{color:#168d94 !important}#view-home.sr39-home .sr39-indigo .sr39-kpi-action{color:#5862c9 !important}


/* ================================================================
   HOME FOOTER BOUNDARY FIX — FINAL
   Problem addressed:
   The Screenshot_39 Home canvas used a negative margin on all four
   sides.  The negative bottom margin allowed the lower dashboard/ad
   surface to visually intrude into the global application footer.
   Keep the existing top/side positioning, but never extend Home into
   the footer's document-flow area.
   Scoped to Home only; no business logic or module behavior changes.
   ================================================================ */
#app:not(.sr39-home-mode) #view-home.sr39-home{
  margin:-24px -24px 0 !important;
  min-height:calc(100vh - 74px) !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:0 !important;
}
#app:not(.sr39-home-mode) #view-home.sr39-home .sr39-shell{
  padding-bottom:14px !important;
  box-sizing:border-box !important;
}
#app:not(.sr39-home-mode) #view-home.sr39-home .sr39-ad{
  position:relative !important;
  z-index:1 !important;
}
#app:not(.sr39-home-mode) > .flex > main > .app-global-footer{
  position:relative !important;
  z-index:20 !important;
  clear:both !important;
  flex:0 0 auto !important;
}


/* ================================================================
   HOME SCREENSHOT_62/63/64 -> 65 FINAL LAYOUT + QUICK ACTION MATCH
   Scoped to the generated Screenshot_39 home only. This changes
   presentation/layout only; navigation and data logic remain intact.
   ================================================================ */
#view-home.sr39-home .sr39-body{
  align-items:stretch !important;
}
#view-home.sr39-home .sr39-left{
  min-height:100% !important;
}
#view-home.sr39-home .sr39-left > .sr39-panel:last-child{
  margin-top:auto !important;
}
#view-home.sr39-home .sr39-right{
  min-height:100% !important;
}
#view-home.sr39-home .sr39-ad{
  margin-top:auto !important;
  min-height:80px !important;
  height:80px !important;
  align-self:stretch !important;
}

/* Seven Quick Action cards must remain on ONE desktop row. */
#view-home.sr39-home .sr39-quick{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:8px !important;
}
#view-home.sr39-home .sr39-quick button{
  min-width:0 !important;
  min-height:70px !important;
  padding:7px 6px !important;
  border:1px solid #d6e3ee !important;
  border-radius:7px !important;
  box-shadow:none !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
}
#view-home.sr39-home .sr39-quick button:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 4px 10px rgba(31,65,96,.08) !important;
}
#view-home.sr39-home .sr39-quick button:nth-child(1){background:linear-gradient(180deg,#fffaff 0%,#f7f0ff 100%) !important;border-color:#decffb !important;}
#view-home.sr39-home .sr39-quick button:nth-child(2){background:linear-gradient(180deg,#fbfffc 0%,#eefaf1 100%) !important;border-color:#c9ead4 !important;}
#view-home.sr39-home .sr39-quick button:nth-child(3){background:linear-gradient(180deg,#fbfdff 0%,#edf6ff 100%) !important;border-color:#c9ddf3 !important;}
#view-home.sr39-home .sr39-quick button:nth-child(4){background:linear-gradient(180deg,#fffdfa 0%,#fff5e7 100%) !important;border-color:#efd9b8 !important;}
#view-home.sr39-home .sr39-quick button:nth-child(5){background:linear-gradient(180deg,#fffafd 0%,#fff0f5 100%) !important;border-color:#efd0db !important;}
#view-home.sr39-home .sr39-quick button:nth-child(6){background:linear-gradient(180deg,#fbffff 0%,#eafafa 100%) !important;border-color:#c8e6e6 !important;}
#view-home.sr39-home .sr39-quick button:nth-child(7){background:linear-gradient(180deg,#fbfbff 0%,#eff1ff 100%) !important;border-color:#d0d2f0 !important;}
#view-home.sr39-home .sr39-qicon{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  margin-bottom:1px !important;
}
#view-home.sr39-home .sr39-qicon svg{width:18px !important;height:18px !important;display:block !important;}
#view-home.sr39-home .sr39-qicon.qa-purple{background:#824cfa !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-green{background:#35b676 !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-blue{background:#2f8fed !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-orange{background:#ffa92d !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-pink{background:#e85d86 !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-cyan{background:#12b9c1 !important;color:#fff !important;}
#view-home.sr39-home .sr39-qicon.qa-indigo{background:#5a5dcc !important;color:#fff !important;}
#view-home.sr39-home .sr39-quick strong{
  display:block !important;
  max-width:100% !important;
  font-size:8px !important;
  line-height:1.2 !important;
  color:#38556c !important;
  font-weight:700 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

@media (max-width:1100px) and (min-width:901px){
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(7,minmax(86px,1fr)) !important;overflow-x:auto !important;}
}
@media (max-width:900px){
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(3,minmax(0,1fr)) !important;overflow-x:visible !important;}
}
@media (max-width:620px){
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}


/* ================================================================
   QUICK ACTIONS — FINAL ONE-LINE + MULTICOLOR ICONS
   Scoped to Home only. Presentation-only; no navigation/data logic.
   Desktop/tablet layout intentionally uses flex so the seven actions
   cannot wrap into a second row. Smaller breakpoints remain responsive.
   ================================================================ */
#view-home.sr39-home .sr39-quick{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  overflow:visible !important;
}
#view-home.sr39-home .sr39-quick button{
  flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#view-home.sr39-home .sr39-qicon{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  box-shadow:none !important;
}
#view-home.sr39-home .sr39-qicon svg,
#view-home.sr39-home .sr39-qicon svg *{
  color:currentColor !important;
  stroke:currentColor !important;
}
#view-home.sr39-home .sr39-qicon svg{
  width:18px !important;
  height:18px !important;
}
#view-home.sr39-home .sr39-qicon.qa-purple{background:#824cfa !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-green{background:#35b676 !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-blue{background:#2f8fed !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-orange{background:#ffa92d !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-pink{background:#e85d86 !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-cyan{background:#12b9c1 !important;color:#fff !important}
#view-home.sr39-home .sr39-qicon.qa-indigo{background:#5a5dcc !important;color:#fff !important}

@media (max-width:900px){
  #view-home.sr39-home .sr39-quick{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    flex-wrap:initial !important;
    overflow:visible !important;
  }
  #view-home.sr39-home .sr39-quick button{width:auto !important;flex:initial !important;}
}
@media (max-width:620px){
  #view-home.sr39-home .sr39-quick{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* ================================================================
   HOME -> GLOBAL FOOTER FLOW FIX — ROOT LAYOUT BOUNDARY
   Home only. Keeps the dashboard inside the main content flow so it
   can never occupy or visually intrude into the global footer area.
   No data, navigation, API, or module logic is changed.
   ================================================================ */
#app:not(.sr39-home-mode) > .flex > main:has(#view-home.sr39-home:not(.hidden)){
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
  box-sizing:border-box !important;
}
#app:not(.sr39-home-mode) > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .p-6{
  flex:1 1 auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}
#app:not(.sr39-home-mode) #view-home.sr39-home{
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
}
#app:not(.sr39-home-mode) #view-home.sr39-home .sr39-shell{
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
}


/* ================================================================
   HOME / FOOTER BOUNDARY — FINAL BULLETPROOF FLOW FIX
   ------------------------------------------------
   Problem: the Home view was being sized as a full viewport while it
   lived inside the same <main> that also contains the global footer.
   That allowed the Home canvas (and its legacy inner footer strip) to
   consume/visually intrude into the footer area.

   Fix: Home participates in normal document flow; the main content
   wrapper allocates the remaining viewport between the topbar and the
   global footer. The legacy Home-only footer is suppressed so there is
   exactly one application footer. Scoped to Home layout only.
   No data/API/navigation/module logic is touched.
   ================================================================ */

/* 1) The application main becomes a vertical layout only while Home is active. */
#app.sr39-home-mode > .flex > main,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)){
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:100vh !important;
  box-sizing:border-box !important;
}

/* 2) Keep the existing Home topbar in the normal flow. */
#app.sr39-home-mode > .flex > main > .no-print.sticky{
  display:block !important;
  flex:0 0 auto !important;
  min-height:0 !important;
}

/* 3) The views wrapper owns only the remaining space; it may grow if
      dashboard content is genuinely taller than the viewport. */
#app.sr39-home-mode > .flex > main > .p-6,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .p-6{
  flex:1 1 auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}

/* 4) Home itself must never impose a viewport-sized box inside the
      views wrapper. */
#app.sr39-home-mode #view-home.sr39-home,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) #view-home.sr39-home{
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
  position:relative !important;
}

/* 5) Keep the generated dashboard shell content-driven. */
#app.sr39-home-mode #view-home.sr39-home .sr39-shell,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) #view-home.sr39-home .sr39-shell{
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
}

/* 6) The legacy Home footer strip belongs inside the Home template and
      is intentionally removed; the global app footer is the single
      footer boundary. */
#view-home.sr39-home .sr39-footer{
  display:none !important;
}

/* 7) Global footer is back in normal flow on Home and cannot overlap it. */
#app.sr39-home-mode > .flex > main > .app-global-footer,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .app-global-footer{
  display:flex !important;
  position:relative !important;
  flex:0 0 auto !important;
  clear:both !important;
  z-index:20 !important;
  box-sizing:border-box !important;
}


/* ================================================================
   HOME / GLOBAL FOOTER — FINAL DOCUMENT-FLOW BOUNDARY
   ----------------------------------------------------------------
   Home must behave like the Attendance module: the Home canvas ends
   at the content boundary and the application footer starts after it.
   This is presentation/layout only and is scoped to Home activation.
   ================================================================ */
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)){
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
  min-width:0 !important;
  overflow:visible !important;
  background:#f4f7fb !important;
  box-sizing:border-box !important;
}

#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .p-6{
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:#f4f7fb !important;
  box-sizing:border-box !important;
}

#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) #view-home.sr39-home,
#app.sr39-home-mode #view-home.sr39-home{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  overflow:visible !important;
  background:#f4f7fb !important;
}

#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) #view-home.sr39-home .sr39-shell,
#app.sr39-home-mode #view-home.sr39-home .sr39-shell{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* Home uses the same global topbar/footer shell as the other modules. */
#app.sr39-home-mode > .flex > main > .no-print.sticky{
  display:block !important;
  flex:0 0 auto !important;
}

#app.sr39-home-mode > .flex > main > .p-6{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:#f4f7fb !important;
}

#app.sr39-home-mode > .flex > main > .app-global-footer,
#app > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .app-global-footer{
  display:flex !important;
  position:relative !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:40px !important;
  max-height:none !important;
  margin:0 !important;
  clear:both !important;
  z-index:20 !important;
  box-sizing:border-box !important;
}

/* No second Home-specific footer inside the dashboard canvas. */
#view-home.sr39-home .sr39-footer{
  display:none !important;
}


/* ===== FINAL HOME OUTER INSET MATCH ===== */
/* Home only: cancel the standard .p-6 outer inset on top/left/right.
   Bottom remains 0 so the global footer flow is unchanged. */
#app:not(.sr39-home-mode) > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .p-6 #view-home.sr39-home{
  margin:-24px -24px 0 !important;
}

/* ===== FINAL HOME RIGHT EDGE GAP FIX =====
   Home-only desktop presentation fix.
   Expands the Home canvas to the viewport edge without altering
   footer flow or other modules. */
@media (min-width:901px){
  #app:not(.sr39-home-mode) > .flex > main:has(#view-home.sr39-home:not(.hidden)) > .p-6 #view-home.sr39-home{
    width:calc(100% + 56px) !important;
    max-width:none !important;
  }
}


/* HOME KPI ACTION LINKS — unified reference-button appearance */
#view-home.sr39-home .sr39-kpi-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:7px 0 0 !important;
  padding:3px 6px !important;
  min-height:18px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:4px !important;
  background:#ffffff !important;
  color:#7144d0 !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:600 !important;
  font-family:inherit !important;
  text-decoration:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease !important;
}
#view-home.sr39-home .sr39-kpi-action:hover,
#view-home.sr39-home .sr39-kpi-action:focus-visible{
  background:#7144d0 !important;
  border-color:#7144d0 !important;
  color:#ffffff !important;
}
#view-home.sr39-home .sr39-kpi-action:focus-visible{
  outline:2px solid rgba(113,68,208,.22) !important;
  outline-offset:1px !important;
}
#view-home.sr39-home .sr39-kpi-action:active{
  background:#5f35b6 !important;
  border-color:#5f35b6 !important;
  color:#ffffff !important;
}

/* =====================================================
   HAND CURSOR CONSISTENCY — screenshots 26–34
   Presentation-only: no event handlers or layout rules changed.
===================================================== */
#topParentMenus .top-parent-menu-btn,
#nav > button[data-nav],
button[data-action],
button[onclick],
select{cursor:pointer !important;}


/* Home panel action buttons: stronger default contrast + white hover text. */
#view-home.sr39-home .sr39-panel-action{
  color:#1f4f74 !important;
  background:#fff !important;
  border:1px solid #9fb8cc !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease !important;
}
#view-home.sr39-home .sr39-panel-action:hover,
#view-home.sr39-home .sr39-panel-action:focus-visible{
  color:#fff !important;
  background:#7144d0 !important;
  border-color:#7144d0 !important;
  box-shadow:0 3px 8px rgba(113,68,208,.22) !important;
}

/* Home Department company filter — visible default/selected state */
#view-home.sr39-home .sr39-company-filter{
  min-width:160px !important;
  max-width:220px !important;
  height:30px !important;
  padding:0 26px 0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  color:#173f63 !important;
  -webkit-text-fill-color:#173f63 !important;
  background:#ffffff !important;
  border:1px solid #8da8bc !important;
  border-radius:6px !important;
  box-shadow:0 1px 3px rgba(25,57,88,.08) !important;
  cursor:pointer !important;
}
#view-home.sr39-home .sr39-company-filter:hover,
#view-home.sr39-home .sr39-company-filter:focus{
  color:#173f63 !important;
  -webkit-text-fill-color:#173f63 !important;
  background:#ffffff !important;
  border-color:#7144d0 !important;
  box-shadow:0 2px 7px rgba(113,68,208,.18) !important;
}

/* PTK-229: System Alerts View All intentionally blank; keep the control space stable. */
.sr39-system-alerts-view-all{min-width:58px!important;min-height:26px!important;visibility:hidden!important;cursor:default!important}


/* PTK-232: MODERN TOP-LEVEL UNDER-WORKING PAGES */

/* PTK-232: MODERN TOP-LEVEL UNDER-WORKING PAGES */
.top-placeholder-page{min-height:calc(100vh - 105px);padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.top-placeholder-shell{width:100%;min-height:calc(100vh - 105px);box-sizing:border-box;padding:22px 28px 34px;color:#e5e7eb}
.top-placeholder-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:4px 4px 18px}
.top-placeholder-title-wrap{display:flex;align-items:center;gap:15px;min-width:0}
.top-placeholder-module-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#1b324d 0%,#0b7d7f 100%);border:1px solid rgba(148,163,184,.28);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.top-placeholder-module-icon-mark{width:17px;height:17px;border:2px solid #fff;border-radius:4px;position:relative;box-sizing:border-box}
.top-placeholder-module-icon-mark:after{content:"";position:absolute;left:3px;right:3px;bottom:-6px;height:2px;background:#fff;border-radius:999px;box-shadow:0 -5px 0 #fff}
.top-placeholder-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#6fa6c5;margin-bottom:4px}
.top-placeholder-header h1{margin:0;font-size:clamp(24px,2.2vw,34px);font-weight:800;line-height:1.08;color:#f8fafc}
.top-placeholder-description{margin:7px 0 0;font-size:13px;color:#94a3b8;line-height:1.5}
.top-placeholder-status{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:#151922;border:1px solid #2d3340;color:#cbd5e1;font-size:12px;font-weight:700;white-space:nowrap}
.top-placeholder-status-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.top-placeholder-divider{height:1px;background:linear-gradient(90deg,rgba(99,102,241,.55),rgba(51,65,85,.16),transparent);margin:0 4px 18px}
.top-placeholder-visual-card{background:#ffffff;border:1px solid #dbe3ec;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.18);overflow:hidden}
.top-placeholder-visual-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;border-bottom:1px solid #e6ebf1;background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%)}
.top-placeholder-visual-label{font-size:15px;font-weight:800;color:#0f172a}
.top-placeholder-visual-subtitle{margin-top:3px;font-size:12px;color:#64748b}
.top-placeholder-coming-soon{padding:7px 10px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#4338ca;font-size:11px;font-weight:800;white-space:nowrap}
.top-placeholder-image-frame{background:#fff;padding:18px}
.top-placeholder-image-frame img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain;object-position:center;border-radius:12px;box-shadow:0 7px 22px rgba(15,23,42,.08)}
@media (max-width: 900px){
  .top-placeholder-shell{padding:18px 18px 28px}
  .top-placeholder-header{align-items:flex-start;flex-direction:column}
  .top-placeholder-status{align-self:flex-start}
  .top-placeholder-visual-head{align-items:flex-start;flex-direction:column}
  .top-placeholder-coming-soon{align-self:flex-start}
}
@media (max-width: 600px){
  .top-placeholder-shell{padding:14px 12px 22px}
  .top-placeholder-title-wrap{gap:11px}
  .top-placeholder-module-icon{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  .top-placeholder-header h1{font-size:24px}
  .top-placeholder-description{font-size:12px}
  .top-placeholder-image-frame{padding:10px}
  .top-placeholder-image-frame img{max-height:none;border-radius:9px}
}


/* PTK-234: Screenshot_60 exact-size under-working top-module placeholder.
   Scoped only to the temporary top-placeholder view. */
#view-top-placeholder.top-placeholder-page,
#view-top-placeholder .top-placeholder-page {
  box-sizing: border-box;
  margin: -24px !important;
  width: calc(100% + 48px) !important;
  min-height: calc(100vh - 74px) !important;
  padding: 20px 18px 32px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  display: block !important;
}
#view-top-placeholder .top-placeholder-simple-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #0a7f82 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
#view-top-placeholder .top-placeholder-simple-image-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 28px 0 0 !important;
}
#view-top-placeholder .top-placeholder-simple-image {
  display: block !important;
  width: 533px !important;
  max-width: 533px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 900px) {
  #view-top-placeholder.top-placeholder-page,
  #view-top-placeholder .top-placeholder-page {
    margin: -14px !important;
    width: calc(100% + 28px) !important;
    padding: 16px 14px 24px !important;
    min-height: calc(100vh - 64px) !important;
  }
  #view-top-placeholder .top-placeholder-simple-title {
    font-size: 18px !important;
  }
  #view-top-placeholder .top-placeholder-simple-image {
    width: min(82%, 799px) !important;
  }
}

/* PTK-235: final Screenshot_60 visual guard for top-level under-working pages. */
#view-top-placeholder.top-placeholder-host,
#view-top-placeholder.top-placeholder-host .top-placeholder-page.top-placeholder-s60 {
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#view-top-placeholder.top-placeholder-host {
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  min-height:0 !important;
}
#view-top-placeholder.top-placeholder-host .top-placeholder-page.top-placeholder-s60 {
  min-height:calc(100vh - 116px) !important;
  padding:22px 18px 26px !important;
  text-align:left !important;
}
#view-top-placeholder.top-placeholder-host .top-placeholder-simple-title {
  margin:0 !important;
  padding:0 !important;
  color:#0a7f82 !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  text-align:left !important;
}
#view-top-placeholder.top-placeholder-host .top-placeholder-simple-image-wrap {
  width:100% !important;
  margin:32px 0 0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
#view-top-placeholder.top-placeholder-host .top-placeholder-simple-image {
  width:533px !important;
  max-width:533px !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width:900px){
  #view-top-placeholder.top-placeholder-host .top-placeholder-page.top-placeholder-s60{min-height:calc(100vh - 104px)!important;padding:18px 14px 24px!important}
  #view-top-placeholder.top-placeholder-host .top-placeholder-simple-title{font-size:16px!important}
  #view-top-placeholder.top-placeholder-host .top-placeholder-simple-image{width:min(82vw,533px)!important;max-width:min(82vw,533px)!important}
}

/* PTK-239: Preserve uploaded sidebar branding logo aspect ratio without cropping. */
#brandLogo { object-fit: contain !important; }


/* PTK-240: Restore visible glass-style frame around the sidebar branding logo on dark themes. */
/* Scoped to the actual sidebar brand container so no other cards, images, or buttons are affected. */
#brandIcon {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 16px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#brandIcon #brandLogo {
  object-fit: contain !important;
  background: transparent !important;
}


/* PTK-242: Make the branding glass frame unmistakable on the dark sidebar. */
#brandIcon {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(125,211,252,.12) 48%, rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  outline: 1px solid rgba(56,189,248,.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(14,165,233,.18),
    0 0 0 2px rgba(255,255,255,.08),
    0 0 12px rgba(56,189,248,.30),
    0 8px 18px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}
#brandIcon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 42%, rgba(56,189,248,.10));
  pointer-events: none;
  z-index: 0;
}
#brandIcon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 0 8px rgba(255,255,255,.12);
  pointer-events: none;
  z-index: 2;
}
#brandIcon #brandLogo,
#brandIcon #brandMark {
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* PTK-242: Strong, deterministic Home-sidebar accent.  Keep it scoped to Home only. */
#nav > button[data-nav="home"] {
  border: 1px solid rgba(56,189,248,.46) !important;
  background: linear-gradient(90deg, rgba(8,47,73,.96), rgba(15,23,42,.98)) !important;
  box-shadow: inset 4px 0 0 #22d3ee, 0 7px 18px rgba(2,132,199,.16) !important;
}
#nav > button[data-nav="home"]:hover {
  background: linear-gradient(90deg, rgba(8,47,73,1), rgba(15,23,42,1)) !important;
}
#nav > button[data-nav="home"] > div:first-child > div > svg,
#nav > button[data-nav="home"] > div:first-child > svg {
  color: #22d3ee !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 5px rgba(34,211,238,.42));
}
#nav > button[data-nav="home"] > div:first-child > div > span,
#nav > button[data-nav="home"] > div:first-child > div > div,
#nav > button[data-nav="home"] > div:first-child > span {
  color: #e6fbff !important;
}