.vacation-page-actions { display:flex; gap:10px; flex-wrap:wrap; }
.vacation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.vacation-summary-card { min-height:118px; padding:20px; border:1px solid var(--border, #dce4ee); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(15,42,77,.045); }
.vacation-summary-card span { display:block; color:#687a92; font-size:12px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.vacation-summary-card strong { display:block; margin:8px 0 3px; color:#10243f; font-size:30px; line-height:1; }
.vacation-summary-card small { color:#8090a5; }
.vacation-summary-card.is-danger { border-color:#ffd7d7; background:#fffafa; }
.vacation-summary-card.is-warning { border-color:#ffe3bc; background:#fffdf8; }
.vacation-summary-card.is-active { border-color:#c6eddf; background:#fbfffd; }
.vacation-panel { overflow:hidden; }
.vacation-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) repeat(2,minmax(170px,220px)) auto; gap:12px; align-items:center; padding:18px 20px; border-bottom:1px solid #e5ebf2; }
.vacation-toolbar .search { width:100%; }
.vacation-toolbar select { width:100%; min-height:42px; padding:0 38px 0 14px; border:1px solid #d8e1ec; border-radius:12px; background:#fff; color:#24364f; }
.vacation-table-wrap { overflow:auto; }
.vacation-table { width:100%; border-collapse:collapse; min-width:1050px; }
.vacation-table th { padding:12px 16px; background:#f7f9fc; color:#718198; font-size:11px; letter-spacing:.04em; text-align:left; }
.vacation-table td { padding:16px; border-top:1px solid #e8edf3; color:#283a52; vertical-align:top; }
.vacation-person { display:flex; align-items:center; gap:10px; min-width:210px; }
.vacation-person-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:#e9f1ff; color:#275fc3; font-size:11px; font-weight:800; }
.vacation-person strong,.vacation-period strong { display:block; color:#12233c; }
.vacation-person small,.vacation-period small { color:#8090a5; }
.vacation-days { display:grid; grid-template-columns:repeat(3,minmax(52px,1fr)); gap:6px; min-width:190px; }
.vacation-days span { padding:8px 7px; border-radius:10px; background:#f5f8fc; text-align:center; }
.vacation-days small { display:block; color:#8492a6; font-size:9px; text-transform:uppercase; }
.vacation-days b { color:#20344f; font-size:14px; }
.vacation-status { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:999px; background:#edf3ff; color:#2e64c5; font-size:11px; font-weight:800; white-space:nowrap; }
.vacation-status.expired,.vacation-status.cancelled { background:#fff0f0; color:#c74343; }
.vacation-status.completed { background:#eef9f5; color:#14805f; }
.vacation-status.scheduled,.vacation-status.approved,.vacation-status.in_progress { background:#eef9f5; color:#087c60; }
.vacation-deadline.is-close { color:#cf6b17; font-weight:750; }
.vacation-deadline.is-late { color:#d34242; font-weight:800; }
.vacation-grants { display:flex; flex-direction:column; gap:7px; min-width:250px; }
.vacation-grant { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid #e1e8f1; border-radius:11px; background:#fbfcfe; }
.vacation-grant button { border:0; background:transparent; color:#3469c9; font-weight:750; cursor:pointer; }
.vacation-grant small { display:block; color:#7b8ba1; }
.vacation-row-actions { display:flex; gap:7px; justify-content:flex-end; }
.vacation-row-actions button { min-height:34px; padding:0 11px; border:1px solid #d8e2ef; border-radius:10px; background:#fff; color:#2e5fae; font-weight:750; cursor:pointer; white-space:nowrap; }
.vacation-empty { padding:52px 24px; text-align:center; color:#708096; }
.vacation-empty strong { display:block; margin-bottom:5px; color:#263a56; font-size:17px; }
.vacation-load-error { margin:18px; padding:16px; border:1px solid #ffd7d7; border-radius:14px; background:#fff7f7; color:#9d3939; }
.vacation-dialog { width:min(720px,calc(100vw - 28px)); max-height:calc(100vh - 34px); padding:0; border:0; border-radius:20px; }
.vacation-dialog::backdrop { background:rgba(16,31,52,.5); }
.vacation-dialog-scroll { max-height:calc(100vh - 34px); overflow:auto; padding:28px; }
.vacation-dialog h2 { margin:3px 0 5px; color:#172940; }
.vacation-dialog .dialog-subtitle { margin:0 0 22px; color:#76879d; }
.vacation-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.vacation-form-grid label { display:flex; flex-direction:column; gap:6px; color:#40516a; font-size:12px; font-weight:750; }
.vacation-form-grid .span-2 { grid-column:1/-1; }
.vacation-form-grid input,.vacation-form-grid select,.vacation-form-grid textarea { width:100%; min-height:43px; padding:10px 12px; border:1px solid #d6e0eb; border-radius:11px; color:#172940; background:#fff; font:inherit; font-weight:600; }
.vacation-form-grid textarea { min-height:78px; resize:vertical; }
.vacation-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; padding:10px 13px; border:1px solid #dce5ef; border-radius:12px; }
.vacation-toggle-row input { width:42px; min-height:22px; accent-color:#356ee5; }
.vacation-compliance { grid-column:1/-1; padding:13px 15px; border-radius:12px; background:#f5f8fd; color:#52657f; font-size:12px; line-height:1.5; }
.vacation-compliance.warning { background:#fff7ec; color:#985519; }
.vacation-compliance.danger { background:#fff0f0; color:#ab3737; }
.vacation-form-message { min-height:20px; margin:12px 0 0; color:#b33f3f; font-size:12px; }
.vacation-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
@media (max-width:1050px) { .vacation-summary { grid-template-columns:repeat(2,1fr); } .vacation-toolbar { grid-template-columns:1fr 1fr; } .vacation-toolbar .search { grid-column:1/-1; } }
@media (max-width:640px) { .vacation-summary { grid-template-columns:1fr; } .vacation-toolbar,.vacation-form-grid { grid-template-columns:1fr; } .vacation-form-grid .span-2 { grid-column:auto; } .vacation-dialog-scroll { padding:22px 18px; } }