.app{display:grid; grid-template-columns:var(--sidebar-width) 1fr; min-height:100vh}
.sidebar{width:280px; background:#fff; border-right:1px solid #e5e7eb; display:flex; flex-direction:column; height:100vh; position:sticky; top:0; transition:transform .3s ease, left .3s ease; overflow:hidden}

.sidebar.closed{width:80px; min-width:80px}
.sidebar.closed .sidebar-header{justify-content:center; padding:0 12px}
.sidebar.closed .logo{justify-content:center}
.sidebar.closed .logo img{display:none}
.sidebar.closed .logo span{display:none}
.sidebar.closed .nav,
.sidebar.closed .sidebar-bottom{display:none}
.sidebar.closed .sidebar-toggle{margin:0}

.app.sidebar-collapsed{grid-template-columns:80px 1fr}

.sidebar-header{height:80px; padding:0 20px; border-bottom:1px solid #eef2f7; display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:12px}
.logo img{max-height:56px; width:auto; max-width:160px; object-fit:contain}
.logo span{font-size:26px; font-weight:700; color:#111827}

.sidebar-toggle{border:none; background:none; font-size:22px; cursor:pointer; color:#374151; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; transition:background .2s ease, color .2s ease; position:relative; z-index:1001}
.sidebar-toggle:hover{background:#f3f4f6}

.mobile-sidebar-toggle{display:none}

.nav{flex:1; overflow-y:auto; padding:8px 0}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:#e2e8f0; border-radius:4px}
.nav details{margin-bottom:8px}
.nav summary{list-style:none; cursor:pointer; font-weight:600; color:#111827; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-radius:12px; margin:4px 8px;}
.nav summary:hover, .nav summary:focus{background:#f8fafc;}
.nav summary::-webkit-details-marker{display:none}
.menu-left{display:flex; align-items:center; gap:12px;}
.chevron{transition:transform .3s ease; color:#94a3b8;}
details[open] .chevron{transform:rotate(180deg);}
.nav-icon{font-size:16px;}
.nav-icon .fa-solid{color:#2563eb;}
.submenu{position:relative; margin-left:26px; padding-left:20px;}
.submenu::before{content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:#e2e8f0;}
.nav-link{display:block; padding:10px 12px 10px 10px; margin:4px 0; border-radius:8px; text-decoration:none; color:#475569; font-size:15px; position:relative;}
.nav-link:hover{background:#f8fafc;}
.nav-link.active{color:#2563eb; font-weight:600; background:transparent;}
.nav-link::before{content:""; position:absolute; left:-18px; top:50%; width:8px; height:8px; border-radius:50%; background:#cbd5e1; transform:translateY(-50%);}
.nav-link.active::before{background:#2563eb; left:-17px;}
.nav-link-icon{display:inline-flex; align-items:center; justify-content:center; width:22px; min-width:22px; color:inherit; margin-right:5px;}

.nav-top{display:flex; align-items:center; gap:12px; padding:14px 24px; text-decoration:none; color:#111827; font-weight:600; font-size:15px; border-left:3px solid transparent; transition:background .15s,border-color .15s,color .15s;}
.nav-top:hover{background:#f8fafc; border-left-color:#2563eb;}
.nav-top.active{background:#eff6ff; color:#2563eb; border-left-color:#2563eb;}

.sidebar-bottom{border-top:1px solid #eef2f7; padding:20px; flex-shrink:0}
.user-card{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.user-avatar{width:48px; height:48px; border-radius:50%; background:#e0edff; display:flex; align-items:center; justify-content:center; font-size:22px}
.user-name{font-weight:600; color:#111827}
.user-email{font-size:13px; color:#6b7280}
.logout-btn{display:flex; align-items:center; gap:10px; text-decoration:none; color:#6b7280; padding:12px 14px; border-radius:10px; transition:.2s}
.logout-btn:hover{background:#f3f4f6}

.main{display:flex; flex-direction:column; min-width:0; overflow-x:hidden}
.topbar{height:64px; background:var(--surface); border-bottom:1px solid var(--ring); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:0; box-shadow:0 2px 4px rgba(0,0,0,.04)}
.topbar-left{display:flex; align-items:center; gap:16px}
.topbar-right{display:flex; gap:12px}
.page-title{font-size:20px; font-weight:600; margin:0; color:var(--text)}
.content { max-width: 100%; width: 100%; margin: 0; padding: 24px; min-width: 0; }

.panel-body{padding:24px; display:flex; flex-direction:column; gap:24px;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.95rem;color:#334155;font-weight:600}
.help{font-size:.84rem;color:#6b7280;line-height:1.5}
.section-title{font-size:1rem;font-weight:700;color:#0f172a;margin-top:30px;margin-bottom:16px;padding-bottom:10px;display:flex;align-items:center;gap:10px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.toast{position:fixed;right:18px;bottom:18px;background:#0ea5e9;color:#fff;padding:12px 16px;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.18);opacity:0;transform:translateY(10px);transition:all .2s ease;z-index:9999}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:#ef4444}
.input-error{border-color:#ef4444!important;background:#fff5f5!important}
.checkbox-group{display:flex;align-items:center;gap:8px}

.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:18px;padding:28px 30px;max-width:420px;width:92%;box-shadow:0 24px 60px rgba(15,23,42,.2);text-align:center}
.modal-icon{font-size:2.4rem;margin-bottom:14px}
.modal-title{font-size:1.15rem;font-weight:700;color:#111827;margin-bottom:10px}
.modal-msg{font-size:.95rem;color:#475569;margin-bottom:24px;line-height:1.6}
.modal-btn{display:inline-flex;padding:12px 24px;border-radius:12px;background:#2563eb;color:#fff;font-weight:700;border:none;cursor:pointer;font-size:.95rem;transition:background .2s}
.modal-btn:hover{background:#1d4ed8}
#username-status{font-size:.84rem;margin-top:6px;min-height:20px}
#username-status.checking{color:#6b7280}
#username-status.taken{color:#ef4444;font-weight:600}
#username-status.available{color:#16a34a;font-weight:600}
.mandatory{color:#ef4444;font-weight:700}
textarea.input{min-height:90px;padding:12px 12px;resize:vertical}

@media (max-width: 900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:-320px; width:var(--sidebar-width); height:100vh; transition:left .3s ease; z-index:100}
  .sidebar.open{left:0}
  .topbar{position:sticky}
}
.pager .btn
{
  padding: 8px 20px!important;
  margin-right: 7px;
  margin-top: 7px;
}

/* ===== Shared admin panel & table styles ===== */
.panel{ border-radius:24px; border:1px solid rgba(148,163,184,.14); box-shadow:0 24px 60px rgba(15,23,42,.06); overflow:hidden; background:#fff; min-width:0 }
.panel-header{ background:#fff; padding:24px 24px 20px; gap:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between }
.panel-header h2{ margin:0; font-size:1.15rem; letter-spacing:-.02em; color:#0f172a }

.table-wrap{ overflow:auto; border-radius:24px; border:1px solid #e2e8f0; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); min-width:0; width:100% }
.table{ min-width:100%; border-collapse:separate; border-spacing:0 }
.table thead th{ position:sticky; top:0; z-index:1; background:#f8fafc; color:#475569; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid #e2e8f0 }
.table td, .table th{ white-space:nowrap; vertical-align:middle; padding:16px 18px }
.table tbody tr{ transition:background .18s ease, transform .18s ease }
.table tbody tr:hover{ background:#eff6ff; transform:translateY(-1px) }
.table tbody tr:nth-child(even){ background:#f8fbfc }
.table tbody tr:last-child td{ border-bottom:none }

.table-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px }
.table-actions .btn{ padding:8px 12px; border-radius:8px; font-size:13px; min-width:40px; background:#f8fafc; color:#0f172a; border:1px solid #e2e8f0 }
.table-actions .btn:hover{ background:#e2e8f0 }

.action-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0; width:40px; min-width:40px; height:40px; border-radius:8px; border:1px solid #e2e8f0; background:#f8fafc }
.action-btn i.fa{ margin:0; font-size:16px }
.action-btn:hover{ background:#eef2ff }
.action-machines{ border-color:#93c5fd; background:#eff6ff }
.action-machines i.fa{ color:#2563eb }
.action-edit{ border-color:#c7d2fe; background:#eef2ff }
.action-edit i.fa{ color:#4338ca }
.btn-danger{ background:#fee2e2; border-color:#fecaca; color:#b91c1c }
.btn-danger i.fa{ color:#b91c1c }

/* small responsive tweak: reduce table padding on narrow screens */
@media (max-width: 768px){ .table td, .table th { padding:12px } .panel-header{ padding:16px } }