/* ==========================================================================
   Time Entry — Editor modal + searchable dropdown
   ========================================================================== */

.overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:24px 16px;overflow:auto}
.overlay.show{display:flex}
.modal{background:#fff;border:1px solid var(--gray-300);width:460px;max-width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.modal-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
.modal-head .swatch{width:12px;height:12px;border-radius:0;border:1px solid rgba(0,0,0,.1)}
.modal-head .head-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.modal-head h3{font-size:14px;font-weight:700;color:var(--gray-800)}
.modal-head .head-sub{font-size:10px;font-weight:600;color:var(--gray-500)}
.modal-head .head-sub:empty{display:none}
.modal-head .dur{font-size:13px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.dur .otd{font-size:10px;font-weight:600;color:var(--warning-dark);margin-left:6px}
.modal-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}

.field{display:flex;flex-direction:column;gap:4px}
.field > label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500)}
.field input[type=time],.field select,.field textarea,.sd-input,.field .num{
    font-family:inherit;font-size:12px;padding:7px 9px;border:1px solid var(--gray-300);
    border-radius:0;background:#fff;color:var(--gray-900);width:100%}
.field textarea{resize:vertical;min-height:54px}
.row2{display:flex;gap:12px}
.row2 .field{flex:1}
.field .hint{font-size:10px;color:var(--gray-400)}
.field.err .sd-input,.field.err input[type=time]{border-color:var(--danger)}
.field.err > label{color:var(--danger)}
.cmt-req{color:var(--danger);font-weight:600}

/* Searchable dropdown */
.sd{position:relative}
.sd-input::placeholder{color:var(--gray-400)}
.sd-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--gray-300);border-top:0;max-height:220px;overflow:auto;z-index:10;display:none}
.sd-panel.open{display:block}
.sd-opt{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--gray-100)}
.sd-opt:hover,.sd-opt.active{background:var(--primary-bg)}
.sd-opt .o-main{font-size:12px;font-weight:600;color:var(--gray-800)}
.sd-opt .o-sub{font-size:10px;color:var(--gray-500);font-family:'Consolas',monospace}
.sd-opt.group{background:var(--gray-50);font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray-500);cursor:default;padding:5px 10px}
.sd-opt.group:hover{background:var(--gray-50)}
.sd-disabled .sd-input{background:var(--gray-50);color:var(--gray-400);cursor:not-allowed}

.modal-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--gray-200);background:var(--gray-50)}
.modal-foot .spacer{flex:1}

/* "More options" — collapsed advanced fields (default job title, labor, day, overtime) */
.adv-toggle{display:flex;align-items:center;gap:8px;width:100%;background:var(--gray-50);
    border:1px solid var(--gray-200);padding:8px 10px;cursor:pointer;font:inherit;color:var(--gray-600);text-align:left}
.adv-toggle:hover{background:var(--gray-100)}
.adv-toggle .chev{font-size:9px;color:var(--gray-500);transition:transform .12s;flex:0 0 auto}
.adv-toggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.adv-toggle .adv-title{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray-600)}
.adv-toggle .adv-sub{font-size:10px;color:var(--gray-400);margin-left:auto;text-align:right}
.adv-section{display:none;flex-direction:column;gap:12px}
.adv-section.open{display:flex}

/* OT section */
.ot-toggle{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--gray-600);cursor:pointer;user-select:none}
.ot-toggle input{width:auto}
.ot-fields{display:none;gap:12px}
.ot-fields.show{display:flex}

/* Accrual balances modal */
.acc-modal{width:440px}
.modal-head .acc-x{border:0;background:transparent;font-size:14px;line-height:1;color:var(--gray-500);cursor:pointer;padding:4px}
.modal-head .acc-x:hover{color:var(--gray-800)}
.acc-table{width:100%;border-collapse:collapse;font-size:12px}
.acc-table th,.acc-table td{padding:7px 10px;border-bottom:1px solid var(--gray-200);text-align:right;font-variant-numeric:tabular-nums}
.acc-table th{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray-500);background:var(--gray-50)}
.acc-table th:first-child,.acc-table td:first-child{text-align:left}
.acc-table td.acc-name{font-weight:600;color:var(--gray-800)}
.acc-table td.acc-bal{font-weight:700;color:var(--primary-dark)}
.acc-empty,.acc-loading{padding:16px;text-align:center;font-size:12px;color:var(--gray-500)}
.acc-note{font-size:10px;color:var(--gray-400);margin-top:8px}

@media (max-width:680px){
    .overlay{padding:12px}
    .modal{width:100%}
    .acc-modal{width:100%}
}