:root{
  --bg:#1c1c1c;
  --card:#262626;
  --text:#f3f4f6;
  --muted:#b3b3b3;
  --primary:#6366f1;
  --good:#22c55e;
  --bad:#ef4444;
  --border:#353535;
  --accent:#a855f7;
  --input-bg:#252525;
  --input-border:rgba(176,176,176,.28);
  --input-focus-ring:rgba(99,102,241,.25);
  --radius-lg:18px;
  --radius-md:14px;
  --control-min-height:48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.app{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
.app-shell{min-height:100vh;display:flex;flex-direction:column;padding-bottom:120px}
.app-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px 16px;background:#202020;border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:18px;letter-spacing:.02em;display:flex;flex-direction:column;line-height:1.2}
.brand-title{font-weight:inherit;font-size:inherit;letter-spacing:inherit}
.brand-sub{font-weight:500;font-size:12px;color:var(--muted);text-transform:none}
.header-user{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;background:#262626;border:1px solid rgba(255,255,255,.08)}
.header-avatar{width:34px;height:34px;border-radius:50%;background:rgba(99,102,241,.18);display:inline-flex;align-items:center;justify-content:center}
.header-avatar svg{width:22px;height:22px;fill:none;stroke:var(--primary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.header-username{font-weight:600;letter-spacing:.01em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{padding:16px 12px 32px;max-width:640px;margin:0 auto;width:100%;flex:1 0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 18px;margin-bottom:18px;box-shadow:0 10px 32px rgba(10,12,20,.4)}
.card>h2{margin:0 0 18px;font-size:20px;letter-spacing:.01em}
.card.narrow{max-width:400px;margin:24px auto}
.center{text-align:center}
.sticky{position:sticky;top:88px;z-index:9}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.actions .btn{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#303030;border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:var(--radius-md);cursor:pointer;font-size:15px;font-weight:600;letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:white}
.btn.danger{background:var(--bad);border-color:var(--bad);color:white}
.btn.small{padding:8px 12px;font-size:14px;box-shadow:none}
.btn.full{width:100%}
.badge{padding:4px 8px;border-radius:999px;font-size:12px}
.badge.good{background:rgba(34,197,94,.15);color:#6ee7b7}
.badge.bad{background:rgba(239,68,68,.15);color:#fca5a5}
.table{width:100%;border-collapse:collapse}
.table--aligned,.table--employees{table-layout:fixed}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14px}
.table--aligned th,.table--aligned td{text-align:center}
.table--aligned th:first-child,.table--aligned td:first-child{text-align:left}
.table thead th{color:#cbd5e1;text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-weight:600}
.table-responsive{overflow:auto;-webkit-overflow-scrolling:touch}
.table .entry-row{cursor:pointer;transition:background .2s ease}
.table .entry-row:hover{background:rgba(59,130,246,.08)}
.table .entry-row.is-active{background:rgba(59,130,246,.12)}
.table .entry-details{display:none}
.table .entry-details>td{padding:0;border-bottom:none}
.table .entry-details.is-open{display:table-row}
.entry-details-card{background:#2d2d2d;border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);transition:max-height .22s ease,opacity .18s ease,transform .18s ease}
.table .entry-details.is-open .entry-details-card{opacity:1;transform:translateY(0)}
.entry-details-row{display:flex;flex-wrap:wrap;gap:10px}
.entry-details-label{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-width:120px;font-weight:600}
.entry-details-value{font-weight:600;letter-spacing:.01em}
.home-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.home-summary-item{flex:1 1 180px;min-width:160px;padding:14px 16px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);display:flex;flex-direction:column;gap:6px}
.home-summary-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.home-summary-value{font-size:20px;font-weight:700;letter-spacing:.02em}
.table-actions{display:flex;gap:10px;align-items:center;justify-content:center}
.table-actions form{margin:0}
.employee-name{font-weight:600;letter-spacing:.01em}
.icon-btn--danger{color:var(--bad)}
.icon-btn--danger:hover{color:#f87171}
.icon-btn--danger:focus-visible{outline:2px solid rgba(239,68,68,.45);outline-offset:2px}
.icon-btn--success{color:var(--good)}
.icon-btn--success:hover{color:#86efac}
.icon-btn--success:focus-visible{outline:2px solid rgba(34,197,94,.45);outline-offset:2px}
.tile-type-list{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.tile-type-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:#2b2b2b}
.tile-type-item form{margin:0}
.tile-type-edit{display:flex;flex-direction:column;gap:12px}
.tile-type-name input{font-weight:600}
.tile-type-details{display:flex;flex-wrap:wrap;gap:12px}
.tile-type-details .select-wrapper,.tile-type-details .tile-type-rate,.tile-type-details .tile-type-worker-rate{flex:1 1 140px}
.tile-type-details .tile-type-rate .input-control,.tile-type-details .tile-type-worker-rate .input-control{height:100%}
.tile-type-actions{display:flex;align-items:center;gap:12px}
.tile-type-toggle{align-self:end;display:flex;align-items:center;justify-content:center}
.tile-type-empty{margin:0;padding:12px 0;text-align:center}
.export-actions{margin-top:18px;display:flex}
.export-actions .btn{width:100%}
.inline-form{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline-form .select-wrapper{flex:1 1 100%;min-width:0;max-width:100%}
.inline-form input,.inline-form select{flex:1 1 160px;min-width:80px}
.inline-form .btn{flex:0 0 auto}
.card-form{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.card-form .btn{align-self:stretch}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.form-field--checkbox{display:flex;align-items:flex-end}
.form-field--checkbox .form-label{display:flex;align-items:center;gap:10px;font-weight:500}
.form-layout{display:flex;flex-direction:column;gap:14px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.input-control{width:100%;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);font-size:15px;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .18s ease;min-height:var(--control-min-height)}
.input-control::placeholder{color:rgba(226,232,240,.5)}
.input-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring);outline:none;background:#2c2c2c;transform:translateY(-1px)}
.input-control--compact{padding:10px 12px;font-size:14px}
.select-field{position:relative}
.select-field::after{content:"";position:absolute;right:16px;top:50%;width:12px;height:12px;border-right:2px solid rgba(176,176,176,.6);border-bottom:2px solid rgba(176,176,176,.6);transform:translateY(-60%) rotate(45deg);pointer-events:none;transition:border-color .2s ease,opacity .2s ease}
.select-field:focus-within::after{border-color:var(--primary);opacity:1}
.select-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:46px}
.date-field{display:flex;flex-direction:column;gap:6px;align-self:flex-start}
.date-picker{position:relative;display:inline-flex;width:100%}
.date-picker-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.date-picker-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 16px;border-radius:var(--radius-md);border:1px solid rgba(176,176,176,.18);background:#252525;color:var(--text);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.4;min-height:var(--control-min-height);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .18s ease;pointer-events:none;z-index:0}
.date-picker:hover .date-picker-trigger{background:#2f2f2f;border-color:var(--primary)}
.date-picker:focus-within .date-picker-trigger{background:#2f2f2f;border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus-ring);transform:translateY(-1px)}
.date-picker-trigger svg{width:22px;height:22px;flex:0 0 auto;color:inherit;fill:currentColor;transition:color .2s ease}
.date-picker-display{flex:1 1 auto;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;letter-spacing:.04em;transition:color .2s ease}
.date-picker-trigger.is-empty .date-picker-display{color:var(--muted);font-weight:500}
.filters .date-field{max-width:220px}
.filters .date-picker{width:100%}
.filters .date-picker-trigger{width:100%}
.filters{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.filter-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.filter-actions .btn{width:100%}
.form label{display:block;margin-bottom:10px}
.form input,.form select{width:100%}
.flash{margin-bottom:12px}
.flash-item{padding:8px 12px;border-radius:8px;margin-bottom:6px;background:#2a2a2a}
.flash-item.success{background:rgba(34,197,94,.1)}
.flash-item.error{background:rgba(239,68,68,.1)}
.muted{color:var(--muted)}
.footer{padding:20px 16px 32px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:auto}
.footer .logout-btn{display:inline-block}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));background:rgba(26,26,26,.92);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.08);padding:10px 6px}
.tab-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 6px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;transition:color .2s ease,transform .2s ease}
.tab-link svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab-link.is-active{color:white;transform:translateY(-2px)}
.tab-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.tab-link.is-active svg{stroke:var(--primary)}
.tab-icon{display:inline-flex}
.account-card{display:flex;flex-direction:column;gap:20px}
.account-header{display:flex;align-items:center;gap:16px}
.account-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(99,102,241,.35),rgba(168,85,247,.4));display:flex;align-items:center;justify-content:center}
.account-avatar svg{width:48px;height:48px;fill:none;stroke:white;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.account-info{display:flex;flex-direction:column;gap:4px}
.account-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.account-name{font-size:20px;font-weight:700;letter-spacing:.01em}
.account-actions .btn{font-size:15px}
/* modal */
.modal{position:fixed;inset:0;display:none;z-index:100}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;max-width:520px;width:calc(100% - 32px);margin:6vh auto;padding:0;max-height:90vh;display:flex;flex-direction:column}
.modal-header,.modal-footer{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-header h3{margin:0}
.modal-footer{border-top:1px solid var(--border);border-bottom:none;display:flex;justify-content:flex-end;gap:8px}
.modal-body{padding:16px;overflow:auto;flex:1 1 auto}
.icon-btn{background:transparent;border:none;color:var(--text);font-size:22px;cursor:pointer}
.modal-form{display:flex;flex-direction:column;gap:16px}
.modal-form .field{display:flex;flex-direction:column;gap:8px}
.modal-form .field-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.modal-form input,.modal-form select,.modal-form textarea{background:#252525;border:1px solid rgba(176,176,176,.18);transition:border-color .2s ease,box-shadow .2s ease;border-radius:12px;padding:12px 14px;min-height:var(--control-min-height);color:var(--text);font-size:15px;line-height:1.45}
.modal-form textarea{resize:vertical;min-height:120px}
.modal-form textarea.single-line-textarea{min-height:var(--control-min-height)}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2);outline:none}
.modal-body hr{border:none;border-top:1px solid rgba(176,176,176,.12);margin:0}
.positions{display:flex;flex-direction:column;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.chip{padding:8px 12px;border-radius:12px;border:1px solid rgba(176,176,176,.24);background:#2a2a2a;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.chip.active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 8px 18px rgba(139,92,246,.35)}
.date-picker-display{min-width:120px}
.select-wrapper{position:relative}
.select-wrapper::after{content:"";position:absolute;right:14px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none;transition:border-color .2s ease}
.select-wrapper select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;padding-left:14px;padding-top:12px;padding-bottom:12px;min-height:var(--control-min-height)}
.select-wrapper:focus-within::after{border-color:var(--primary)}
.input-wrapper input{padding:12px 14px;min-height:var(--control-min-height)}
.pos-row .pos-area{color:var(--primary);font-weight:600;letter-spacing:.02em}
.pos-row{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.pos-row .pos-remove{justify-self:flex-end;align-self:center;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--bad);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,background .2s ease}
.pos-row .pos-remove:hover{background:rgba(239,68,68,.18);color:#f87171}
.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
@media (max-width:520px){
  .container{padding:18px 14px 38px}
  .app-header{padding:16px 14px}
  .header-user{padding:8px 10px}
  .tabbar{padding:8px 6px}
  .card{margin-left:0;margin-right:0;padding:18px 16px;border-radius:20px}
  .card>h2{font-size:19px;margin-bottom:16px}
  .btn{padding:12px 14px}
  .filters{gap:14px}
  .filter-actions{gap:10px}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form .btn{width:100%}
  .table th,.table td{padding:10px 6px;font-size:13px;white-space:nowrap}
  .home-summary{gap:10px;margin-bottom:14px}
  .home-summary-item{min-width:140px;padding:12px 14px}
  .home-summary-value{font-size:18px}
  .modal-card{width:calc(100% - 24px);margin:8vh auto}
  .tile-type-item{grid-template-columns:1fr}
  .tile-type-toggle{align-self:flex-start}
  .pos-row{grid-template-columns:1fr;gap:12px}
  .pos-row .select-wrapper,.pos-row .input-wrapper{width:100%}
  .pos-row .pos-remove{justify-self:flex-end}
}