/* ─── CSS Variables (matched to clone.billhd.net) ─── */
:root {
  --surface: #ffffff;
  --surface-hover: rgb(243,243,243);
  --background: rgb(245,247,248);
  --text: rgb(17,24,39);
  --text-muted: rgb(109,110,110);
  --border: rgb(229,231,235);
  --border-subtle: rgb(245,247,248);
  --selected-bg: #f5f5f5;
  --selected-text: #2c2c2c;
  --control-bg: rgb(247,249,251);
  --input-border: rgb(229,231,235);
  --input-bg: rgb(245,247,248);
  --error-color: rgb(239,68,68);
}
.dark {
  --surface: rgb(21,21,21);
  --surface-hover: rgb(60,61,65);
  --background: rgb(11,11,11);
  --text: rgb(255,255,255);
  --text-muted: rgb(179,180,181);
  --border: rgb(26,26,26);
  --border-subtle: rgb(26,26,26);
  --selected-bg: rgba(240,240,240,0.18);
  --selected-text: #e5e5e5;
  --control-bg: rgb(38,38,38);
  --input-border: rgb(71,71,71);
  --input-bg: rgb(25,25,25);
  --error-color: rgb(248,113,113);
}

/* ─── Base ─── */
*,*::before,*::after{box-sizing:border-box}
body{background:var(--background);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh;margin:0}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ─── Floating Header ─── */
.app-header{position:fixed;top:10px;left:15px;width:calc(100% - 30px);z-index:19;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid var(--border-subtle);border-radius:1rem;height:64px;display:flex;align-items:center;padding:0 16px}

/* ─── Sidebar ─── */
.app-sidebar{position:fixed;left:14px;top:85px;bottom:15px;width:220px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:1rem;z-index:21;display:flex;flex-direction:column;overflow:hidden;transition:width 300ms ease-out,transform 300ms ease-out}
.app-sidebar.collapsed{width:60px}
@media(max-width:1023px){.app-sidebar{transform:translateX(-120%);z-index:22}.app-sidebar.mobile-open{transform:translateX(0)}}

/* Nav items container uses flex-col gap-2 (8px) */
.sidebar-nav{display:flex;flex-direction:column;gap:8px}

.sidebar-item{display:flex;align-items:center;padding:10px 11px;border-radius:6px;font-size:.875rem;color:var(--text-muted);text-decoration:none;transition:none;white-space:nowrap;overflow:hidden;cursor:pointer;border:none;background:var(--surface);width:100%;text-align:left;position:relative;gap:8px;font-weight:400}
.sidebar-item:hover{background:var(--surface-hover);color:var(--text)}
.sidebar-item.active{background:var(--selected-bg);color:var(--selected-text);font-weight:500}
.sidebar-item .item-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-item .item-label{transition:opacity 200ms,width 200ms;overflow:hidden}
.sidebar-item .item-chevron{flex-shrink:0;transition:transform 200ms;display:flex;align-items:center}
.app-sidebar.collapsed .item-label,.app-sidebar.collapsed .item-chevron{opacity:0;width:0;overflow:hidden}
.app-sidebar.collapsed .sidebar-item{justify-content:center;padding:10px}

.sidebar-submenu{margin-left:32px;border-left:1px solid var(--border);padding:8px 0;position:relative}
.sidebar-subitem{display:flex;align-items:center;padding:10px 11px;border-radius:0;font-size:.875rem;color:var(--text-muted);text-decoration:none;transition:none;white-space:nowrap;overflow:hidden;cursor:pointer;gap:8px;position:relative;font-weight:400}
.sidebar-subitem:hover{color:var(--text)}
.sidebar-subitem.active{color:var(--selected-text);font-weight:500}
.sidebar-subitem.active::before{content:'';position:absolute;left:-1px;top:10%;height:80%;width:1px;background:var(--selected-text)}
.subitem-dot{width:5px;height:5px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background 150ms}
.sidebar-subitem.active .subitem-dot{background:var(--selected-text)}
.app-sidebar.collapsed .sidebar-submenu{display:none}

.sidebar-section{padding:12px 4px 0;min-height:27px;font-size:10px;white-space:nowrap;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--surface);transition:opacity 200ms}
.app-sidebar.collapsed .sidebar-section{opacity:0;height:0;min-height:0;padding:0;overflow:hidden}

.sidebar-tooltip{position:absolute;left:64px;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:.8rem;color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 150ms;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.app-sidebar.collapsed .sidebar-item:hover .sidebar-tooltip{opacity:1}

/* ─── Main Content ─── */
.app-main{margin-top:88px;min-height:calc(100vh - 88px);transition:padding-left 300ms ease-out;padding:0 10px 20px}
@media(min-width:1024px){.app-main{padding-left:250px;padding-right:16px}.app-main.sidebar-collapsed{padding-left:90px}}
.app-main-inner{background:var(--background);border-radius:1rem;padding:24px;max-width:1920px;margin:0 auto;min-height:calc(100vh - 110px)}

.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;display:none}
.sidebar-backdrop.active{display:block}

