/* Slick Admin Portal styles: navy theme, Poppins/Roboto */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap');
:root{
    --siap-bg:#0b1b34; /* deep navy */
    --siap-card:#0f2345;
    --siap-text:#e7eefc;
    --siap-accent:#f39c12; /* orange accent like "Join Now" */
    --siap-muted:#9fb3d9;
    --siap-border:#1f3b6b;
}
.siap-wrap, .siap-card, .siap-grid, .siap-table, .siap-btn {
    font-family: 'Poppins', 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.siap-grid{
    display:grid;gap:16px;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.siap-card{
    background:var(--siap-card);
    color:var(--siap-text);
    border:1px solid var(--siap-border);
    border-radius:14px;
    padding:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.siap-card h3{margin:0 0 8px 0;font-weight:600;}
.siap-actions{display:flex;gap:10px;margin-top:12px;}
.siap-btn{
    background:var(--siap-accent);
    color:#111;
    border:none;border-radius:12px;
    padding:10px 16px;cursor:pointer;
    font-weight:600;
    transition:.2s ease;
}
.siap-btn:hover{transform:translateY(-1px);}
.siap-btn.outline{
    background:transparent;color:var(--siap-text);
    border:1px solid var(--siap-border);
}
.siap-note{margin-top:10px;color:var(--siap-muted);}
.siap-table{width:100%;border-collapse:collapse;color:var(--siap-text);}
.siap-table th,.siap-table td{padding:10px;border-bottom:1px solid var(--siap-border);text-align:left;}
.siap-table th{color:#cfe0ff;font-weight:600;}
body.wp-admin .siap-wrap{padding:12px;}


/* Push portal content below sticky/transparent header */
.siap-portal-page .entry-content,
.siap-portal-page .site-content,
.siap-portal-page .content-area,
.siap-portal-page main {
  padding-top: 20px;   /* adjust to your header height */
}

@media (max-width: 782px) {
  .siap-portal-page .entry-content,
  .siap-portal-page .site-content,
  .siap-portal-page .content-area,
  .siap-portal-page main {
    padding-top: 20px; /* mobile headers are taller */
  }
}


.siap-metrics {
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  margin-bottom: 10px;
}
.siap-stat {
  background: var(--siap-card);
  color: var(--siap-text);
  border: 1px solid var(--siap-border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.siap-stat strong { font-size: 26px; display:block; line-height:1.1; }
.siap-stat span   { color: var(--siap-muted); font-size: 13px; }



/* Filter row (reuses the same class you have) */
.siap-row { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr auto auto; gap:8px; }

/* Badges for flags */
.siap-badge {
  display:inline-block; padding:2px 6px; border-radius:10px; font-size:12px; margin-left:6px;
  background:#eaeaea; color:#111;
}
.siap-badge.late   { background:#ffe6e6; color:#a40000; }
.siap-badge.missed { background:#fff3cd; color:#7a5900; }
.siap-btn.xs { padding:4px 8px; font-size:12px; }
.siap-btn.xs { padding:4px 8px; font-size:12px; }
.siap-alert { padding:12px; border-radius:8px; margin:6px 0; }
.siap-alert.info    { background:#e9f2ff; }
.siap-alert.success { background:#e8f8ee; }
.siap-alert.warning { background:#fff6e5; }
.siap-alert.danger  { background:#ffecec; }
/* Make directory filter inputs breathe a bit */
#siap-dir-filter input[type="text"]{ min-width: 180px; }
/* ========= Admin → Edit User Profile ========= */
#siap-admin-profile .siap-card{
  background:#0e2743;            /* navy panel (like your screenshot) */
  color:#fff;
  border-radius:16px;
  padding:22px;
}

#siap-admin-profile .siap-card h3{
  margin:0 0 14px;
  font-size:26px;
  line-height:1.2;
  letter-spacing:.2px;
}

#siap-admin-profile hr{
  border:0; height:1px; background:rgba(255,255,255,.12);
  margin:10px 0 14px;
}

/* Grid rows */
#siap-admin-profile .siap-form .siap-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-bottom:12px;
}

/* Labels + controls */
#siap-admin-profile .siap-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
  font-size:14px;
  color:#e6edf6;
}

#siap-admin-profile .siap-form input,
#siap-admin-profile .siap-form select,
#siap-admin-profile .siap-form textarea{
  appearance:none;
  background:#ffffff;
  color:#0e2743;
  border:1px solid #d6dce6;
  border-radius:10px;
  padding:10px 12px;
  height:44px;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

#siap-admin-profile .siap-form textarea{
  height:auto; min-height:110px; resize:vertical;
}

#siap-admin-profile .siap-form input::placeholder,
#siap-admin-profile .siap-form textarea::placeholder{
  color:#7a8799;
}

/* Focus state (brand amber) */
#siap-admin-profile .siap-form input:focus,
#siap-admin-profile .siap-form select:focus,
#siap-admin-profile .siap-form textarea:focus{
  border-color:#ffb300;
  box-shadow:0 0 0 3px rgba(255,179,0,.25);
}

/* “User + Load” row tweaks */
#siap-prof-user{
  width:100%;
}
#siap-prof-load{
  height:44px;
  margin-left:8px;
}

/* Buttons */
#siap-admin-profile .siap-btn{
  background:#ffb300;
  color:#111;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease, transform .02s ease-in-out;
}
#siap-admin-profile .siap-btn:hover{ filter:brightness(.95); }
#siap-admin-profile .siap-btn:active{ transform:translateY(1px); }

#siap-admin-profile .siap-btn.outline{
  background:transparent;
  color:#ffb300;
  border:1.5px solid #ffb300;
}
#siap-admin-profile .siap-btn.xs{ padding:6px 10px; font-size:13px; }

