.root{--bg:#f6f8fb;--card:#ffffff;--muted:#6b7280;--accent:#2563eb;--accent-2:#06b6d4;--danger:#ef4444;--rounded:10px}
:root{color-scheme:light}
html,body{height:100%}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;padding:18px;color:#0f172a;transition:background .3s ease,color .2s ease}
.dark{--bg:#0b1220;--card:#071226;--muted:#9ca3af;--accent:#60a5fa;--accent-2:#34d399;color-scheme:dark}
.container{max-width:1100px;margin:0 auto}
.topbar{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.notifications{font-size:13px;color:var(--muted)}
h1{margin:8px 0 16px}
nav{margin-bottom:18px}
.nav a{color:var(--accent);text-decoration:none;margin-right:12px}
.btn{background:var(--accent);color:white;padding:10px 14px;border-radius:12px;border:none;cursor:pointer;text-decoration:none}
.icon-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;text-decoration:none}
.icon-btn .icon{font-size:20px;line-height:1;margin-bottom:6px;display:block}
.icon-btn .icon-img{width:40px;height:40px;object-fit:contain;margin-bottom:6px;display:block}
/* Ensure icon buttons show the image above the label and no link underline */
.icon-btn{gap:6px;text-decoration:none}
.icon-btn, .icon-btn:link, .icon-btn:visited{text-decoration:none}
.icon-btn:hover, .icon-btn:focus{text-decoration:none}
.icon-btn .label{display:block;line-height:1.1;text-decoration:none;border-bottom:none}

/* Contact page large action icons */
.contact-actions{display:flex;gap:24px;justify-content:flex-start;align-items:center;width:100%;flex-wrap:wrap}
.contact-actions .action{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:18px;border-radius:12px;flex:0 0 auto;justify-content:center;min-width:160px;min-height:120px;background:var(--card);box-shadow:0 8px 24px rgba(2,6,23,0.04);border:1px solid rgba(2,6,23,0.04)}
.contact-actions .action img{width:48px;height:48px;object-fit:contain;margin:0}
.contact-actions .action .label{margin:0}
.contact-actions .action .label .btn{min-width:0}
@media (max-width:640px){
  .contact-actions{flex-direction:row;flex-wrap:wrap}
  .contact-actions .action{flex-direction:column;align-items:center;padding:12px;min-width:140px}
  .contact-actions .action img{width:56px;height:56px;margin:0 0 8px 0}
  .contact-actions .action .label{min-width:0;margin:0}
}
@media (min-width:641px){
  .contact-actions{flex-direction:row}
  .contact-actions .action{flex-direction:row}
}
/* gap is fixed at 80px everywhere per user request */
.contact-hero{ text-align:left }
.contact-hero .contact-actions{ padding-left:0 }
.icon-btn .label{display:block}
.btn.small{padding:6px 10px;border-radius:8px;font-size:13px}
.card{background:var(--card);border-radius:var(--rounded);box-shadow:0 8px 24px rgba(2,6,23,0.06);padding:16px;margin:12px 0}
.flex{display:flex;gap:12px}
.col{background:transparent;flex:1;padding:8px}
.shift-column{min-height:240px;border:1px dashed rgba(15,23,42,0.08);padding:8px;border-radius:8px}
.employee{background:linear-gradient(90deg,rgba(6,182,212,0.08),rgba(37,99,235,0.06));padding:8px;border-radius:8px;margin:6px 0;cursor:grab}
.search{padding:8px;border-radius:8px;border:1px solid #e6eef8;width:100%;max-width:360px}
.filters{display:flex;gap:8px;align-items:center}
.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;text-align:left;border-bottom:1px solid rgba(2,6,23,0.04)}
.small{font-size:13px}

/* responsive */
@media (max-width:900px){.flex{flex-direction:column}}

/* Login page styles */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,rgba(6,182,212,0.06),rgba(37,99,235,0.08));background-attachment:fixed;background-size:cover;position:relative;overflow:hidden}
.login-page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url('gbb-logo.jpg');background-repeat:no-repeat;background-position:center center;background-size:140% auto;opacity:0.12;filter:saturate(0.9);}
.login-wrapper{display:flex;align-items:center;justify-content:center;width:100%;z-index:3}
.login-card{width:420px;max-width:92vw;padding:34px 28px 28px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.82));box-shadow:0 20px 50px rgba(2,6,23,0.12);border:1px solid rgba(2,6,23,0.04);position:relative;padding-top:72px}
.login-card{overflow:visible}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
/* Decorative logo shown as a pseudo-element so it never gets clipped */
/* Decorative logo shown previously as pseudo-element — hide it now in favor of a larger inline badge */
.login-card::before{display:none !important}
/* make sure login card is above the page watermark */
.login-card{z-index:4}

