:root{
    --green: #8CC63F;
    --green-dark: #6EA82F;
    --purple: #7e2873;
    --purple-dark: #5e1c55;
    --ink: #2B2B33;
    --muted: #767685;
    --line: #E8E6F0;
    --card: #FFFFFF;
    --bg-top: #EAF6DE;
    --bg-bottom: #f8f0f7;
    --danger: #D0455A;
  }

  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding: 24px;
    color: var(--ink);
  }

  .screen{
    width:100%;
    max-width: 420px;
  }

  .brand{
    text-align:center;
    margin-bottom: 22px;
  }
  .brand .mark{
    height:140px; width:auto;
    max-width: 320px;
    margin: 0 auto 14px;
    object-fit: contain;
  }
  .brand h1{
    margin:0;
    font-size: 26px;
    letter-spacing: 1px;
    font-weight: 800;
    color: var(--green-dark);
    text-transform: uppercase;
  }
  .brand .sub{
    margin-top: 2px;
    font-size: 12.5px;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
  }
  .brand .tag{
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
  }

  .card{
    background: var(--card);
    border-radius: 20px;
    padding: 28px 26px 22px;
    box-shadow: 0 20px 45px rgba(94,28,85,0.12);
    border: 1px solid rgba(126,40,115,0.06);
  }

  .field{ margin-bottom: 18px; }
  .field label{
    display:block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .input-wrap{
    position: relative;
    display:flex;
    align-items:center;
  }
  .input-wrap .icon{
    position:absolute;
    left: 14px;
    width: 18px; height: 18px;
    color: var(--muted);
    pointer-events:none;
  }
  .input-wrap input{
    width:100%;
    padding: 13px 44px 13px 42px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    font-size: 15px;
    background: #FBFAFD;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .input-wrap input::placeholder{ color: #A9A7B6; }
  .input-wrap input:focus{
    border-color: var(--purple);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(126,40,115,0.12);
  }
  .input-wrap input.error{
    border-color: var(--danger);
  }

  /* ---------- Dark theme ---------- */
  body.theme-dark{
    --ink: #EDEDF2;
    --muted: #A8A8B8;
    --line: #3A3A46;
    --card: #22222B;
    --bg-top: #17171D;
    --bg-bottom: #121216;
  }
  body.theme-dark .input-wrap input{ background: #2A2A34; }
  body.theme-dark .input-wrap input:focus{ background: #2E2E39; }
  body.theme-dark select,
  body.theme-dark textarea{ background: #2A2A34; color: var(--ink); border-color: var(--line); }
  body.theme-dark .lom-modal{ background: var(--card); }
  body.theme-dark .lom-modal-overlay{ background: rgba(0,0,0,0.6); }
  body.theme-dark .logout-btn,
  body.theme-dark .lom-btn-secondary,
  body.theme-dark .icon-btn,
  body.theme-dark .back-link{ background: var(--card); color: var(--ink); border-color: var(--line); }
  body.theme-dark table th{ color: var(--muted); }
  body.theme-dark table td, body.theme-dark table th{ border-color: var(--line); }
  .toggle-visibility{
    position:absolute;
    right: 12px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    color: var(--muted);
    display:flex;
  }
  .toggle-visibility:hover{ color: var(--ink); }
  .toggle-visibility svg{ width:18px; height:18px; }

  .error-msg{
    font-size: 12.5px;
    color: var(--danger);
    margin-top: 6px;
    min-height: 16px;
  }

  .row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin: 4px 0 22px;
  }
  .remember{
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink);
    user-select:none;
    cursor:pointer;
  }
  .remember input{
    width:17px; height:17px;
    accent-color: var(--purple);
    cursor:pointer;
  }
  .forgot{
    font-size: 13.5px;
    font-weight: 700;
    color: var(--purple);
    text-decoration: none;
  }
  .forgot:hover{ text-decoration: underline; }

  .btn-login{
    width:100%;
    padding: 14px;
    border:none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
    color:#fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor:pointer;
    transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
    box-shadow: 0 10px 22px rgba(126,40,115,0.30);
  }
  .btn-login:hover{ box-shadow: 0 12px 26px rgba(126,40,115,0.38); }
  .btn-login:active{ transform: translateY(1px); }
  .btn-login[disabled]{
    opacity:0.7;
    cursor: not-allowed;
  }

  .spinner{
    width:16px; height:16px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    display:inline-block;
    vertical-align: -3px;
    margin-right:8px;
    animation: spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  .footer-note{
    text-align:center;
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .footer-note svg{ width:14px; height:14px; color: var(--green-dark); flex-shrink:0; }

  @media (max-width: 380px){
    .card{ padding: 22px 18px 18px; }
    .brand h1{ font-size: 22px; }
  }

  @media (prefers-reduced-motion: reduce){
    .btn-login, .input-wrap input, .toggle-visibility{ transition:none; }
    .spinner{ animation-duration: 1.4s; }
  }

  :focus-visible{
    outline: 2px solid var(--purple);
    outline-offset: 2px;
  }

  /* ---------- Shared dashboard logout button ---------- */
  .logout-btn{
    padding: 9px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
  }
  .logout-btn:hover{ border-color: var(--purple); color: var(--purple); }

  /* ---------- Admin nav tabs ---------- */
  .admin-nav{
    display:flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1.5px solid var(--line);
    overflow-x: auto;
  }
  .admin-nav a{
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    text-decoration:none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    white-space: nowrap;
  }
  .admin-nav a:hover{ color: var(--ink); }
  .admin-nav a.active{
    color: var(--purple-dark);
    border-bottom-color: var(--purple);
  }

  /* ---------- Admin section sub-nav (Users, Holidays, Payroll, etc.) ---------- */
  .admin-subnav{
    display:flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .admin-subnav a{
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    text-decoration:none;
    background: #f8f0f7;
    border: 1.5px solid transparent;
    white-space: nowrap;
  }
  .admin-subnav a:hover{ color: var(--ink); }
  .admin-subnav a.active{
    color: #fff;
    background: var(--purple);
  }

  /* ---------- Toggle switch (System Preferences, etc.) ---------- */
  .toggle-switch{
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
  }
  .toggle-switch input{
    opacity: 0;
    width: 0;
    height: 0;
  }
  .toggle-slider{
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--line);
    border-radius: 999px;
    transition: background-color .15s ease;
  }
  .toggle-slider:before{
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }
  .toggle-switch input:checked + .toggle-slider{
    background-color: var(--purple);
  }
  .toggle-switch input:checked + .toggle-slider:before{
    transform: translateX(18px);
  }
  .toggle-switch input:disabled + .toggle-slider{
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---------- Confirmation modal (logout, etc.) ---------- */
  .lom-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(43,43,51,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 1000;
    padding: 20px;
  }
  .lom-modal{
    background: #fff;
    border-radius: 18px;
    padding: 26px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    animation: lom-pop .15s ease;
  }
  @keyframes lom-pop{
    from{ transform: scale(0.96); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .saved-confirm-box{ animation: none !important; }
  .saved-confirm-check svg{ width:56px; height:56px; filter: drop-shadow(0 4px 14px rgba(110,168,47,0.35)); }

  /* ---------- Confirmation popup (luxurious variant) ---------- */
  .saved-confirm-overlay{
    background: rgba(43,43,51,0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: saved-confirm-backdrop-in 0.25s ease;
  }
  .saved-confirm-overlay .saved-confirm-box{
    animation: saved-confirm-pop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 30px 70px rgba(110,168,47,0.18), 0 25px 60px rgba(0,0,0,0.22);
  }
  .saved-confirm-overlay.saved-confirm-exit{
    animation: saved-confirm-backdrop-out 0.22s ease forwards;
  }
  .saved-confirm-overlay.saved-confirm-exit .saved-confirm-box{
    animation: saved-confirm-pop-out 0.22s ease forwards;
  }
  .saved-confirm-check{
    position: relative;
    display: inline-flex;
  }
  .saved-confirm-check::after{
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110,168,47,0.35) 0%, rgba(110,168,47,0) 70%);
    animation: saved-confirm-glow 0.7s ease-out;
  }
  .saved-confirm-tick{
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: saved-confirm-tick-draw 0.32s ease 0.15s forwards;
  }
  @keyframes saved-confirm-backdrop-in{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes saved-confirm-backdrop-out{ from{ opacity:1; } to{ opacity:0; } }
  @keyframes saved-confirm-pop-in{
    0%{ transform: scale(0.75); opacity:0; }
    100%{ transform: scale(1); opacity:1; }
  }
  @keyframes saved-confirm-pop-out{
    from{ transform: scale(1); opacity:1; }
    to{ transform: scale(0.92); opacity:0; }
  }
  @keyframes saved-confirm-glow{
    0%{ opacity:0; transform: scale(0.6); }
    50%{ opacity:1; }
    100%{ opacity:0; transform: scale(1.4); }
  }
  @keyframes saved-confirm-tick-draw{ to{ stroke-dashoffset:0; } }

  .lom-modal h3{ margin:0 0 8px; font-size: 18px; color: var(--ink); }
  .lom-modal p{ margin:0 0 20px; font-size: 14px; color: var(--muted); }
  .lom-modal-actions{ display:flex; gap:10px; justify-content:flex-end; }
  .lom-btn-secondary{
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
  }
  .lom-btn-secondary:hover{ border-color: var(--muted); }
  .lom-btn-danger{
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: var(--danger);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
  }
  .lom-btn-danger:hover{ opacity: 0.9; }

  /* ---------- Role badge ---------- */
  .role-badge{
    display:inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .role-badge.admin{ background: rgba(126,40,115,0.12); color: var(--purple-dark); }
  .role-badge.caregiver{ background: rgba(140,198,63,0.16); color: var(--green-dark); }

  /* ---------- Simple data table ---------- */
  .lom-table{ width:100%; border-collapse: collapse; font-size: 14px; }
  .lom-table th{
    text-align:left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--line);
  }
  .lom-table td{
    padding: 10px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .lom-table tr:last-child td{ border-bottom:none; }

  /* Compact action buttons inside table rows (Edit/ADLs/Delete, Edit/Deactivate/
     Delete, etc.) — sized down and spaced so groups of 2-3 buttons never crowd
     or overlap a row, no matter how many columns a given table has. Applies
     everywhere the shared .lom-table class is used. */
  .lom-table td .lom-btn-secondary,
  .lom-table td .lom-btn-danger{
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
    margin: 2px 6px 2px 0;
    white-space: nowrap;
  }
  .lom-table td .lom-btn-secondary:last-child,
  .lom-table td .lom-btn-danger:last-child{ margin-right: 0; }

  /* ---------- Inline form row (admin: add user) ---------- */
  .inline-form{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 6px;
  }
  .inline-form .field{ margin-bottom:0; flex: 1 1 180px; }
  .inline-form select{
    width:100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    font-size: 14.5px;
    background: #FBFAFD;
    color: var(--ink);
  }
  .btn-secondary-action{
    padding: 12px 18px;
    border-radius: 12px;
    border: none;
    background: var(--green-dark);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-secondary-action:hover{ opacity: 0.92; }

  .temp-password-box{
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8f0f7;
    border: 1.5px dashed var(--purple);
    font-size: 14px;
  }
  .temp-password-box strong{ font-size: 16px; letter-spacing: 0.5px; }

  /* ---------- Clock-in card ---------- */
  .clock-card{
    text-align:center;
    padding: 40px 26px;
  }
  .clock-status-dot{
    width:10px; height:10px;
    border-radius:50%;
    display:inline-block;
    margin-right: 8px;
  }
  .clock-status-dot.in{ background: var(--green); box-shadow: 0 0 0 4px rgba(140,198,63,0.2); }
  .clock-status-dot.out{ background: var(--muted); }
  .clock-time{ font-size: 15px; color: var(--muted); margin: 10px 0 26px; }
  .btn-clock{
    width:100%;
    padding: 18px;
    border-radius: 14px;
    border:none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor:pointer;
    color:#fff;
  }
  .btn-clock.clock-in{ background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); box-shadow: 0 10px 22px rgba(140,198,63,0.35); }
  .btn-clock.clock-out{ background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%); box-shadow: 0 10px 22px rgba(126,40,115,0.30); }
  .btn-clock:disabled{
    background: var(--line) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }

  /* ---------- Nav badge (Requests notification count) ---------- */
  .nav-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    margin-left: 6px;
    vertical-align: middle;
  }

  /* ---------- Site-wide font size increase ---------- */
  html{ zoom: 1.1; }