/* Helper note text under the form */
#siap-admin-profile .siap-note{
  color:#c9d6e6;
}

/* Tables inside this card (if you add any later) */
#siap-admin-profile .siap-table th,
#siap-admin-profile .siap-table td{
  background:#0e2743;
  color:#fff;
  border-color:rgba(255,255,255,.12);
}
/* Early Check-In: make controls align perfectly */
#siap-early-box .siap-row{
  align-items: end;            /* bottom-align labels/controls */
}

#siap-early-box .siap-btn{
  height: 50px;                /* match input height */
  line-height: 22px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  #siap-admin-profile .siap-form .siap-row{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  #siap-admin-profile .siap-card{ padding:16px; border-radius:12px; }
  #siap-admin-profile .siap-card h3{ font-size:22px; }
  #siap-admin-profile .siap-form .siap-row{
    grid-template-columns: 1fr;
  }
  #siap-prof-load{ margin-left:0; }
}
/* Put space only once, on the body, when our topbar is present */
body.siap-portal-has-topbar { padding-top: 56px; }   /* match your topbar height */
@media (max-width: 782px){
  body.siap-portal-has-topbar { padding-top: 64px; } /* mobile topbar a bit taller */
}

/* Kill any theme page title / default spacing on portal pages */
.siap-portal-page .entry-title,
.siap-portal-page .page-title { display:none !important; }

/* Prevent “first child” top margins from creating a gap */
.siap-portal-page .entry-content > :first-child,
.siap-portal-page main > :first-child { margin-top: 0 !important; }

/* Some themes add container padding—neutralize it only on portal pages */
.siap-portal-page .site-content,
.siap-portal-page .content-area,
.siap-portal-page .container,
.siap-portal-page .wrap { padding-top: 0 !important; }
/* ===== Staff Login (wp_login_form) ===== */
.siap-card:has(#siap-loginform) {
  max-width: 520px;   /* nice readable width */
}

/* Headline spacing */
.siap-card:has(#siap-loginform) h3 {
  margin-bottom: 14px;
}

/* Stack fields vertically with good rhythm */
#siap-loginform p { 
  margin: 0 0 12px 0;
}

/* Labels */
#siap-loginform label {
  display: block;
  font-weight: 600;
  color: var(--siap-text);
  margin-bottom: 6px;
}

/* Text + password inputs */
#siap-loginform input[type="text"],
#siap-loginform input[type="password"] {
  width: 100%;
  height: 46px;
  background: #fff;
  color: #0e2743;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#siap-loginform input[type="text"]::placeholder,