/* Brand badge inside card */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px;text-align:center}
.brand-badge img{width:160px;height:160px;object-fit:contain;border-radius:18px;padding:12px;background:white;box-shadow:0 24px 50px rgba(2,6,23,0.12);border:1px solid rgba(2,6,23,0.06);display:block}
.login-title{margin:0;font-size:20px;font-weight:700;color:#0f172a}

/* Responsive: avoid logo being clipped on short viewports (mobile/small screens) */
@media (max-height:640px){
  .login-wrapper{align-items:flex-start;padding-top:40px}
  .login-card{padding-top:28px}
  .login-card::before{display:none !important}
  .brand-badge img{width:110px;height:110px;padding:8px}
}

/* Responsive adjustments for watermark on smaller viewports */
@media (max-width:900px){
  .login-page::after{background-size:220% auto;background-position:center top;opacity:0.10}
  .login-card{padding-top:44px}
  .brand-badge img{width:120px;height:120px}
}

/* Ensure any field-hints are hidden on the standalone login card */
.login-card .field-hint{display:none !important}
.brand h2{margin:0;font-size:18px}
.login-sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.form-field{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.form-field label{display:block;font-size:13px;color:var(--muted);min-width:86px}
.form-field .control{flex:1;position:relative}
.form-field input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(15,23,42,0.08);background:rgba(255,255,255,0.92);outline:none;transition:box-shadow .18s cubic-bezier(.2,.9,.2,1), border-color .15s ease}
.form-field input:focus{box-shadow:0 12px 30px rgba(37,99,235,0.08);border-color:var(--accent)}
.input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.toggle-password{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px}
.login-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:12px 20px;border-radius:12px;border:none;cursor:pointer;font-weight:700;box-shadow:0 12px 30px rgba(37,99,235,0.14);transition:transform .12s ease, box-shadow .12s ease}
.cta:active{transform:translateY(1px)}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,99,235,0.18)}
.muted-link{color:var(--muted);text-decoration:none;font-size:13px}
.error-box{background:rgba(239,68,68,0.06);color:var(--danger);padding:10px;border-radius:8px;margin-bottom:12px;border:1px solid rgba(239,68,68,0.08)}

/* Animations */
.login-card{opacity:0;transform:translateY(12px) scale(.995);transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease, opacity .2s ease}
.login-card.animate-in{opacity:1;transform:translateY(0) scale(1);}
.login-card:hover{box-shadow:0 20px 40px rgba(2,6,23,0.12);transform:translateY(-4px) scale(1.002)}

@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.logo{animation:floaty 6s ease-in-out infinite}

.cta{transition:transform .12s ease, box-shadow .12s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,99,235,0.16)}

