:root{
    --bg:#0f1115; --panel:#141821; --muted:#9aa3b2; --fg:#e8ecf1; --accent:#8b3dff;
    --ok:#30d158; --warn:#ffb020; --danger:#ff4d4f; --line:#233043;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--fg); font:12px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial}
  a{color:var(--accent); text-decoration:none}
  header{background:#0d0f13; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1}
  .wrap{max-width:1400px; margin:0 auto; padding:16px}
  nav .btn{display:inline-block; padding:8px 12px; border-radius:10px; background:#1a1e27; margin-right:8px}
  nav .btn.active{background:var(--accent); color:white}
  .nav-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
  .nav-title-wrap{display:flex; flex-direction:column; align-items:center; gap:2px}
  .nav-title{font-weight:800; text-align:center; font-size:16px}
  .nav-version{font-size:8px; color:var(--muted)}
  .nav-right{display:flex; justify-content:flex-end}
  .row{display:flex; gap:16px; align-items:flex-start}
  .col{flex:1}
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px}
  .search-backdrop{
    position:fixed;
    inset:0;
    background:rgba(4,7,13,0.62);
    backdrop-filter:blur(4px);
    z-index:24;
  }
  .search-drawer{
    position:fixed;
    top:76px;
    right:16px;
    width:min(1160px, calc(100vw - 32px));
    max-height:calc(100vh - 92px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    z-index:25;
    transform:translateY(-8px) scale(0.985);
    opacity:0;
    pointer-events:none;
    transition:transform .16s ease, opacity .16s ease;
  }
  body.search-open .search-drawer{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }
  .search-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    padding:0 2px;
  }
  #rangePanel .pill > .search-drawer-head{width:100%}
  .search-drawer-title{font-weight:800; font-size:13px}
  .admin-drawer{
    position:fixed;
    top:76px;
    right:16px;
    width:min(760px, calc(100vw - 32px));
    max-height:calc(100vh - 92px);
    overflow:auto;
    z-index:35;
    transform:translateY(-8px) scale(0.985);
    opacity:0;
    pointer-events:none;
    transition:transform .16s ease, opacity .16s ease;
  }
  body.admin-open .admin-drawer{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }
  #adminBackdrop{ z-index:34; }
  .admin-head{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; column-gap:10px; margin-bottom:8px}
  .admin-head-actions{display:contents}
  .admin-title{font-weight:800; font-size:13px}
  #adminLogoutBtn{justify-self:start}
  #adminCloseBtn{justify-self:end}
  .admin-section-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:1px solid #263145;
    border-radius:999px;
    background:#1a1e27;
    color:var(--fg);
    font-weight:700;
    padding:6px 12px;
    margin-bottom:8px;
    cursor:pointer;
  }
  .admin-resource-body{display:flex; flex-direction:column; gap:0}
  .admin-resource-body.hidden{display:none}
  .admin-add{display:flex; gap:8px; align-items:center; margin-bottom:8px}
  .admin-add input{flex:1 1 auto}
  .admin-checkline{display:flex; align-items:center; gap:8px; color:var(--fg); padding:4px 2px 10px}
  .admin-merge{display:flex; gap:8px; align-items:center; margin-bottom:8px}
  .admin-merge select{flex:1 1 200px; min-width:140px}
  .admin-msg{min-height:18px; margin:2px 0 8px}
  .admin-error{color:#ff8f98}
  .admin-list-wrap{border:1px solid #263145; border-radius:10px; overflow:hidden}
  .admin-list-head, .admin-row{
    display:grid;
    grid-template-columns:minmax(220px,1fr) 110px 70px 140px;
    gap:8px;
    align-items:center;
    padding:8px;
  }
  .admin-list-head{background:#1a1e27; color:var(--muted); font-weight:700}
  .admin-row{border-top:1px solid #223146}
  .admin-name{width:100%}
  .admin-toggle{display:flex; align-items:center; gap:6px; color:var(--muted)}
  .admin-used{font-weight:700; text-align:center}
  .admin-actions{display:flex; gap:6px; justify-content:flex-end}
  h1{margin:8px 0 14px 0}
  .pill{display:inline-flex; align-items:center; gap:8px; background:#1a1e27; padding:8px 10px; border-radius:10px}
  #rangePanel .pill{flex-wrap:wrap; row-gap:8px; width:100%}
#rangePanel .range-group{
  display:flex;
  align-items:center;
  gap:8px;
}
#rangePanel .group-1{flex:0 0 auto}
#rangePanel .group-2{flex:0 0 auto}
#rangePanel .group-3{flex:1 1 420px; min-width:320px}
#rangePanel .range-actions{
  display:flex;
  gap:8px;
  margin-left:auto;
    flex-basis:100%;
    justify-content:flex-end;
  }
  #rangePanel .rangebar{
    position: sticky;
    top: 0;
    z-index: 2;
    background:#10141c;
    border:1px solid var(--line);
    border-radius:12px;
    padding:8px;
  }
  #rangePanel .rangebar .pill{
    width:100%;
    background: transparent;
    padding: 0;
  }
  .range-results-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    margin-top:8px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:8px;
  }
  input[type="date"]{background:#4d3b83; border:1px solid var(--line); color:var(--fg); padding:6px 8px; border-radius:8px}
  input[type="time"], input[type="text"], select, textarea{background:#4d3b83; border:1px solid var(--line); color:var(--fg); padding:6px 8px; border-radius:8px}
  textarea{width:100%; min-height:50px; resize:none; overflow: hidden;}
  table{width:100%; border-collapse:separate; border-spacing:0 8px}
  th{color:var(--muted); font-weight:600; text-align:left; padding:0 6px}
  td{vertical-align:top; padding:0 6px}
  .num{white-space:nowrap}
  .controls{display:flex; gap:8px; align-items:center}
  .iconbtn{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#4d3b83; cursor:pointer}
  .iconbtn.danger{border-color:#3b1c22; background:#20161a; color:#ff8f98}
  .iconbtn.ok{border-color:#173221; background:#132018; color:#45e084}
  .iconbtn.disabled{opacity:.45; pointer-events:none}
  .hidden{display:none}
  #rangeRes{color:var(--fg)}
  #rangeRes.placeholder{color:var(--muted)}
  #rangeRes option{color:var(--fg)}
  .sum{font-weight:900}
  .RecentDaysHead{font-weight:900}
  
  .grid{
  display:grid;
  grid-template-columns: 120px 110px 110px 140px 80px minmax(260px, 1fr) 70px 30px 30px; /* Date | Start | End | Resource | Invoice | Description | Dur | Save | X */
  gap:6px;
  align-items:start;
  margin-bottom:3px;
}

  .grid > div{min-height:6px; min-width:0}
  .mute{color:var(--muted)}
.stickybar{
  position: sticky;
  top: 56px;
  z-index: 2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  padding:8px;
  background:#10141c;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:8px;
}
  .hint{font-size:12px; color:var(--muted)}
  .badge{display:inline-block; padding:8px 8px; border-radius:999px; background:#8b3dff; border:1px solid var(--line)}
  button.badge{ border:none; cursor:pointer; }
  .month-pill{
    display:block;
    width:max-content;
    margin:8px auto 4px;
    padding:2px 8px;
    border-radius:999px;
    background:#8b3dff;
    border:1px solid var(--line);
    font-weight:700;
    line-height:1.2;
  }
  .month-head{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    margin:4px 0 6px;
  }
  .month-head-spacer{min-width:0}
  .month-total{
    justify-self:end;
    font-weight:700;
    color:var(--muted);
    white-space:nowrap;
    padding-right:6px;
  }
  .month-block{
    border:1px solid var(--line);
    border-radius:12px;
    padding:4px 8px 0;
    margin:8px 0;
  }

  .error{border-color:var(--danger) !important; box-shadow:0 0 0 2px #ff4d4f22}
  .range{margin-top:6px; border-bottom: 1px solid #263145;}
  .range .rowitem{padding:3px 12px; border-left:3px solid #263145;margin-left: 10px; margin-bottom:8px; background:#121722; border-radius:8px}
  .range .rowitem .inv{color:#df1d83}
  .descwrap{display:flex; flex-direction:column; gap:6px; width:100%; align-items:flex-start}
  .attachments{display:flex; flex-wrap:wrap; gap:6px}
  .att-item{display:inline-flex; align-items:center; gap:6px; padding:4px 6px; background:#1a1e27; border:1px solid #233043; border-radius:6px; font-size:11px}
  .att-link{background:none; border:none; color:var(--fg); cursor:pointer; padding:0; font-size:11px}
  .att-link:hover{text-decoration:underline}
  .att-del{background:#2a171c; border:1px solid #3b1c22; color:#ff8f98; border-radius:6px; padding:0 6px; cursor:pointer}
  .filepicker{display:none}
  .iconbtn.attach{border-color:#233043; background:#1a1e27; color:#cbd2dd}

  /* Modal confirm */
  .modal.hidden{display:none}
  .modal{
    position:fixed;
    inset:0;
    background:rgba(6,8,12,0.6);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:50;
  }
  #confirmOverlay{z-index:60}
  .modal-card{
    width:min(420px, 90vw);
    background:#121722;
    border:1px solid #263145;
    border-radius:14px;
    padding:16px;
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
  }
  .modal-title{font-weight:800; margin-bottom:6px}
  .modal-body{color:var(--muted); margin-bottom:14px}
  .modal-actions{display:flex; gap:8px; justify-content:flex-end}
  .btn.danger{background:#2a171c; border:1px solid #3b1c22; color:#ff8f98}
  .img-modal{width:min(920px, 92vw); max-height:88vh; display:flex; flex-direction:column; gap:10px}
  .img-modal img{max-width:100%; max-height:70vh; border-radius:10px; border:1px solid #233043; object-fit:contain}
  .img-actions{display:flex; align-items:center; gap:8px}
.range .rowitem > div:last-child { white-space: pre-wrap; }

/* Make the date and time boxes keep their width consistently */
.row input[type="date"] { min-width: 130px; }
.row input[type="time"] { min-width: 120px; }

/* If you have the little inline buttons inside the time inputs, keep them from sitting on top */
.row .time-wrap { position: relative; }
.row .time-wrap input[type="time"] { padding-right: 28px; }  /* room for the tiny icon/button */
.row .time-wrap .btn-inline {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* Resource select and description should not collapse */
.row select { min-width: 160px; }
.row textarea,
.row input[type="text"] { min-width: 140px; }
.grid input.invoice { min-width: 80px; }

/* Range filters sizing */
#rangePanel .pill select#rangeRes { min-width: 140px; }
#rangePanel .pill input#rangeQ   { flex: 1 1 360px; min-width: 260px; }

.day-total {
  margin-left: 6px;
}

/* Mobile/compact: stack neatly without overlap */
/* ===== Mobile layout for editor rows ===== */
@media (max-width: 768px) {
  .search-drawer{
    top:64px;
    right:8px;
    width:calc(100vw - 16px);
    max-height:calc(100vh - 74px);
  }
  .admin-drawer{
    top:64px;
    right:8px;
    width:calc(100vw - 16px);
    max-height:calc(100vh - 74px);
  }
  .admin-list-head, .admin-row{
    grid-template-columns:minmax(140px,1fr) 90px 55px 120px;
    gap:6px;
    padding:6px;
  }
  .admin-merge{flex-wrap:wrap}
  .admin-merge > span{display:none}

  #rangePanel .pill { gap: 8px; }
  #rangePanel .range-group,
  #rangePanel .range-actions{
    width:100%;
  }
  #rangePanel .group-1{order:1}
  #rangePanel .group-2{order:2}
  #rangePanel .group-3{order:3}
  #rangePanel .group-4{order:4}

  #rangePanel .group-1 input[type="date"]{flex:1 1 48%; min-width:140px}
  #rangePanel .group-2 select#rangeRes{flex:1 1 100%; min-width:160px}
  #rangePanel .group-3 input#rangeQ{flex:1 1 200px; min-width:140px}
  #rangePanel .group-4{justify-content:flex-end; margin-left:0}

  /* hide the header row that only shows labels */
  #dayPanel .grid.mute {
    display: none;
  }

  /* each data row: flex-wrap for paired fields */
  #dayPanel .grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    margin-bottom: 16px;
  }

  #dayPanel .grid > div {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
    flex: 0 0 100%;
    min-width: 0;
  }

  /* generic label style */
  #dayPanel .grid > div::before {
    content: '';
    flex: 0 0 80px;          /* space reserved for label text */
    font-size: 12px;
    color: var(--muted);
    padding-right: 8px;
  }

  /* labels for each field (based on column order) */
  #dayPanel .grid > div:nth-child(1)::before { content: 'Date'; }
  #dayPanel .grid > div:nth-child(2)::before { content: 'Start'; }
  #dayPanel .grid > div:nth-child(3)::before { content: 'End'; }
  #dayPanel .grid > div:nth-child(4)::before { content: 'Resource'; }
  #dayPanel .grid > div:nth-child(5)::before { content: 'Invoice'; }
  #dayPanel .grid > div:nth-child(6)::before { content: ''; flex: 0 0 0; padding-right: 0; }
  #dayPanel .grid > div:nth-child(7)::before { content: 'Duration'; }

  /* Order for mobile layout */
  #dayPanel .grid > div:nth-child(1) { order: 1; }
  #dayPanel .grid > div:nth-child(5) { order: 2; }
  #dayPanel .grid > div:nth-child(2) { order: 3; }
  #dayPanel .grid > div:nth-child(3) { order: 4; }
  #dayPanel .grid > div:nth-child(4) { order: 5; }
  #dayPanel .grid > div:nth-child(6) { order: 6; }
  #dayPanel .grid > div:nth-child(7) { order: 7; }
  #dayPanel .grid > div:nth-child(8) { order: 8; }
  #dayPanel .grid > div:nth-child(9) { order: 9; }

  /* Group Date + Invoice on one line */
  #dayPanel .grid > div:nth-child(1),
  #dayPanel .grid > div:nth-child(5) {
    flex: 0 0 calc(60% - 3px);
    max-width: calc(60% - 3px);
  }
  #dayPanel .grid > div:nth-child(5) {
    flex: 0 0 calc(40% - 3px);
    max-width: calc(40% - 3px);
  }
  #dayPanel .grid > div:nth-child(1)::before,
  #dayPanel .grid > div:nth-child(5)::before { flex: 0 0 80px; }
  #dayPanel .grid > div:nth-child(1) input,
  #dayPanel .grid > div:nth-child(5) input { flex: 1 1 auto; min-width: 0; }
  #dayPanel .grid > div:nth-child(5)::before { flex: 0 0 52px; }

  /* Duration + Save/Delete on one line */
  #dayPanel .grid > div:nth-child(7){
    order: 7;
    width: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  #dayPanel .grid > div:nth-child(8),
  #dayPanel .grid > div:nth-child(9){
    order: 8;
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    margin-left: 6px;
  }

  /* Group Start + End on one line */
  #dayPanel .grid > div:nth-child(2) { flex: 0 0 calc(60% - 3px); max-width: calc(60% - 3px); }
  #dayPanel .grid > div:nth-child(3) {
    flex: 0 0 calc(40% - 3px);
    max-width: calc(40% - 3px);
  }
  #dayPanel .grid > div:nth-child(2)::before { content: 'Start / End'; }
  #dayPanel .grid > div:nth-child(3)::before {
    content: '';
    flex: 0 0 0;
    padding-right: 0;
  }
  #dayPanel .grid > div:nth-child(2) input,
  #dayPanel .grid > div:nth-child(3) input {
    width: 100%;
  }

  #dayPanel .grid > div:nth-child(8)::before,
  #dayPanel .grid > div:nth-child(9)::before {
    content: '';
    flex: 0 0 0;
    padding-right: 0;
  }

  /* a little breathing room below the buttons */
  #dayPanel .grid > div:nth-child(9) {
    margin-bottom: 12px;
  }

  /* Entry divider for mobile */
  #dayPanel .grid {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  #dayPanel .grid::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 90%;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
  }
  /* Avoid extra divider under the add controls */
  #dayPanel #rows .grid:last-child::after {
    display: none;
  }
}

/* Tablet: keep actions in-bounds by moving Save/Delete under Duration */
@media (max-width: 1100px) and (min-width: 769px) {
  #dayPanel .grid{
    grid-template-columns: 110px 90px 90px 120px 80px minmax(160px, 1fr) 120px;
  }
  #dayPanel .grid.mute > div:nth-child(8),
  #dayPanel .grid.mute > div:nth-child(9){
    display: none;
  }
  #dayPanel .grid > div:nth-child(8),
  #dayPanel .grid > div:nth-child(9){
    grid-column: 7;
    grid-row: 2;
    align-self: start;
    margin-top: 6px;
  }
  #dayPanel .grid > div:nth-child(8){
    justify-self: start;
    display: inline-flex;
    gap: 6px;
    flex-wrap: nowrap;
  }
  #dayPanel .grid > div:nth-child(9){ justify-self: end; }
}