#siap-loginform input[type="password"]::placeholder {
  color: #7a8799;
}

/* Focus (brand amber) */
#siap-loginform input[type="text"]:focus,
#siap-loginform input[type="password"]:focus {
  border-color: #ffb300;
  box-shadow: 0 0 0 3px rgba(255,179,0,.25);
}

/* Remember me row */
#siap-loginform .forgetmenot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
}
#siap-loginform .forgetmenot input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #ffb300;
}

/* Submit button – match portal buttons */
#siap-loginform .button-primary,
#siap-loginform input[type="submit"] {
  background: #ffb300;
  color: #111;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: filter .15s ease, transform .02s ease-in-out;
}
#siap-loginform .button-primary:hover,
#siap-loginform input[type="submit"]:hover { filter: brightness(.95); }
#siap-loginform .button-primary:active,
#siap-loginform input[type="submit"]:active { transform: translateY(1px); }

/* Keep the card comfy on small screens */
@media (max-width: 640px){
  .siap-card:has(#siap-loginform){ max-width: 100%; }
}
/* ================= Early Check-In – Admin ================= */
#siap-admin-early .siap-card {
  background: var(--siap-card);
  border: 1px solid var(--siap-border);
  color: var(--siap-text);
}

#siap-admin-early h3 {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Top filter/header row */
#siap-early-filter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 8px 0 14px !important;
}
#siap-early-filter h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--siap-muted);
}
#siap-early-filter .siap-note {
  margin: 0;
  justify-self: end;
  color: var(--siap-text);
  background: rgba(255, 179, 0, .12);
  border: 1px solid rgba(255, 179, 0, .35);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}
#siap-early-count { color: var(--siap-accent); }

/* Table polish */
#siap-admin-early .siap-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
}
#siap-admin-early .siap-table thead th {
  position: sticky; top: 0;
  background: #0c1f3d;
  color: #cfe0ff;
  border-bottom: 1px solid var(--siap-border);
  font-weight: 600;
  padding: 12px 10px;
}
#siap-admin-early .siap-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--siap-border);
  vertical-align: middle;
}
#siap-admin-early .siap-table tbody tr:hover {
  background: rgba(255,255,255,.03);
}

/* Compact actions */
#siap-admin-early .siap-btn.xs { padding: 6px 10px; border-radius: 10px; }
#siap-admin-early .siap-early-act[data-do="approve"]  { background: #20c997; color:#0b1b14; }
#siap-admin-early .siap-early-act[data-do="reject"]   { background: transparent; color:#ffe1e1; border:1px solid #ff6b6b; }
#siap-admin-early .siap-early-act[data-do="reject"]:hover { background:#ff6b6b; color:#111; }

/* Loading row shimmer */
#siap-early-body tr:only-child td.siap-note {
  position: relative; overflow: hidden;
}
#siap-early-body tr:only-child td.siap-note::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: siap-shimmer 1.4s infinite;
}
@keyframes siap-shimmer { from { transform: translateX(-100%);} to {transform: translateX(100%);} }

/* Responsive */
@media (max-width: 720px) {
  #siap-admin-early .siap-table thead { display:none; }
  #siap-admin-early .siap-table tr { display:grid; gap:6px; padding:10px 0; }
  #siap-admin-early .siap-table td { border:0; padding:2px 0; }
  #siap-admin-early .siap-table td::before {
    content: attr(data-label);
    display: block; color: var(--siap-muted); font-size: 12px; margin-bottom: 2px;
  }
}

/* ================= Early Check-In – Staff box ================= */
#siap-early-box {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--siap-card);
  border: 1px solid var(--siap-border);
  border-radius: 14px;
}
#siap-early-box h3 { margin-bottom: 10px; }

#siap-early-box .siap-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
}
#siap-early-box label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#cfe0ff; }
#siap-early-box input[type="time"],
#siap-early-box input[type="text"],
#siap-early-box input[type="datetime-local"]{
  height:44px; border-radius:10px;
  border:1px solid #d6dce6; background:#fff; color:#0e2743;
  padding: 8px 10px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#siap-early-box input:focus {
  border-color:#ffb300; box-shadow:0 0 0 3px rgba(255,179,0,.25);
}
#siap-early-box .siap-btn { align-self:end; }