/* Actions/buttons */
.actions{display:flex;gap:8px}
.btn-action{padding:6px 8px;border-radius:8px;border:1px solid rgba(2,6,23,0.06);background:var(--card);cursor:pointer;text-decoration:none;color:var(--muted);font-weight:600}
.btn-action.view{color:var(--accent)}
.btn-action.edit{color:#0b1220;border-color:rgba(37,99,235,0.08)}
.btn-action.delete{color:var(--danger);border-color:rgba(239,68,68,0.08)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;z-index:1200}
.modal{background:rgba(255,255,255,0.98);padding:22px;border-radius:12px;max-width:760px;width:96%;box-shadow:0 30px 70px rgba(2,6,23,0.45);border:1px solid rgba(2,6,23,0.06)}
.modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal .modal-body{max-height:60vh;overflow:auto}
.modal .close{background:transparent;border:none;font-size:18px;cursor:pointer}

/* toast */
#toast-container{position:fixed;right:18px;bottom:18px;z-index:1400}
.toast{background:rgba(0,0,0,0.8);color:white;padding:10px 14px;border-radius:8px;margin-top:8px;min-width:200px}

/* Dashboard split layout */
.dashboard-split{display:flex;gap:24px;align-items:stretch;min-height:60vh}
.dashboard-split .intro{flex:1;padding:34px;border-radius:12px;background:linear-gradient(90deg,rgba(37,99,235,0.06),rgba(6,182,212,0.02));box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.dashboard-split .intro h2{margin-top:0}
.dashboard-split .intro p{font-size:15px;color:var(--muted);line-height:1.5}
.dashboard-split .clock-panel{flex:1;display:flex;align-items:center;justify-content:center}
.clock-card{background:var(--card);padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.06);text-align:center}
.clock-card .time{font-size:40px;font-weight:700}
.clock-card .date{color:var(--muted);margin-top:8px}

@media (max-width:900px){.dashboard-split{flex-direction:column}}

/* Header / Footer styling */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border-bottom:1px solid rgba(255,255,255,0.06)}
.site-left{display:flex;align-items:center;gap:12px}
.site-title{font-weight:700;font-size:18px}
.brand-link{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-link:hover .site-title{text-decoration:underline}
.header-logo{width:56px;height:56px;border-radius:8px;object-fit:contain;border:none;background:#ffffff;padding:6px;box-shadow:0 8px 24px rgba(2,6,23,0.12);display:block}
.site-center{flex:1;text-align:center}
.site-nav{display:inline-flex;gap:12px;align-items:center;white-space:nowrap;flex-wrap:nowrap;overflow:visible}
.site-header{position:relative;z-index:2000}
.site-nav a, .site-nav .nav-trigger{display:inline-flex;align-items:center}
.site-nav a{color:rgba(255,255,255,0.92);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600}
.site-nav a:hover{background:rgba(255,255,255,0.06)}
.site-nav a.active{background:rgba(255,255,255,0.12);box-shadow:inset 0 -2px 0 rgba(255,255,255,0.06)}
.mobile-toggle{display:none;background:transparent;border:none;color:white;font-size:18px;padding:6px 8px;border-radius:8px}
.theme-picker{display:flex;gap:6px;align-items:center;margin-right:8px}
.theme-btn{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);background:transparent;cursor:pointer}
.theme-btn[data-theme="default"]{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.theme-btn[data-theme="warm"]{background:linear-gradient(135deg,#ff7a18,#ff3b7a)}
.theme-btn[data-theme="green"]{background:linear-gradient(135deg,#10b981,#06b6d4)}

/* Dashboard background image wrapper */
/* dashboard background removed */


/* mobile nav panel */
.mobile-nav-panel{display:none;position:absolute;left:0;right:0;top:64px;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.mobile-nav-panel a{display:block;color:white;padding:10px;border-radius:6px;text-decoration:none}
.mobile-nav-panel a + a{margin-top:6px}
.site-right{display:flex;align-items:center;gap:12px}
.user-info{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;font-weight:700}
.user-meta{display:flex;flex-direction:column;text-align:right}
.logout{color:rgba(255,255,255,0.95);background:transparent;border:1px solid rgba(255,255,255,0.12);padding:6px 10px;border-radius:8px;text-decoration:none;margin-left:8px}
.logout:hover{background:rgba(255,255,255,0.06)}

.site-footer{background:linear-gradient(180deg,rgba(15,23,42,0.03),rgba(2,6,23,0.02));padding:12px 0;margin-top:24px;border-top:1px solid rgba(2,6,23,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

@media (max-width:900px){
  .site-center{display:none}
  .mobile-toggle{display:inline-block}
  .mobile-nav-panel{display:none}
  .site-nav{display:flex;flex-direction:column}
  .footer-inner{flex-direction:column;gap:6px}
}

@media (max-width:520px){
  .header-logo{width:36px;height:36px}
  .site-title{font-size:16px}
}

/* hide the textual site title in the header (keeps DOM for a11y but hidden visually) */
.site-left .site-title{display:none}

/* User dropdown */
.user-menu{position:relative}
.user-trigger{background:transparent;border:none;padding:0;cursor:pointer}
.user-trigger .avatar{pointer-events:none}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:#ffffff !important;color:#0f172a;min-width:240px;border-radius:12px;padding:0;border:1px solid rgba(2,6,23,0.08);box-shadow:0 18px 48px rgba(2,6,23,0.18);opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .18s ease, transform .18s ease, visibility .18s ease;z-index:1400}
.user-dropdown.show{opacity:1;transform:translateY(0);visibility:visible}
.user-dropdown a{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:0;color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(15,23,42,0.06);background:transparent}
.user-dropdown a:last-of-type{border-bottom:none}
.user-dropdown a:hover{background:rgba(2,6,23,0.03);color:inherit}
.user-dropdown .user-meta{padding:12px 12px 10px 12px;border-bottom:1px solid rgba(2,6,23,0.06);margin-bottom:6px;text-align:left}
.user-dropdown .user-name{font-weight:700;margin-bottom:4px}
.user-dropdown a::before{content:none}
.user-dropdown a .menu-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin:0 12px 0 8px;flex:0 0 28px;font-size:14px;line-height:1;} 

.user-dropdown a .menu-icon img{width:18px;height:18px;display:block}

/* ensure the menu item label text always starts aligned after the fixed icon column */
.user-dropdown a > *:not(.menu-icon){text-align:left}

/* label element stretches and always left-aligns so all labels start on same x */
.user-dropdown .menu-label{flex:1;display:block;text-align:left}

/* comfortable left padding so menu content starts near left edge */
.user-dropdown a{padding-left:8px}

/* Ensure header only shows the avatar (hide any leftover user-meta in header) */
.site-right .user-info > .user-meta{display:none}

/* keep avatar size consistent inside trigger */
.user-trigger .avatar{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(255,255,255,0.12);color:white}

/* Resizable table support: add a small drag handle on headers to resize columns */
.resizable-table{table-layout:fixed}
.resizable-table th{position:relative}
.resizable-table th, .resizable-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Left sidebar (popup) styles */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:4000;display:none}
.left-sidebar{position:fixed;left:0;top:0;bottom:0;width:320px;background:#ffffff !important;color:#0f172a;z-index:4100;box-shadow:2px 0 32px rgba(2,6,23,0.14);transform:translateX(-100%);transition:transform .22s ease;overflow:auto;padding:0}
.left-sidebar.open{transform:translateX(0)}
.left-sidebar .close-btn{position:absolute;right:12px;top:12px;background:transparent;border:none;font-size:18px;cursor:pointer}
.left-sidebar .side-nav{display:flex;flex-direction:column;gap:6px;padding-top:var(--sidebar-offset,18px)}
.left-sidebar .side-nav a{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:8px;color:#0f172a;text-decoration:none;font-weight:600}
.left-sidebar .side-nav a.active{background:rgba(0,0,0,0.04);color:inherit}
.left-sidebar .side-nav a:hover{background:rgba(0,0,0,0.03)}

/* ensure toggle is visible in header area (light text) */
#sidebar-toggle{color:rgba(255,255,255,0.9);background:transparent;border:none;font-size:16px;padding:6px 8px;border-radius:8px;cursor:pointer}

@media (min-width:900px){
  /* On wide screens, keep header nav visible but allow sidebar toggle to still open popup */
  .mobile-toggle{display:inline-block}
}

/* Hide the horizontal top navigation — use the left vertical sidebar instead */
.site-center .site-nav{display:none !important}

/* Horizontal scroll wrapper for wide tables (Asset register) */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table { display: inline-table; }
.resizable-table th .resizer{position:absolute;right:0;top:0;width:10px;height:100%;cursor:col-resize;user-select:none;z-index:2}
.resizable-table th .resizer:after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:12px;width:2px;height:calc(100% - 24px);background:rgba(15,23,42,0.06);border-radius:2px}

/* ensure links inside erp tables don't show underline by default */
.erp-table a{ text-decoration:none }

/* Make cancel buttons in ERP tables appear as red (danger) */
.erp-table button.btn-action.delete,
.erp-table td form button.btn-action.delete,
.erp-table .btn-action.delete {
  background: var(--danger) !important;
  color: #000 !important;
  border-color: rgba(239,68,68,0.12) !important;
  font-weight: 700 !important;
}
.erp-table button.btn-action.delete:hover,
.erp-table button.btn-action.delete:focus,
.erp-table .btn-action.delete:hover,
.erp-table .btn-action.delete:focus {
  filter: brightness(0.95) !important;
}

/* caret */
.user-trigger{display:inline-flex;align-items:center;gap:8px}
.user-trigger .caret{font-size:12px;color:rgba(255,255,255,0.9);transition:transform .18s ease}

/* Users table visual enhancements: bolder grid lines and glossy header */
#user_list table, #view_users_table { border-collapse: collapse; width:100% }
/* stronger, more visible grid lines for users tables */
#user_list, #view_users_table { border-collapse:collapse !important }
#user_list table, #view_users_table, #user_list table th, #user_list table td, #view_users_table th, #view_users_table td {
  border: 3px solid rgba(15,23,42,0.18) !important;
}
#user_list table th, #user_list table td, #view_users_table th, #view_users_table td {
  padding: 12px 10px !important;
}

/* Glossy heading row (only the header) */
#user_list thead tr th, #view_users_table thead tr th {
  background: linear-gradient(180deg,#dfeeff,#bcd9ff) !important;
  color: #041426 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Keep body text regular weight; borders provide the bold lines */
#user_list tbody tr td, #view_users_table tbody tr td { font-weight:400 }

/* Generic ERP table style matching Contacts -> View Users */
.erp-table, .erp-table th, .erp-table td { border: 3px solid rgba(15,23,42,0.18); border-collapse: collapse; width:100% }
.erp-table th, .erp-table td { padding: 12px 10px }
.erp-table thead th { background: linear-gradient(180deg,#dfeeff,#bcd9ff); color: #041426; font-weight:700; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.erp-table tbody tr td { font-weight:400 }

/* make sure small tables inside cards still look good */
.card .erp-table { box-shadow: none; border-radius:8px; overflow:hidden }

/* remove underlines for links inside ERP tables and ensure buttons inline */
.erp-table a { text-decoration: none; color: inherit }
.erp-table td a.btn { display: inline-block }

.user-trigger.open .caret{transform:rotate(180deg)}

/* menu item icons via unicode */
.user-dropdown a.menu-item::before{display:none}

/* destructive logout */
.user-dropdown a.logout-item{color:var(--danger);font-weight:600}
.user-dropdown a.logout-item:hover{background:rgba(239,68,68,0.06)}

/* ensure readable text inside dropdown for light/dark */
.user-dropdown{color:#0f172a}
body.dark .user-dropdown{color:#0f172a}

/* Leaves nav dropdown */
.nav-item.nav-dropdown{position:relative}
.nav-trigger{background:transparent;border:none;color:rgba(255,255,255,0.92);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
.nav-dropdown-menu{position:absolute;left:0;top:calc(100% + 8px);background:#0f172a;color:#fff;min-width:220px;border-radius:8px;padding:8px;box-shadow:0 12px 36px rgba(2,6,23,0.4);opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .18s ease, transform .18s ease, visibility .18s ease;z-index:1400}
.nav-dropdown-menu.show{opacity:1;transform:translateY(0);visibility:visible}
.nav-dropdown-menu a{display:block;padding:8px;border-radius:6px;color:#fff;text-decoration:none}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.06);color:#fff}
.nav-dropdown-menu hr{border:none;height:1px;background:rgba(255,255,255,0.06);margin:6px 0}

@media (max-width:900px){
  .nav-dropdown-menu{left:auto;right:0}
}

/* show dropdown on hover and style items as attractive buttons */
.nav-item.nav-dropdown:hover .nav-dropdown-menu,
.nav-item.nav-dropdown .nav-dropdown-menu.show{opacity:1;transform:translateY(0);visibility:visible}
.nav-dropdown-menu a.icon-btn{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:transparent;color:inherit;margin:6px 2px}
.nav-dropdown-menu a.icon-btn .icon{font-size:18px;display:inline-block;width:28px;text-align:center}
.nav-dropdown-menu a.icon-btn .label{font-weight:600;color:inherit}
.nav-dropdown-menu a.icon-btn:hover{background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));transform:translateY(-2px)}
.nav-item.nav-dropdown .nav-trigger{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:inherit;cursor:pointer;font-weight:600;font-family:inherit;font-size:inherit}

/* make dropdown lighter on light themes */
body:not(.dark) .nav-dropdown-menu{background:#ffffff;color:#0f172a;box-shadow:0 12px 36px rgba(2,6,23,0.08)}
body:not(.dark) .nav-dropdown-menu a.icon-btn:hover{background:linear-gradient(180deg, #f3f6ff, #eef4ff)}

/* Vertical stacked layout for contact action icons (left aligned) */
.contact-actions.vertical-left {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  justify-content:flex-start;
}
.contact-actions.vertical-left .action {
  display:flex;
  align-items:center;
  gap:12px;
}
.contact-actions.vertical-left .action .action-icon,
.contact-actions.vertical-left .action img.icon-img {
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  margin-right:8px;
}
.contact-actions.vertical-left .action .label {
  margin:0;
  text-transform:lowercase;
  font-weight:600;
  font-size:14px;
  color:var(--muted);
}
.contact-actions.vertical-left .action .label .btn {
  min-width:0;
  padding:6px 8px;
}

/* small badges for status */
.badge{display:inline-block;padding:6px 8px;border-radius:8px;font-size:13px}
.badge.approved{background:linear-gradient(90deg,#10b981,#06b6d4);color:white}
.badge.muted{background:#f3f4f6;color:#374151;border:1px solid rgba(2,6,23,0.04)}

/* Contact action buttons: larger, equal spacing */
.contact-actions{justify-content:space-between;gap:24px} 
.contact-actions .action{flex:1 1 0;margin:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid rgba(2,6,23,0.04);background:var(--card);box-shadow:0 4px 12px rgba(2,6,23,0.04)}
.contact-actions .action .label{width:100
/* Contact action buttons: larger, equal spacing */
.contact-actions{justify-content:space-between;gap:24px}
.contact-actions .action{flex:1 1 0;margin:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid rgba(2,6,23,0.04);background:var(--card);box-shadow:0 4px 12px rgba(2,6,23,0.04)}
.contact-actions .action .label{width:100%;text-align:center;margin-top:6px}
.contact-actions .action{transition:transform .18s ease, box-shadow .18s ease}
.contact-actions .action:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.08)}
.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}
@media (max-width:640px){.contact-actions{flex-direction:column;align-items:stretch}.contact-actions .action{max-width:none;margin:6px 0}}

/* Required field asterisk */
.required{color:var(--danger);margin-left:0;font-weight:700;font-size:0.95em}

/* Ensure create/edit user form inputs sit inside the white card and do not overflow */
#create_section{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.06);max-width:100%;overflow:hidden}
#create_section form{display:block;gap:8px}
#create_section form label{display:block;margin-bottom:8px;font-size:14px}
#create_section input[type="text"], #create_section input[type="password"], #create_section input[type="email"], #create_section select, #create_section textarea{width:100%;box-sizing:border-box;max-width:100%;padding:8px 10px;border:1px solid rgba(15,23,42,0.06);border-radius:8px}
#create_section button{display:inline-block;margin-top:8px}

/* visually mark admin-only fields when disabled */
.admin-only[disabled]{background:#f3f4f6;color:#6b7280}