/* Basic app styles approximating the provided UI */
:root{
  --sidebar-bg:#0f2030;
  --accent:#2563eb;
  --card-bg:#ffffff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:#f3f4f6;margin:0}
.app{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--sidebar-bg);color:#cbd5e1;padding:22px 14px}
.sidebar h1{color:#57a0ff;margin:6px 0 18px;font-size:20px}
.sidebar .nav a{display:block;color:inherit;padding:10px 8px;border-radius:6px;text-decoration:none;margin:6px 0}
.sidebar .nav a.active, .sidebar .nav a:hover{background:rgba(255,255,255,0.06);color:#fff}
.content{flex:1;padding:22px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-row{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--card-bg);padding:18px;border-radius:10px;box-shadow:0 1px 6px rgba(2,6,23,0.06);min-width:160px}
.big-card{flex:1;min-height:200px}
.login-wrap{display:flex;justify-content:center;align-items:center;height:100vh}
.login-card{width:420px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.08);overflow:hidden}
.login-header{background:var(--sidebar-bg);color:#fff;padding:28px;text-align:center}
.tabs{display:flex;background:#fff}
.tabs button{flex:1;padding:14px;border:0;background:transparent;font-weight:600}
.tabs button.active{border-bottom:3px solid var(--accent);color:var(--accent)}
.login-body{padding:18px}
input,select,textarea{padding:10px;border:1px solid #e5e7eb;border-radius:8px;width:100%}
button.btn{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn-small{padding:6px 8px;font-size:13px}
.btn-danger{background:#ef4444}
.btn-warning{background:#f59e0b}
.btn-muted{background:#e5e7eb;color:#111}
.action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;border:0}
.action-icon{width:14px;height:14px;display:inline-block;vertical-align:middle}

/* table checkbox column */
.table th.checkcol, .table td.checkcol{width:42px;text-align:center}
.bulk-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px}

/* button variants */
.btn-primary{background:#2563eb}
.btn-success{background:#10b981}

/* Toast notifications */
#toast-container{position:fixed;right:18px;top:18px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{min-width:220px;padding:10px 14px;border-radius:8px;color:#fff;box-shadow:0 6px 24px rgba(2,6,23,0.08);display:flex;align-items:center;gap:8px}
.toast.success{background:var(--btn-success,#10b981)}
.toast.error{background:#ef4444}
.toast.info{background:var(--accent)}
.toast .close{margin-left:auto;cursor:pointer;font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eef2f7}

@media(max-width:900px){.sidebar{display:none}.content{padding:12px}}

/* Responsive: collapse sidebar into top bar on small screens */
@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{position:fixed;left:0;top:0;right:0;height:56px;display:flex;align-items:center;padding:10px 14px}
  .sidebar h1{font-size:18px;margin:0}
  .content{margin-top:66px}
  .card-row{flex-direction:column}
  .card{width:100%}
  .table{font-size:14px}
}

@media (max-width:480px){
  .card{padding:12px}
  .topbar h2{font-size:18px}
  .bulk-controls select, .bulk-controls button{font-size:13px}
}

/* Responsive: login page tweaks */
@media (max-width:900px){
  .login-card{width:90%;max-width:420px;margin:0 auto;border-radius:10px}
  .login-header{padding:20px}
  .tabs button{padding:12px;font-size:15px}
  .login-body{padding:14px}
  .login-body input{padding:10px;border-radius:8px}
  .login-body .btn{width:100%;padding:12px;font-size:15px}
}

@media (max-width:480px){
  .login-card{width:94%;border-radius:8px}
  .login-header{padding:16px}
  .login-header h2{font-size:20px}
  .tabs{flex-direction:row}
  .tabs button{padding:10px;font-size:14px}
  .login-body{padding:12px}
  .login-body label{font-size:12px}
  .login-body input{padding:10px;font-size:14px}
  .login-body .btn{padding:12px;font-size:15px}
}

/* Ensure login wrap centers vertically on short viewports */
@media(max-height:600px){
  .login-wrap{align-items:flex-start;padding-top:20px}
  .login-card{margin-top:10px}
}

/* Folder / uploads UI */
.folder-grid{display:flex;flex-wrap:wrap;gap:14px}
.folder-card{background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:14px;width:220px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.folder-icon{font-size:34px;margin-bottom:8px}
.folder-meta{flex:1}
.folder-name{font-weight:600;margin-bottom:6px}
.folder-desc{font-size:13px;color:#64748b}
.folder-actions{margin-top:8px}

/* Make folder action buttons stack on small screens for easier tapping */
@media(max-width:640px){
  .folder-actions{display:flex;flex-direction:column;gap:8px;width:100%}
  .folder-actions .btn{width:100%;}
  #folder-search{display:none}
  body.filter-visible #folder-search{display:inline-block;width:60%;margin-right:8px}
}

@media (max-width:600px){
  .folder-card{width:48%;padding:10px}
}

/* Mobile / touch improvements: larger hit targets, clearer labels */
@media (max-width:640px){
  /* make primary controls easier to tap */
  button.btn, .action-btn, .icon-link{padding:12px 14px;font-size:15px;border-radius:10px}
  .icon-link{padding:10px 12px}

  /* make folder cards full-width on small phones for readability */
  .folder-card{width:100%;padding:12px}
  .folder-card .folder-name{font-size:16px}

  /* explicit assigned-to cell styling for JS updates */
  .assigned-to{font-weight:600;color:#0f172a}

  /* table -> card readability tweaks */
  .table tr{margin-bottom:12px;border-radius:10px;background:#fff;padding:12px;box-shadow:0 1px 6px rgba(2,6,23,0.04)}
  .table td[data-label]{font-size:14px}
  .table td{display:flex;flex-direction:column}
  .table td .icon-link{margin-top:6px}

  /* chevron for expandable rows (visual only) */
  .table tr:after{content:'\25BE';position:absolute;right:18px;top:22px;color:#9ca3af}

  /* bulk controls and small selects should be finger friendly */
  .bulk-controls .btn, .bulk-controls select, .btn{min-height:44px}

  /* hamburger padding for easier tap */
  .hamburger{padding:10px}
}

/* Sidebar overlay & mobile open state */
.sidebar{transition:transform .22s ease, width .2s ease, box-shadow .2s ease}
.sidebar.open{position:fixed;left:0;top:0;height:100vh;width:280px;z-index:1200;transform:translateX(0);box-shadow:2px 0 24px rgba(2,6,23,0.4);background:var(--sidebar-bg)}
body.has-sidebar-overlay::before{content:'';position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1100}
.sidebar .sidebar-close{position:absolute;right:12px;top:12px;background:transparent;border:0;color:#fff;font-size:20px;padding:8px;cursor:pointer;border-radius:6px}
.sidebar .sidebar-close:focus{outline:2px solid rgba(255,255,255,0.12)}

.list th, .list td{padding:8px 10px}
.assign-selected-btn, .assign-batch-btn{margin-left:8px}

/* Icon links for call / whatsapp */
.icon-link{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;text-decoration:none;color:inherit;border:1px solid transparent}
.icon-link.call{background:#e6f4ff;color:#0366d6;border-color:rgba(3,102,214,0.12)}
.icon-link.wa{background:#e6ffe9;color:#139a34;border-color:rgba(19,154,52,0.08)}
.icon-link svg{width:18px;height:18px;flex:0 0 18px}

/* Responsive table -> card view on very small screens */
.table-responsive{width:100%;overflow:auto}
@media(max-width:640px){
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block;width:100%}
  .table tr{margin-bottom:12px;border-radius:8px;background:#fff;padding:10px;box-shadow:0 1px 6px rgba(2,6,23,0.04)}
  .table td{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:0}
  .table td:before{content:attr(data-label);font-weight:600;color:#475569}
}

/* Hamburger / mobile toggle */
.hamburger{background:transparent;border:0;color:var(--muted);font-size:20px;padding:8px;border-radius:6px;cursor:pointer}
@media(max-width:900px){
  .hamburger{display:inline-block}
}
@media(min-width:901px){
  .hamburger{display:none}
}

@media(max-width:900px){
  .sidebar{height:56px;padding:10px 14px;display:flex;align-items:center}
  .sidebar .nav{display:none}
  .sidebar.open .nav{display:block}
}

/* =============================
   Mobile-first Responsive System
   ============================= */
:root{
  --bg:#0f172a;
  --surface:#111827;
  --surface-2:#0b1220;
  --text:#e5e7eb;
  --muted-2:#94a3b8;
  --primary:#6366f1;
  --primary-600:#5457e6;
  --accent:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#0ea5e9;
  --whatsapp:#25D366;
  --border:#1f2937;
  --shadow:0 2px 8px rgba(0,0,0,0.25);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --gap-1:.25rem;
  --gap-2:.5rem;
  --gap-3:.75rem;
  --gap-4:1rem;
  --gap-5:1.25rem;
  --gap-6:1.5rem;
  --gap-8:2rem;
  --header-h:56px;
  --touch:44px;
}

/***** Utilities *****/
.container { width:100%; padding-inline:1rem; margin-inline:auto; }
.max-w-sm { max-width:640px; margin-inline:auto; }
.max-w-md { max-width:768px; margin-inline:auto; }
.max-w-lg { max-width:1024px; margin-inline:auto; }

.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none!important}
.block{display:block}

.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-col{flex-direction:column}
.gap-2{gap:var(--gap-2)}
.gap-3{gap:var(--gap-3)}
.gap-4{gap:var(--gap-4)}
.gap-6{gap:var(--gap-6)}

.p-2{padding:var(--gap-2)}
.p-3{padding:var(--gap-3)}
.p-4{padding:var(--gap-4)}
.p-6{padding:var(--gap-6)}
.px-3{padding-inline:var(--gap-3)}
.px-4{padding-inline:var(--gap-4)}
.py-2{padding-block:var(--gap-2)}
.py-3{padding-block:var(--gap-3)}
.py-4{padding-block:var(--gap-4)}
.mt-2{margin-top:var(--gap-2)}
.mt-3{margin-top:var(--gap-3)}
.mt-4{margin-top:var(--gap-4)}
.mb-2{margin-bottom:var(--gap-2)}
.mb-3{margin-bottom:var(--gap-3)}
.mb-4{margin-bottom:var(--gap-4)}

.text-muted{color:var(--muted-2)}
.text-sm{font-size:.9rem}
.text-xs{font-size:.8rem}
.text-center{text-align:center}

.rounded{border-radius:var(--radius)}
.rounded-sm{border-radius:var(--radius-sm)}
.rounded-full{border-radius:999px}

.border{border:1px solid var(--border)}
.shadow{box-shadow:var(--shadow)}

.w-100{width:100%}
.h-100{height:100%}

/***** Header (optional enhanced) *****/
.header{position:sticky;top:0;height:var(--header-h);background:linear-gradient(180deg,#0b1220 0%,#0c1423 100%);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 .75rem;z-index:50;backdrop-filter:blur(6px)}
.header .title{font-weight:600;letter-spacing:.2px}
.header .spacer{flex:1}

/***** Bottom nav (optional) *****/
.bottom-nav{position:sticky;bottom:0;background:#0b1220;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:.25rem;z-index:45}
.bottom-nav .icon-btn{flex:1;justify-content:center}

/***** Icon buttons *****/
.icon{width:20px;height:20px;display:inline-block}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:var(--touch);min-width:var(--touch);padding:0 .75rem;border-radius:.75rem;border:1px solid var(--border);background:#0e1627;color:#fff;text-decoration:none}
.icon-btn.primary{background:var(--primary);border-color:transparent}
.icon-btn.accent{background:var(--accent);border-color:transparent;color:#052e12}
.icon-btn.whatsapp{background:var(--whatsapp);color:#052e12;border-color:transparent}
.icon-btn.danger{background:var(--danger);border-color:transparent}
.icon-btn.ghost{background:transparent}
.icon-btn:active{transform:translateY(1px)}

/***** Cards *****/
.card2{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;box-shadow:var(--shadow)}
.card-title{font-weight:600;margin-bottom:.25rem}
.card-sub{color:var(--muted-2);font-size:.85rem}

/***** Stat grid *****/
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/***** Forms *****/
.form{display:grid;gap:.75rem}
.input, select, textarea{width:100%;padding:.7rem .8rem;background:#0b1323;border:1px solid var(--border);color:#e5e7eb;border-radius:.6rem}
.input[readonly], .input:disabled{opacity:.7}
.label{font-size:.85rem;color:var(--muted-2);margin-bottom:.25rem;display:block}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;border-radius:.7rem;border:1px solid var(--border);background:#0e1627;color:#fff;text-decoration:none;cursor:pointer}
.btn2.primary{background:var(--primary);border-color:transparent}
.btn2.success{background:var(--accent);border-color:transparent;color:#052e12}
.btn2.warning{background:var(--warning);border-color:transparent;color:#3b2c02}
.btn2.danger{background:var(--danger);border-color:transparent}
.btn2.block{width:100%}

/***** Collapsible *****/
.collapse{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#0b1323}
.collapse-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;cursor:pointer}
.collapse-body{display:none;padding:.75rem;border-top:1px solid var(--border)}
.collapse.open .collapse-body{display:block}

/***** Tabs (new, to avoid clash with existing .tabs) *****/
.tabs-nav{display:flex;gap:.5rem;border-bottom:1px solid var(--border)}
.tab-link{padding:.6rem .9rem;cursor:pointer;color:var(--muted-2);border-bottom:2px solid transparent}
.tab-link.active{color:#fff;border-bottom-color:var(--primary)}
.tab-panel{display:none;padding:.75rem 0}
.tab-panel.active{display:block}

/***** Lists and lead cards *****/
.list{display:grid;gap:.75rem}
.lead-card{display:grid;gap:.35rem;padding:.9rem;border:1px solid var(--border);border-radius:var(--radius);background:#0b1323}
.lead-card .actions{display:flex;gap:.5rem;margin-top:.5rem}

/***** Sticky helpers *****/
.sticky-top{position:sticky;top:0;z-index:40}
.sticky-bottom{position:sticky;bottom:0;z-index:40}

/***** Work/Leave toggle *****/
.work-toggle{position:sticky;top:calc(var(--header-h) + .5rem);z-index:45;display:flex;gap:.5rem}
.work-toggle .state{flex:1;padding:.5rem;border-radius:999px;text-align:center;font-weight:600}
.work-toggle .working{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.4);color:#b8f7cc}
.work-toggle .leave{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.4);color:#ffd1d1}

/***** Search and filters *****/
.search-bar{display:flex;gap:.5rem;align-items:center}
.search-bar .input{flex:1}
.filters{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}
@media(min-width:768px){.filters{grid-template-columns:repeat(4,1fr)}}

/***** Section helpers *****/
.section{padding:.75rem}
.section-title{font-weight:600;margin-bottom:.5rem}

/***** Progressive enhancements *****/
@media(min-width:768px){
  .container{padding-inline:1.25rem}
  .form.two-col{grid-template-columns:1fr 1fr;gap:1rem}
}

/* =============================
   Mobile overrides (safer small patch)
   Improves sidebar open/close behavior, touch targets, and card spacing
   ============================= */
@media (max-width:900px){
  /* keep a compact top bar when closed */
  .sidebar{width:56px;padding:8px 10px}
  .sidebar h1{display:none}
  .sidebar .nav{display:none}

  /* when open, show full overlay panel */
  .sidebar.open{width:280px;transform:none;left:0;top:0}
  .sidebar.open .nav{display:block;padding-top:56px}
  .sidebar .nav a{padding:12px 16px;border-radius:8px}
  .sidebar .nav a.active{background:linear-gradient(90deg,var(--accent),#4f46e5);color:#fff}

  .content{padding:14px}
  .card{padding:14px}
  .card-row{gap:10px}
  .hamburger{font-size:22px;padding:10px}
  body.has-sidebar-overlay::before{background:rgba(0,0,0,0.5)}
}

/* Callback modal flash animation */
.cb-flash{animation:cb-pulse 1.2s infinite}
@keyframes cb-pulse{0%{box-shadow:0 8px 24px rgba(0,0,0,0.15)}50%{box-shadow:0 12px 34px rgba(0,0,0,0.28)}100%{box-shadow:0 8px 24px rgba(0,0,0,0.15)}}

@media (max-width:640px){
  /* larger tap targets for primary actions */
  .btn, button.btn, .icon-btn{min-height:48px;padding:12px 14px}
  .folder-card{padding:12px;width:100%}
  .table td{font-size:14px}
  .table tr:after{right:12px}
  .toast{min-width:240px}
}

/* Additional mobile refinements (ARIA/overlay, transforms, toasts, tables) */
@media (max-width:900px){
  /* ensure closed sidebar is hidden off-screen and opens with transform */
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;will-change:transform}
  .sidebar.open{transform:translateX(0);position:fixed;left:0;top:0;height:100vh;width:280px;z-index:1202;background:var(--sidebar-bg)}
  /* overlay should appear under sidebar */
  body.has-sidebar-overlay::before{content:'';position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1200}
  /* make hamburger more visible on mobile (black icon on light backgrounds) */
  .hamburger{color:#000;background:transparent;font-weight:600}
  .hamburger:focus{outline:3px solid rgba(37,99,235,0.12);outline-offset:2px}
  /* increase nav tap area */
  .sidebar .nav a{padding:12px 16px;border-radius:8px}
}

/* Ensure hamburger in topbar is left-aligned, clickable and above other elements */
.topbar > div{display:flex;align-items:center}
.topbar .hamburger{cursor:pointer;z-index:1305;position:relative;background:transparent;border:0;color:#000;font-size:20px;padding:6px;border-radius:6px;pointer-events:auto}
.topbar .hamburger:focus{outline:3px solid rgba(37,99,235,0.12)}
.topbar h2{margin:0}

/* on wider screens keep hamburger hidden (desktop) but allow explicit instances to show if needed */
@media(min-width:901px){
  .topbar .hamburger{display:none}
}

/* Hide any hamburger placed inside the sidebar itself */
.sidebar .hamburger{display:none !important}

/* Hamburger icon visuals (three-bar) and open state */
.hamburger-box{display:inline-block;position:relative;width:28px;height:20px}
.hamburger-inner{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:2px;background:currentColor;border-radius:2px}
.hamburger-inner::before,.hamburger-inner::after{content:'';position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px}
.hamburger-inner::before{top:-7px}
.hamburger-inner::after{top:7px}

/* open/close animation */
.hamburger[aria-expanded="true"] .hamburger-inner{background:transparent}
.hamburger[aria-expanded="true"] .hamburger-inner::before{transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-inner::after{transform:translateY(-7px) rotate(-45deg)}
.hamburger-inner::before,.hamburger-inner::after{transition:transform .18s ease, opacity .18s ease}
.hamburger-inner{transition:background .18s ease}

/* Typography and spacing refinements for mobile/tablet */
@media (max-width:900px){
  body{font-size:15px}
  .topbar h2{font-size:18px;margin-left:8px}
  .sidebar .nav a{font-size:15px}
  .card .card-title, .card strong{font-size:15px}
  input, select, textarea{padding:10px;border-radius:8px}
  .content{padding:12px}
}

@media (max-width:480px){
  body{font-size:14px}
  .topbar h2{font-size:16px}
  .sidebar .nav a{font-size:14px;padding:10px 12px}
  .card{padding:10px}
}

@media (max-width:640px){
  /* Toasts: bottom aligned and full-width friendly */
  #toast-container{left:12px;right:12px;top:auto;bottom:18px;align-items:flex-end}
  .toast{width:calc(100% - 24px);max-width:640px;min-width:unset}

  /* responsive table container for horizontal scroll on small devices */
  .table-responsive{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  .table td{word-break:break-word}

  /* tighten card paddings and font sizes on very small screens */
  .card{padding:10px;font-size:14px}
  .card-row{gap:8px}
}

/* Prevent content overflow on small screens */
.app, .content, .card-row, .card, .table, .folder-grid {min-width:0}
.content{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
.card{min-width:0}
.topbar{gap:8px}
.topbar > div:first-child{flex:0 1 auto;min-width:0}
.topbar h2{white-space:normal;overflow:hidden;text-overflow:ellipsis}
.table td, .table th, .list td{word-break:break-word;overflow-wrap:break-word}
img, .folder-card img{max-width:100%;height:auto;display:block}
input, select, textarea{max-width:100%;box-sizing:border-box}

/* allow horizontal scroll for wide tables rather than causing layout break */
.table-responsive{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.table{max-width:100%;border-collapse:collapse}

/* Responsive typography: adjust font sizes for tablet and phone */
@media (max-width:900px){
  html, body { font-size:15px; }
  .topbar h2 { font-size:18px; }
  .card, .card * { font-size:15px; }
  .table td, .table th { font-size:14px; }
}

@media (max-width:640px){
  html, body { font-size:14px; }
  .topbar h2 { font-size:16px; }
  .card, .card * { font-size:14px; }
  .table td, .table th { font-size:13px; }
  .hamburger{font-size:22px}
}

@media (max-width:480px){
  html, body { font-size:13px; }
  .topbar h2 { font-size:15px; }
  .card, .card * { font-size:13px; }
  .table td, .table th { font-size:12px; }
}

/* Specific button/control adjustments for very small screens
   Keep buttons readable, allow wrapping and prevent overflow in tables/forms */
@media (max-width:640px){
  /* make buttons flexible and allow text wrap */
  .btn, button.btn, .action-btn, .btn-small, .icon-btn, .btn2{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:6px;
    padding:10px 12px; 
    font-size:14px; 
    min-width:0; 
    white-space:normal; 
    word-break:break-word; 
    overflow-wrap:break-word;
  }

  /* Bulk controls: stack and allow controls to be full-width */
  .bulk-bar, .bulk-controls{flex-direction:column;align-items:stretch}
  .bulk-bar select, .bulk-controls select, .bulk-bar .btn, .bulk-controls .btn{width:100%;margin:6px 0}

  /* Action buttons in table cells should wrap and not push layout */
  .table td .btn, .table td .action-btn{display:inline-flex;flex-wrap:wrap;min-width:0}

  /* Ensure select inputs don't overflow */
  select, input[type="date"], input[type="text"], input[type="search"], input[type="file"], textarea{font-size:14px;padding:10px;border-radius:8px}

  /* For assign page: controls in forms should stack and be full-width */
  form .form, form[style*="display:flex"], .assign-controls{flex-direction:column}
  .assign-controls .btn, .assign-controls select, .assign-controls input{width:100%;margin-top:8px}
}



/* ensure table -> card conversion remains usable and doesn't break JS selectors */
@media(max-width:640px){
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block;width:100%}
  .table tr{position:relative;margin-bottom:12px;border-radius:8px;background:#fff;padding:10px;box-shadow:0 1px 6px rgba(2,6,23,0.04)}
  .table td{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:0}
  .table td:before{content:attr(data-label);font-weight:600;color:#475569;display:block;margin-bottom:6px}
}