#siap-early-msg {
  margin-top: 8px;
  font-size: 14px;
}
#siap-early-msg.success { color: #34d399; }
#siap-early-msg.error   { color: #ff6b6b; }

/* Small screens */
@media (max-width: 640px){
  #siap-early-box .siap-row { grid-template-columns: 1fr; }
}

/* ========== Generic niceties used by Early section too ========== */
.siap-table.zebra tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.siap-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 8px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,.08); color: var(--siap-text);
}
.siap-chip .dot { width:8px; height:8px; border-radius:50%; background: var(--siap-accent); }
/* Bell next to Logout (fixed to topbar’s right side) */
#siap-bell{
  position: fixed;
  top: 28px;               /* lowered slightly to align with Logout */
  right: 110px;           /* adjust spacing to line up horizontally */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;           /* match Logout button height */
  width: 45px;            /* similar width for balance */
  background: #ffb300;    /* same background as Logout */
  color: #111;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease-in-out;
}
#siap-bell:hover { filter: brightness(.95); }
#siap-bell:active { transform: translateY(1px); }

#siap-bell .siap-bell-icon{
  font-size: 18px;        /* slightly smaller for visual balance */
  line-height: 1;
}

#siap-bell .siap-bell-badge{
  position: absolute;
  top: 4px;
  right: 6px;
  background: #ff3b30;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}

/* Bell dropdown */
#siap-bell .siap-bell-dropdown{
  position: absolute;
  top: 46px;              /* just below bell */
  right: 0;
  min-width: 320px;
  max-width: 420px;
  background: #fff;
  color: #0e2743;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  overflow: auto;
  max-height: 60vh;
}



#siap-bell .siap-bell-icon{ font-size: 22px; line-height:1; }
#siap-bell .siap-bell-badge{
  background:#ff3b30; color:#fff; font-weight:700; border-radius:999px;
  padding:2px 6px; font-size:12px; line-height:1;
}

