:root{
  --pto-brand:#003ab9;
  --pto-gap:.5rem;
  --pto-toast-radius:12px;
  --pto-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Brand button */
.pto-wrap .btn-primary{background:var(--pto-brand);border-color:var(--pto-brand)}
.pto-wrap .btn-primary:hover{filter:brightness(1.05)}

/* Optional legacy classes */
.pto-card{border-radius:12px}
.pto-btn{background:var(--pto-brand);border-color:var(--pto-brand)}
.pto-btn:hover{filter:brightness(1.05)}

/* ----- Rows grid ----- */
.pto-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr auto auto;
  gap:var(--pto-gap);
  align-items:end;
}
.pto-row .form-label{margin-bottom:.25rem}
.pto-row + .pto-row{margin-top:var(--pto-gap)}

.pto-del{
  border:1px solid #ddd;background:#fff;border-radius:8px;
  height:38px;padding:0 12px;line-height:36px
}
.pto-del:hover{background:#ffe9e9;border-color:#f00}
.pto-day{display:flex;align-items:center;gap:.4rem;height:38px}

.pto-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}
.pto-tools .form-select-sm{min-width:120px}

/* Signature canvas */
canvas.sig{
  width:100%;height:200px;border-bottom:4px solid #222;
  touch-action:none;background:#fff
}

/* Responsive */
@media (max-width:992px){
  .pto-row{grid-template-columns:1fr 1fr}
  .pto-row > div:nth-child(3){grid-column:2 / 3}
  .pto-row > div:nth-child(4){grid-column:1 / 2}
  .pto-row > div:nth-child(5){grid-column:2 / 3;justify-self:end}
}
@media (max-width:576px){
  .pto-row{grid-template-columns:1fr}
  .pto-row > div{grid-column:1 / -1 !important}
  .pto-tools{width:100%}
  .pto-tools > *{flex:1 1 150px}
}

/* ----- Loading overlay (only during submit) ----- */
.pto-wrap .card{position:relative}
.pto-overlay{
  position:absolute;inset:0;background:rgba(255,255,255,.75);
  display:none;z-index:5;align-items:center;justify-content:center
}
.pto-wrap.loading .pto-overlay{display:flex}
.pto-wrap.loading .card > :not(.pto-overlay){opacity:.75}

/* ----- Client-side validation ----- */
.is-invalid{border-color:#dc3545 !important}
.pto-invalid-note{color:#dc3545;font-size:.875rem;margin-top:.25rem}

/* ----- Toast (top-right desktop, bottom mobile) ----- */
@keyframes pto-toast-in{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
.pto-toast{
  position:fixed;right:16px;top:16px;max-width:420px;background:#fff;
  border:1px solid #e5e7eb;border-left:6px solid var(--pto-brand);
  border-radius:var(--pto-toast-radius);box-shadow:var(--pto-shadow);
  z-index:1065;padding:12px 44px 12px 14px;animation:pto-toast-in .18s ease-out
}
.pto-toast.error{border-left-color:#dc3545}
.pto-toast .pto-title{font-weight:600;margin-bottom:2px}
.pto-toast .pto-msg{color:#374151}
.pto-toast .pto-close{
  position:absolute;top:8px;right:10px;border:0;background:transparent;
  font-size:20px;line-height:1;cursor:pointer;color:#6b7280
}
.pto-toast .pto-close:hover{color:#111}
@media (max-width:576px){
  .pto-toast{left:12px;right:12px;top:auto;bottom:12px;max-width:none}
}

/* ----- Success / Thank-you view (Font Awesome icon) ----- */
.pto-success{ text-align:center; }
.pto-success-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background: rgba(0,0,0,.03); color: var(--pto-brand);
  margin-bottom:.5rem;
}
.pto-success-icon .fa-circle-check{ font-size:28px; line-height:1; }