/* PRINT range CSS */
/* ----- Print header visibility & styling ----- */
.print-only { display: none; }

@media print {
  /* Make the page white/black and remove chrome */
  html, body { background: #fff; color: #000; }
  header, nav, .topline, .controls, #rangeTotal, #dayPanel, #searchBackdrop, #adminBackdrop, #adminPanel { display: none !important; }
  #rangePanel { position: static !important; inset: auto !important; width: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .panel, .range, .rowitem, .badge, .wrap { box-shadow: none !important; }
  #rangePanel { border: none !important; padding: 0 !important; }
  #printHeader { border: none !important; padding: 0 !important; margin: 0 0 14px 0 !important; }
  #rangePanel .rangebar { position: static !important; top: auto !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
  .range-results-wrap{
    overflow:visible !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    max-height:none !important;
  }
  .month-block{
    border: 1px solid #000 !important;
    border-radius: 10px !important;
    padding: 4px 6px 0 !important;
    margin: 10px 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .month-total{
    color:#000 !important;
  }
  a, a:visited { color: #000 !important; text-decoration: none !important; }

  /* Show the print header */
  .print-only { display: block !important; position: static !important; z-index: auto !important; margin: 0 0 14px 0 !important; width: 100%; }
  .print-only .ph-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 8px 12px;
    box-sizing: border-box;
  }
  .print-only .ph-range { grid-column: 2; text-align: center; }
  .print-only .ph-total { grid-column: 3; justify-self: end; font-weight: 700; text-align: right; }
  /* Hide drawer chrome and filters when printing */
  #rangePanel .search-drawer-head { display: none !important; }
  #rangePanel .row > .pill { display: none !important; }
  #rangePanel #rangeList { margin-top: 0 !important; }

}

.grid input, .grid select, .grid textarea { width:100%; min-width:0; }

input[list]::-webkit-calendar-picker-indicator { display: none !important; }
  .datewrap{position:relative; display:inline-flex; align-items:center}
  .date-input{position:absolute; opacity:0; pointer-events:none; width:0; height:0}
  .datebtn{background:#4d3b83; border:1px solid var(--line); color:var(--fg); padding:6px 10px; border-radius:8px; cursor:pointer; min-width:120px; text-align:center}
  .datepicker{position:absolute; top:42px; left:0; background:#121722; border:1px solid #263145; border-radius:12px; padding:10px; box-shadow:0 16px 30px rgba(0,0,0,0.4); z-index:5; width:260px}
  .dp-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
  .dp-title{font-weight:700}
  .dp-week{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:11px; color:var(--muted); margin-bottom:6px}
  .dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
  .dp-cell{background:#1a1e27; border:1px solid #233043; color:var(--fg); border-radius:6px; padding:6px 0; font-size:12px; text-align:center}
  .dp-cell.mute{background:transparent; border-color:transparent}
  .dp-cell.has-entry{background:#3b1f6a; border-color:#5b2db0}
  .dp-cell.selected{outline:2px solid #8b3dff; font-weight:800}
  .dp-cell:hover{background:#2a3140}
  .dp-cell.today{background:#f2c94c; color:#c30000; border-color:#8b3dff}