/* Bell dropdown */
#siap-bell .siap-bell-dropdown{
  position:absolute; top:36px; right:0; min-width:320px; max-width:420px;
  background:#fff; color:#0e2743; border:1px solid #d6dce6; border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  overflow:auto; max-height:60vh;
}
.siap-bell-item{ padding:12px 12px 10px; border-bottom:1px solid #eef2f7; }
.siap-bell-item:last-child{ border-bottom:none; }
.siap-bell-item .ttl{ font-weight:700; margin-bottom:4px; }
.siap-bell-item .rng{ color:#6b7a90; font-size:12px; margin-top:6px; display:block; }
.siap-bell-item.info    { border-left:4px solid #3b82f6; }
.siap-bell-item.success { border-left:4px solid #10b981; }
.siap-bell-item.warning { border-left:4px solid #f59e0b; }
.siap-bell-item.danger  { border-left:4px solid #ef4444; }

/* Modal */
.siap-notes-modal{ position:fixed; inset:0; z-index:10001; }
.siap-notes-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.siap-notes-dialog{
  position:relative; z-index:1;
  width:min(720px, 92vw); max-height:80vh; overflow:auto;
  margin:6vh auto 0; background:#fff; border-radius:14px; border:1px solid #e3e8f0;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.siap-notes-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid #eef2f7; font-size:18px;
}
.siap-notes-close{ background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; }
.siap-notes-body{ padding:16px; }
.siap-notes-body .siap-bell-item{ border:1px solid #eef2f7; border-radius:10px; margin-bottom:10px; }
.siap-notes-foot{ padding:12px 16px 16px; border-top:1px solid #eef2f7; display:flex; justify-content:flex-end; }
/* ===== Payslips UI polish ===== */

.siap-card--payslips { overflow: hidden; }

.ps-filter {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr auto;
  gap: 12px;
  align-items: end;
  margin: 8px 0 14px;
}
.ps-filter .field { display: flex; flex-direction: column; min-width: 0; }
.ps-filter .field > label { font-size: 12px; opacity: .85; margin-bottom: 6px; }
.ps-filter .ps-apply { height: 40px; padding: 0 18px; border-radius: 10px; }

@media (max-width: 900px){
  .ps-filter { grid-template-columns: 1fr; }
  .ps-filter .ps-apply { width: 100%; }
}

/* Table */
.siap-table--payslips {
  width: 100%;
  border-collapse: collapse;
  background: #0e2640; /* deep */
  border-radius: 12px;
  overflow: hidden;
}
.siap-table--payslips th,
.siap-table--payslips td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
.siap-table--payslips thead th {
  background: rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 12px;
}
.siap-table--payslips tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* Cells */
.ps-staff { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.ps-period, .ps-uploaded { font-variant-numeric: tabular-nums; }
.ps-note { color: #c7d2fe; opacity: .9; }

/* Buttons */
.ps-download, .ps-delete {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 9999px; font-weight: 600;
  border: 1px solid transparent; text-decoration: none;
}
.ps-download { background: #ffb300; color: #111; }
.ps-download:hover { filter: brightness(.95); }
.ps-delete { background: transparent; color: #ffd5d5; border-color: #ff6b6b40; }
.ps-delete:hover { background: #ff6b6b20; border-color: #ff6b6b70; }

/* Empty state */
.ps-empty {
  text-align: center; padding: 28px 12px; color: #cbd5e1;
}
/* ===== Payslips UI polish ===== */

.siap-card--payslips { overflow: hidden; }

.ps-filter {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr auto;
  gap: 12px;
  align-items: end;
  margin: 8px 0 14px;
}
.ps-filter .field { display: flex; flex-direction: column; min-width: 0; }
.ps-filter .field > label { font-size: 12px; opacity: .85; margin-bottom: 6px; }
.ps-filter .ps-apply { height: 40px; padding: 0 18px; border-radius: 10px; }

@media (max-width: 900px){
  .ps-filter { grid-template-columns: 1fr; }
  .ps-filter .ps-apply { width: 100%; }
}

/* Table */
.siap-table--payslips {
  width: 100%;
  border-collapse: collapse;
  background: #0e2640; /* deep */
  border-radius: 12px;
  overflow: hidden;
}
.siap-table--payslips th,
.siap-table--payslips td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
.siap-table--payslips thead th {
  background: rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 12px;
}
.siap-table--payslips tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* Cells */
.ps-staff { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.ps-period, .ps-uploaded { font-variant-numeric: tabular-nums; }
.ps-note { color: #c7d2fe; opacity: .9; }

/* Buttons */
.ps-download, .ps-delete {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 9999px; font-weight: 600;
  border: 1px solid transparent; text-decoration: none;
}
.ps-download { background: #ffb300; color: #111; }
.ps-download:hover { filter: brightness(.95); }
.ps-delete { background: transparent; color: #ffd5d5; border-color: #ff6b6b40; }
.ps-delete:hover { background: #ff6b6b20; border-color: #ff6b6b70; }

/* Empty state */
.ps-empty {
  text-align: center; padding: 28px 12px; color: #cbd5e1;
}

/* --- Fix month input alignment across sections --- */
.siap-form input[type="month"],
#siap-salary-filter input[type="month"],
.ps-filter input[type="month"],
#siap-admin-payroll .payslip-grid input[type="month"],
#siap-payslip-list-filter input[type="month"]{
  appearance: none;
  -webkit-appearance: none;   /* Chrome/Safari */
  height: 44px;               /* match other controls */
  line-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  background: #fff;
  color: #0e2743;
  font-size: 15px;
}

/* Keep the calendar icon aligned nicely */
.siap-form input[type="month"]::-webkit-calendar-picker-indicator,
#siap-salary-filter input[type="month"]::-webkit-calendar-picker-indicator,
.ps-filter input[type="month"]::-webkit-calendar-picker-indicator,
#siap-admin-payroll .payslip-grid input[type="month"]::-webkit-calendar-picker-indicator,
#siap-payslip-list-filter input[type="month"]::-webkit-calendar-picker-indicator{
  margin: 0 6px 0 0;
}

/* Ensure the row grids align controls to the bottom edge */
#siap-salary-filter,
.ps-filter,
#siap-payslip-list-filter,
#siap-admin-payroll .payslip-grid,
#siap-payroll-filter,
#siap-early-filter,
#siap-att-filter,
#siap-tasks-filter,
#siap-leaves-filter {
  align-items: end;
}

/* Match button height to inputs wherever they share a row */
#siap-salary-filter .siap-btn,
.ps-filter .siap-btn,
#siap-payslip-list-filter .siap-btn,
#siap-payroll-filter .siap-btn,
#siap-att-filter .siap-btn,
#siap-tasks-filter .siap-btn,
#siap-leaves-filter .siap-btn {
  height: 44px;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
/* 1) Stack label caption + control in Payslips filter */
#siap-payslip-list-filter label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* prevents overflow in grid */
}

/* 2) Normalize the month input without forcing a tall line-height */
#siap-payslip-list-filter input[type="month"]{
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  height: 44px;
  line-height: normal;         /* <-- don't stretch; avoids overlap */
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  background: #fff;
  color: #0e2743;
  font-size: 15px;
}
#siap-payslip-list-filter input[type="month"]::-webkit-calendar-picker-indicator{
  margin-right: 6px;
}
/* --- Portal spacing: use only the body pad, kill others --- */
body.siap-portal-has-topbar { padding-top: 56px; }
@media (max-width:782px){ body.siap-portal-has-topbar { padding-top: 64px; } }

/* remove any theme padding/margin that adds a gap on portal pages */
.siap-portal-page .entry-title,
.siap-portal-page .page-title { display:none !important; }

.siap-portal-page .entry-content > :first-child,
.siap-portal-page main > :first-child { margin-top:0 !important; }

.siap-portal-page .site-content,
.siap-portal-page .content-area,
.siap-portal-page .container,
.siap-portal-page .wrap,
.siap-portal-page main { padding-top:0 !important; margin-top:0 !important; }

/* (Optional) if your first card still sits low, clamp its own top margin */
.siap-portal-page .siap-card:first-of-type { margin-top: 0 !important; }

/* --- Bell (single definition; remove the duplicate block below) --- */
#siap-bell{
  position: fixed; top: 28px; right: 110px; z-index: 10000;
  display:flex; align-items:center; justify-content:center;
  height:40px; width:45px; background:#ffb300; color:#111;
  border-radius:8px; cursor:pointer; transition:filter .15s, transform .02s;
}
#siap-bell:hover { filter:brightness(.95); }
#siap-bell:active{ transform:translateY(1px); }
#siap-bell .siap-bell-icon{ font-size:18px; line-height:1; }
#siap-bell .siap-bell-badge{
  position:absolute; top:4px; right:6px; background:#ff3b30; color:#fff;
  font-weight:700; border-radius:999px; padding:2px 6px; font-size:12px; line-height:1;
}
#siap-bell .siap-bell-dropdown{
  position:absolute; top:46px; right:0; min-width:320px; max-width:420px;
  background:#fff; color:#0e2743; border:1px solid #d6dce6; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); overflow:auto; max-height:60vh;
}

/* --- Payslips blocks: keep only one set; this is the keeper --- */
.siap-card--payslips { overflow:hidden; }
.ps-filter{ display:grid; grid-template-columns:1.4fr .9fr auto; gap:12px; align-items:end; margin:8px 0 14px; }
.ps-filter .field{ display:flex; flex-direction:column; min-width:0; }
.ps-filter .field>label{ font-size:12px; opacity:.85; margin-bottom:6px; }
.ps-filter .ps-apply{ height:40px; padding:0 18px; border-radius:10px; }
@media (max-width:900px){ .ps-filter{ grid-template-columns:1fr; } .ps-filter .ps-apply{ width:100%; } }
.siap-table--payslips{ width:100%; border-collapse:collapse; background:#0e2640; border-radius:12px; overflow:hidden; }
.siap-table--payslips th, .siap-table--payslips td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle; }
.siap-table--payslips thead th{ background:rgba(255,255,255,.06); text-transform:uppercase; letter-spacing:.02em; font-size:12px; }
.siap-table--payslips tbody tr:hover{ background:rgba(255,255,255,.04); }
.ps-staff{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.ps-period,.ps-uploaded{ font-variant-numeric:tabular-nums; }
.ps-note{ color:#c7d2fe; opacity:.9; }
.ps-download,.ps-delete{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:9999px; font-weight:600; border:1px solid transparent; text-decoration:none; }
.ps-download{ background:#ffb300; color:#111; } .ps-download:hover{ filter:brightness(.95); }
.ps-delete{ background:transparent; color:#ffd5d5; border-color:#ff6b6b40; } .ps-delete:hover{ background:#ff6b6b20; border-color:#ff6b6b70; }
.ps-empty{ text-align:center; padding:28px 12px; color:#cbd5e1; }

/* --- Month inputs & row alignment (keep one copy) --- */
.siap-form input[type="month"],
#siap-salary-filter input[type="month"],
.ps-filter input[type="month"],
#siap-admin-payroll .payslip-grid input[type="month"],
#siap-payslip-list-filter input[type="month"]{
  appearance:none; -webkit-appearance:none; min-height:44px; height:44px; line-height:normal;
  padding:10px 12px; border:1px solid #d6dce6; border-radius:10px; background:#fff; color:#0e2743; font-size:15px;
}
.siap-form input[type="month"]::-webkit-calendar-picker-indicator,
#siap-salary-filter input[type="month"]::-webkit-calendar-picker-indicator,
.ps-filter input[type="month"]::-webkit-calendar-picker-indicator,
#siap-admin-payroll .payslip-grid input[type="month"]::-webkit-calendar-picker-indicator,
#siap-payslip-list-filter input[type="month"]::-webkit-calendar-picker-indicator{ margin-right:6px; }

#siap-salary-filter, .ps-filter, #siap-payslip-list-filter,
#siap-admin-payroll .payslip-grid, #siap-payroll-filter,
#siap-early-filter, #siap-att-filter, #siap-tasks-filter, #siap-leaves-filter { align-items:end; }

#siap-salary-filter .siap-btn, .ps-filter .siap-btn, #siap-payslip-list-filter .siap-btn,
#siap-payroll-filter .siap-btn, #siap-att-filter .siap-btn, #siap-tasks-filter .siap-btn, #siap-leaves-filter .siap-btn{
  height:44px; line-height:44px; padding-top:0; padding-bottom:0;
}
/* ===== SIAP Login (Refined Half-Width Card) ===== */
.siap-login {
  width: 50%;
  max-width: 480px;
  margin: 60px auto; /* centers horizontally */
  background: #0d2743;
  color: #fff;
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-align: left;
}

.siap-login h3 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 24px;
  font-weight: 600;
  color: #fff;
}

#siap-login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Fields */
#siap-login-form .field label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #e6eef9;
}
#siap-login-form .field input[type="text"],
#siap-login-form .field input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d9e2ef;
  background: #f5f7fb;
  color: #111;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#siap-login-form .field input:focus {
  border-color: #ffb300;
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25);
  outline: none;
}

/* Remember + Button row */
#siap-login-form .remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #e6eef9;
  margin-bottom: 4px;
}

#siap-login-form .siap-btn {
  background: #ffb300;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#siap-login-form .siap-btn:hover {
  background: #ffc533;
}
#siap-login-form .siap-btn:active {
  transform: translateY(1px);
}

/* Message */
#siap-login-msg {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 10px;
  border-radius: 6px;
  padding: 8px 10px;
}
#siap-login-msg:empty {
  display: none;
}
#siap-login-msg.success {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}
#siap-login-msg.error {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

/* Responsive (mobile view) */
@media (max-width: 768px) {
  .siap-login {
    width: 90%;
    padding: 28px 22px;
  }
}
/* Row with remember + forgot link */
.siap-login .row-between{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 2px;
}

.siap-login .siap-forgot-toggle{
  color:#ffc533; text-decoration:none; font-weight:600; font-size:.95rem;
}
.siap-login .siap-forgot-toggle:hover{ text-decoration:underline; }

/* Forgot form block */
.siap-login .siap-forgot{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.siap-login .siap-btn.outline{
  background:#fff; color:#0d2743; border:1px solid #fff;
}