/* static/css/ons.css — MedRegia OnS Master Stylesheet */
:root{
    --ink:#1b2b22;
    --paper:#f7f5ef;
    --panel:#ffffff;
    --line:#e2e1d6;
    --green-deep:#1f5138;
    --green-mid:#2f7a54;
    --green-soft:#e7f0e8;
    --amber:#c07a2b;
    --amber-soft:#faf1e2;
    --red:#a5402f;
    --red-soft:#f7e9e6;
    --blue:#2b6ca0;
    --blue-soft:#e6eff7;
    --mono: 'Courier New', ui-monospace, monospace;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    background:var(--paper);
    color:var(--ink);
  }
  .app{ display:flex; min-height:100vh; }

  /* SIDEBAR */
  .sidebar{
    width:250px;
    min-width:250px;
    background:var(--green-deep);
    color:#eef4ef;
    display:flex;
    flex-direction:column;
    padding:20px 16px;
  }
  .brand{
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:2px;
  }
  .brand .dot{ width:8px;height:8px;border-radius:50%;background:#7fe0a8; }
  .brand-sub{
    font-size:11px;
    color:#a9c9b6;
    margin-bottom:20px;
    letter-spacing:.4px;
    text-transform:uppercase;
  }
  .totals{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:22px;
  }
  .tstat{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    padding:8px 10px;
  }
  .tstat .n{ font-size:18px; font-weight:700; font-family:var(--mono); }
  .tstat .l{ font-size:10px; color:#a9c9b6; text-transform:uppercase; letter-spacing:.4px; margin-top:2px;}

  .side-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8fb69f;
    margin:6px 0 8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .dealer-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow-y:auto;
    flex:1;
  }
  .dealer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:13.5px;
    color:#dcece1;
    transition:background .12s ease;
  }
  .dealer-row:hover{ background:rgba(255,255,255,0.07); }
  .dealer-row.active{ background:#7fe0a8; color:#0f3524; font-weight:700; }
  .dealer-row .badge{
    font-family:var(--mono);
    font-size:11px;
    background:rgba(255,255,255,0.12);
    padding:1px 7px;
    border-radius:20px;
  }
  .dealer-row.active .badge{ background:rgba(15,53,36,0.18); }
  .dealer-row .badge.zero{ opacity:.4; }
  .dealer-row.unknown-row{ border:1px dashed rgba(255,255,255,0.25); }
  .dealer-row .q-icon{ margin-right:4px; opacity:.8; }
  .dealer-empty{ padding:10px 12px; font-size:12px; color:#9fc0ac; }

  .add-dealer{
    margin-top:10px;
    display:flex;
    gap:6px;
  }
  .add-dealer input{
    flex:1;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:6px;
    color:#fff;
    padding:6px 8px;
    font-size:12px;
  }
  .add-dealer input::placeholder{ color:#9fc0ac; }
  .add-dealer button{
    background:#7fe0a8;
    border:none;
    color:#0f3524;
    font-weight:700;
    border-radius:6px;
    padding:0 10px;
    cursor:pointer;
    font-size:14px;
  }

  .sidebar-footer{
    margin-top:14px;
    font-size:10.5px;
    color:#7fa08c;
    line-height:1.5;
  }

  /* MAIN */
  .main{ flex:1; padding:26px 34px; display:flex; gap:24px; align-items:flex-start; max-width:1520px; margin:0 auto; width:100%; }
  .content{ flex:1.6; min-width:0; }
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:12px;
  }
  h1{ font-size:20px; margin:0 0 4px; color:var(--green-deep); }
  .subtitle{ font-size:12.5px; color:#6b7b70; }
  .actions{ display:flex; gap:8px; }
  .btn{
    border:1px solid var(--line);
    background:var(--panel);
    padding:8px 14px;
    border-radius:8px;
    font-size:12.5px;
    cursor:pointer;
    color:var(--ink);
    font-weight:600;
  }
  .btn.primary{ background:var(--green-mid); border-color:var(--green-mid); color:#fff; }
  .btn:hover{ filter:brightness(0.97); }
  .btn.small{ padding:5px 10px; font-size:11.5px; }

  /* ENTRY FORM */
  .entry-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:20px;
  }
  .entry-title{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#6b7b70; margin-bottom:12px; font-weight:700; }
  .entry-grid{
    display:grid;
    grid-template-columns: 1fr 1.3fr 0.7fr 0.6fr 0.55fr 0.75fr 0.95fr 1.1fr auto;
    gap:8px;
    align-items:end;
  }
  .field label{ display:block; font-size:10.5px; color:#8a988e; margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; }
  .field input, .field select{
    width:100%;
    padding:8px 9px;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:13px;
    background:#fcfbf7;
    color:var(--ink);
  }
  .field input:focus, .field select:focus{ outline:2px solid var(--green-mid); outline-offset:-1px; background:#fff; }
  .entry-grid .submit-btn{
    background:var(--green-deep);
    color:#fff;
    border:none;
    border-radius:7px;
    padding:8px 16px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    height:37px;
  }
  .entry-grid .submit-btn:hover{ background:var(--green-mid); }
  .entry-hint{ font-size:11px; color:#9aa79e; margin-top:9px; }

  /* FILTER BAR */
  .filter-bar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
  }
  .chip{
    font-size:11.5px;
    padding:5px 11px;
    border-radius:20px;
    border:1px solid var(--line);
    background:#fff;
    cursor:pointer;
    color:#5b6b60;
    white-space:nowrap;
  }
  .chip.active{ background:var(--green-soft); border-color:var(--green-mid); color:var(--green-deep); font-weight:700; }
  .filter-spacer{ flex:1; }
  .clear-filter{ font-size:11.5px; color:var(--green-mid); cursor:pointer; text-decoration:underline; }

  /* TABLE */
  .table-wrap{ overflow-x:auto; border-radius:12px; border:1px solid var(--line); }
  table{ width:100%; border-collapse:collapse; background:var(--panel); }
  thead th{
    text-align:left;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#8a988e;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:#fbfaf6;
    white-space:normal;
    word-break:break-word;
  }
  tbody td{
    padding:9px 12px;
    font-size:13px;
    border-bottom:1px solid #f0efe8;
    vertical-align:middle;
    white-space:normal;
    word-break:break-word;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:#fafaf5; }
  .med-name{ font-weight:600; }
  .free-badge{
    display:inline-block; background:var(--green-soft); color:var(--green-deep);
    font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px;
    margin-right:6px; white-space:nowrap; vertical-align:middle;
  }
  .row-check{ width:15px; height:15px; cursor:pointer; accent-color:var(--green-mid); }
  .bulk-bar{
    background:var(--amber-soft);
    border-color:var(--amber);
    position: sticky;
    bottom: 16px;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(138, 91, 31, 0.12);
  }
  .bulk-bar .txt{ color:#8a5b1f; }
  .bulk-bar select{
    padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:12px; background:#fff;
  }
  .pack-cell{ color:#6b7b70; font-family:var(--mono); font-size:12px; white-space:nowrap; }
  .offer-tag{
    background:var(--amber-soft); color:var(--amber);
    font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; white-space:nowrap;
  }
  .no-offer{ color:#c7cabf; font-size:12px; }
  .recv-input{
    width:64px; padding:6px 7px; border:1px solid var(--line); border-radius:6px;
    font-size:12.5px; font-family:var(--mono); background:#fcfbf7; color:var(--ink);
  }
  .recv-input:focus{ outline:2px solid var(--green-mid); outline-offset:-1px; background:#fff; }
  select.dealer-select{
    background:var(--green-soft); color:var(--green-deep);
    font-size:11px; padding:3px 8px; border-radius:20px; font-weight:600;
    border:none; cursor:pointer;
  }

  /* DEALER PANEL (right side) */
  .dealer-panel{
    flex:1;
    min-width:320px;
    max-width:460px;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:sticky;
    top:26px;
    max-height:calc(100vh - 52px);
    overflow-y:auto;
    padding-right:2px;
  }
  .dp-title{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#8a988e; font-weight:700; margin-bottom:2px; }
  .dp-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    cursor:pointer;
    transition:border-color .12s ease;
  }
  .dp-card:hover{ border-color:#c9d6cc; }
  .dp-card.active{ border-color:var(--green-mid); box-shadow:0 0 0 1px var(--green-mid); }
  .dp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
  .dp-head .name{ font-weight:700; font-size:13.5px; color:var(--green-deep); }
  .dp-head .badge{
    font-family:var(--mono); font-size:11px; background:var(--green-soft); color:var(--green-deep);
    padding:1px 8px; border-radius:20px;
  }
  .dp-head .badge.zero{ background:#f0efe8; color:#9aa79e; }
  .dp-item{
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; padding:6px 0; border-top:1px solid #f0efe8; gap:8px;
  }
  .dp-item:first-of-type{ border-top:none; margin-top:4px; }
  .dp-item .n{ color:var(--ink); overflow:hidden; min-width:0; }
  .dp-item .n .mname{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dp-item .n .msub{ display:block; font-size:10.5px; color:#9aa79e; margin-top:1px; }
  .dp-item .n .msub .offer{ color:var(--amber); font-weight:600; }
  .dp-item .s{ font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; flex-shrink:0; white-space:nowrap; }
  .dp-empty{ font-size:11.5px; color:#9aa79e; padding:3px 0 0; }
  .dp-more{ font-size:11px; color:var(--green-mid); padding-top:5px; }
  .dp-empty-board{
    font-size:12.5px; color:#8a988e; background:var(--panel); border:1px dashed var(--line);
    border-radius:12px; padding:16px; line-height:1.5;
  }
  .status-badge{
    font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; display:inline-block; white-space:nowrap;
  }
  .st-NotAvailable{ background:var(--red-soft); color:var(--red); }
  .st-Partially{ background:var(--amber-soft); color:var(--amber); }
  .st-Received{ background:var(--green-soft); color:var(--green-deep); }
  .st-ExtraReceived{ background:var(--blue-soft); color:var(--blue); }
  .del-btn{ background:none; border:none; color:#b7b2a4; cursor:pointer; font-size:14px; }
  .del-btn:hover{ color:var(--red); }
  .empty-row td{ text-align:center; color:#9aa79e; padding:34px; font-size:13px; }

  /* ── AUTH CONTAINER & GLASSMORPHISM DESIGN ────────────────────────────────── */
  .auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: radial-gradient(circle at 15% 15%, rgba(47, 122, 84, 0.18) 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(31, 81, 56, 0.15) 0%, transparent 45%),
                linear-gradient(135deg, #10281c 0%, #1a422e 50%, #0d2117 100%);
    position: relative;
    overflow: hidden;
  }
  .auth-shell::before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 224, 168, 0.12) 0%, rgba(127, 224, 168, 0) 70%);
    top: -120px;
    left: -120px;
    pointer-events: none;
    animation: authPulse 8s ease-in-out infinite alternate;
  }
  @keyframes authPulse {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(30px, 30px); }
  }

  .auth-card {
    width: min(450px, 100%);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 24px 48px -12px rgba(10, 30, 20, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    animation: authSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes authSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .auth-header {
    text-align: center;
    margin-bottom: 22px;
  }
  .auth-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(31, 81, 56, 0.08);
    border: 1px solid rgba(31, 81, 56, 0.15);
    color: var(--green-deep);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
  }
  .auth-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
  }
  .auth-subtitle {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
  }

  .auth-tabs {
    display: flex;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 22px;
    border: 1px solid #e5e7eb;
  }
  .auth-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7280;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .auth-tab-btn.active {
    background: #ffffff;
    color: var(--green-deep);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .auth-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .role-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .role-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    user-select: none;
  }
  .role-card-btn:hover {
    border-color: #a7f3d0;
    background: #f0fdf4;
  }
  .role-card-btn.active {
    border-color: var(--green-mid);
    background: #ecfdf5;
    box-shadow: 0 0 0 3px rgba(47, 122, 84, 0.15);
  }
  .role-card-btn .r-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .role-card-btn .r-name {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
  }

  .input-control-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .input-control-icon {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
  }
  .auth-input-field {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
  }
  .auth-input-field:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3.5px rgba(47, 122, 84, 0.15);
  }
  .auth-input-field.has-error {
    border-color: #ef4444;
    background: #fef2f2;
  }
  .auth-input-field.has-error:focus {
    box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.15);
  }

  .toggle-pwd-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s;
  }
  .toggle-pwd-btn:hover { color: #111827; }

  .field-hint-text {
    font-size: 11.5px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .field-hint-text.neutral { color: #6b7280; }
  .field-hint-text.error { color: #dc2626; font-weight: 600; }
  .field-hint-text.success { color: #059669; font-weight: 600; }

  .auth-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    animation: alertShake 0.3s ease;
  }
  @keyframes alertShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }

  .auth-submit-btn {
    width: 100%;
    padding: 13px;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 81, 56, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
  }
  .auth-submit-btn:hover {
    opacity: 0.96;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(31, 81, 56, 0.4);
  }
  .auth-submit-btn:active {
    transform: translateY(0);
  }
  .auth-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
  }

  .spinner-ring {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spinRing 0.7s linear infinite;
  }
  @keyframes spinRing {
    to { transform: rotate(360deg); }
  }

  .user-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#fbfaf6; color:var(--green-deep); font-size:12px; font-weight:600; }

  /* SHARE PANEL (in-app) */
  .share-banner{
    background:var(--green-soft);
    border:1px solid var(--green-mid);
    border-radius:10px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:10px;
  }
  .share-banner .txt{ font-size:12.5px; color:var(--green-deep); }
  .share-banner .txt b{ font-weight:700; }
  .share-actions{ display:flex; gap:8px; }

  /* DEALER VIEW (shared / read-only) */
  .dealer-view{ max-width:640px; margin:40px auto; padding:0 20px; }
  .dv-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 28px; }
  .dv-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
  .dv-brand{ font-size:12px; color:#8a988e; text-transform:uppercase; letter-spacing:.5px; }
  .dv-title{ font-size:22px; font-weight:700; color:var(--green-deep); margin:2px 0 2px; }
  .dv-date{ font-size:11.5px; color:#9aa79e; }
  .dv-list{ margin-top:18px; display:flex; flex-direction:column; gap:0; }
  .dv-item{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #f0efe8; font-size:13.5px; gap:10px; }
  .dv-item:last-child{ border-bottom:none; }
  .dv-item .name{ font-weight:600; }
  .dv-item .meta{ color:#8a988e; font-size:12px; margin-top:2px; }
  .dv-item .meta .offer{ color:var(--amber); font-weight:600; }
  .dv-status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; height:fit-content; white-space:nowrap; }
  .dv-empty{ text-align:center; padding:40px 0; color:#9aa79e; font-size:13px; }
  .dv-back{ display:inline-block; margin-top:16px; font-size:12px; color:var(--green-mid); }

  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:8px; }

  @media (max-width: 980px){
    .main{ flex-direction:column; }
    .dealer-panel{ width:100%; max-width:none; position:static; max-height:none; }
  }
  @media (max-width: 820px){
    .app{ flex-direction:column; }
    .sidebar{ width:100%; min-width:0; flex-direction:row; overflow-x:auto; }
    .dealer-list{ flex-direction:row; }
    .entry-grid{ grid-template-columns:1fr 1fr; }
    .main{ padding:18px; }
  }

  /* NAVIGATION MENU */
  .side-menu{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:14px;
  }
  .menu-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    color:#dcece1;
    transition:background .12s ease;
  }
  .menu-item:hover{ background:rgba(255,255,255,0.07); }
  .menu-item.active{ background:#7fe0a8; color:#0f3524; font-weight:700; }

  .med-entry-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr auto;
    gap:8px;
    align-items:end;
  }
  @media (max-width: 820px){
    .med-entry-grid{ grid-template-columns: 1fr 1fr; }
  }

  /* MODAL OVERLAY */
  .modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 53, 36, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .modal-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(15, 53, 36, 0.15);
    border: 1px solid var(--line);
    animation: modalSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--green-deep);
    margin-bottom: 8px;
  }
  .modal-desc {
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .modal-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .modal-opt-btn {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fcfbf7;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s ease;
    color: var(--ink);
  }
  .modal-opt-btn:hover {
    background: var(--green-soft);
    border-color: var(--green-mid);
    color: var(--green-deep);
  }

  .date-group-header td{
    background:#fafbfe;
    font-weight:700;
    color:var(--green-deep);
    font-size:12px;
    letter-spacing:.3px;
    border-bottom:1px solid var(--line);
    border-top:1px solid var(--line);
    padding:8px 12px;
  }