/* ─── Hamburger ─── */
.hamburger-btn{width:32px;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:none;background:none;cursor:pointer;border-radius:6px;padding:4px;color:var(--text-muted);transition:background 150ms,color 150ms}
.hamburger-btn:hover{background:var(--surface-hover);color:var(--text)}
.hamburger-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}

/* ─── Theme Toggle ─── */
.theme-toggle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:var(--surface-hover);color:var(--text-muted);transition:background 150ms,color 150ms}
.theme-toggle:hover{background:var(--border);color:var(--text)}

/* ─── User Dropdown ─── */
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--selected-bg);color:var(--selected-text);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:10px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50;overflow:hidden}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:.875rem;color:var(--text);text-decoration:none;transition:background 150ms;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.dropdown-item:hover{background:var(--surface-hover)}
.dropdown-item.danger{color:rgb(239,68,68)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}

/* ─── Toast (top-center, left border indicators) ─── */
.toast-container{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;min-width:320px;max-width:480px}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:14px;padding:12px 16px;box-shadow:0 4px 24px rgba(0,0,0,.08);display:flex;align-items:center;gap:10px;pointer-events:auto;width:100%;animation:toast-in .3s ease-out}
.toast-success{border-left:4px solid rgb(34,197,94)}
.toast-error{border-left:4px solid rgb(239,68,68)}
.toast-warning{border-left:4px solid rgb(245,158,11)}
.toast-info{border-left:4px solid rgb(59,130,246)}
.toast-icon{flex-shrink:0;width:18px;height:18px}
.toast-icon.success{color:rgb(34,197,94)}
.toast-icon.error{color:rgb(239,68,68)}
.toast-icon.warning{color:rgb(245,158,11)}
.toast-icon.info{color:rgb(59,130,246)}
.toast-message{flex:1;color:var(--text);font-weight:500}
.toast-close{flex-shrink:0;color:var(--text-muted);cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center}
.toast-close:hover{color:var(--text)}
@keyframes toast-in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.toast-out{animation:toast-out .3s ease-in forwards}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}

/* ─── Form Controls ─── */
.form-input{width:100%;padding:.5rem .75rem;font-size:.875rem;background:var(--input-bg);border:1px solid var(--input-border);border-radius:.625rem;color:var(--text);transition:border-color .2s;outline:none}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:var(--selected-text)}
.form-label{display:block;font-size:.8125rem;color:var(--text);margin-bottom:.375rem;font-weight:500}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.625rem;cursor:pointer;transition:all .2s;border:none;text-decoration:none}
.btn-primary{background:var(--selected-text);color:var(--background)}
.btn-primary:hover{opacity:.85}
.btn-secondary{background:var(--control-bg);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface-hover)}
.btn-danger{background:rgb(239,68,68);color:white}
.btn-sm{padding:.375rem .75rem;font-size:.8125rem}
.btn-block{width:100%}

/* ─── Card ─── */
.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden}
.card-body{padding:1.25rem}

/* ─── Interface Grid Card ─── */
.interface-card{position:relative;display:flex;flex-direction:column;border-radius:.625rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;cursor:pointer;transition:all .2s}
.interface-card:hover{border-color:rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.interface-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.interface-card:hover img{transform:scale(1.05)}

/* ─── Skeleton ─── */
.skeleton{background:var(--surface-hover);animation:pulse 2s ease-in-out infinite;border-radius:.625rem}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ─── Stat Card ─── */
.stat-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;padding:1.25rem}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--text)}
.stat-label{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}

/* ─── Data Table ─── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:.75rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
.data-table td{padding:.75rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border);color:var(--text)}
.data-table tr:hover td{background:var(--surface-hover)}

/* ─── Badge ─── */
.badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;border-radius:9999px}
.badge-success{background:rgba(34,197,94,.15);color:rgb(74,222,128)}
.badge-danger{background:rgba(239,68,68,.15);color:rgb(248,113,113)}
.badge-warning{background:rgba(245,158,11,.15);color:rgb(250,204,21)}
.badge-info{background:rgba(59,130,246,.15);color:rgb(96,165,250)}

/* ─── Pagination ─── */
.pagination{display:flex;align-items:center;gap:.25rem}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.8125rem;border-radius:.625rem;text-decoration:none;color:var(--text-muted);transition:all .15s}
.pagination a:hover{background:var(--surface-hover);color:var(--text)}
.pagination .active{background:var(--selected-text);color:var(--background);font-weight:600}

/* ─── Responsive nav ─── */
@media(max-width:768px){.nav-desktop{display:none}.nav-mobile{display:block}}
@media(min-width:769px){.nav-desktop{display:flex}.nav-mobile{display:none}}

/* ─── Page Loader (HTMX) ─── */
.page-loader{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:transparent;pointer-events:none}
.page-loader.active{background:linear-gradient(90deg,transparent,var(--selected-text),transparent);background-size:200% 100%;animation:page-load .8s ease-in-out infinite}
@keyframes page-load{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── HTMX page transitions ─── */
#page-content{transition:opacity 150ms ease,transform 150ms ease}
.htmx-request #page-content{opacity:.5!important}