/* Shared skin fixes for BOTH admin and employee apps.
   Imported by admin/daylight.css and employee/daylight.css.
   Put anything that should apply to both apps HERE, not in either copy. */

html body a.btn-primary, html body a.btn-primary:hover, html body a.btn-primary:focus, html body a.btn-primary:active,
html body a.btn-success, html body a.btn-success:hover, html body a.btn-success:focus, html body a.btn-success:active,
html body a.btn-danger, html body a.btn-danger:hover, html body a.btn-danger:focus, html body a.btn-danger:active,
html body a.btn-info, html body a.btn-info:hover, html body a.btn-info:focus, html body a.btn-info:active,
html body a.btn-warning, html body a.btn-warning:hover, html body a.btn-warning:focus, html body a.btn-warning:active{ color:#ffffff !important; }
html body a.btn-default, html body a.btn-default:hover, html body a.btn-default:focus{ color:#2b3a4a !important; }

.daterangepicker td.available, .daterangepicker th.available, .daterangepicker th.month{ color:#243b53 !important; }
.daterangepicker td.off, .daterangepicker td.off.available{ color:#b6c2cf !important; }
.daterangepicker td.in-range{ background-color:#e6edf7 !important; color:#243b53 !important; }
.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.start-date, .daterangepicker td.end-date, .daterangepicker td.in-range.active{ background-color:#1b3a6b !important; color:#ffffff !important; }
.daterangepicker td.today{ font-weight:700 !important; box-shadow:inset 0 0 0 2px #8a5c0f !important; }
.daterangepicker td.today.active{ color:#ffffff !important; }
/* ===== Login preview ===== */
html body.login-page{ background:linear-gradient(160deg,#F4F8FD 0%,#DFEAF8 55%,#C7DAF0 100%) !important; min-height:100vh !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; }
html body .login-box{ width:100% !important; max-width:400px !important; margin:0 !important; }
html body .login-logo{ margin-bottom:20px !important; text-align:center !important; }
html body .login-logo, html body .login-logo a, html body .login-logo b{ color:#0F2A4A !important; font-weight:700 !important; }
html body .login-box-body{ background:#FFFFFF !important; border:0 !important; border-radius:16px !important; padding:30px 28px !important; box-shadow:0 10px 28px rgba(15,42,74,.13),0 2px 8px rgba(15,42,74,.08) !important; }
html body .login-box-msg{ color:#64748B !important; font-weight:500 !important; padding:0 0 18px !important; }
html body .login-box-body .form-group{ margin-bottom:14px !important; }
html body .login-box-body .form-control{ height:46px !important; border-radius:10px !important; border:1px solid #E4EAF2 !important; padding:10px 14px !important; box-shadow:none !important; }
html body .login-box-body .form-control:focus{ border-color:#1E40AF !important; box-shadow:0 0 0 3px rgba(30,64,175,.16) !important; }
html body .login-box-body .form-control-feedback{ line-height:46px !important; color:#94A3B8 !important; right:6px !important; }
html body .login-box-body .col-xs-4{ width:100% !important; float:none !important; padding:0 !important; }
html body .login-box-body .btn-primary{ height:46px !important; border-radius:10px !important; background:#123C6B !important; border-color:#123C6B !important; font-weight:600 !important; box-shadow:0 2px 8px rgba(18,60,107,.32) !important; transition:background .15s, transform .1s !important; }
html body .login-box-body .btn-primary:hover, html body .login-box-body .btn-primary:focus{ background:#0B2A4A !important; border-color:#0B2A4A !important; }
html body .login-box-body .btn-primary:active{ transform:translateY(1px) !important; }

/* --- collapsed flyout submenu: floats over page content, needs a solid ground --- */
body.sidebar-collapse .sidebar-menu > li > .treeview-menu{ background:#1B2A41 !important; border-radius:0 8px 8px 0 !important; box-shadow:0 10px 24px rgba(2,12,27,.28) !important; padding:6px 0 !important; }
body.sidebar-collapse .sidebar-menu > li > .treeview-menu > li > a{ color:#DBE3EF !important; padding:8px 16px !important; }
body.sidebar-collapse .sidebar-menu > li > .treeview-menu > li > a:hover{ background:rgba(255,255,255,.09) !important; color:#FFFFFF !important; }
body.sidebar-collapse .sidebar-menu > li > .treeview-menu > li.active > a{ color:#FFFFFF !important; font-weight:600 !important; }
/* --- table action buttons: quiet until hovered --- */
html body td .btn-success{ background:#E3F2E8 !important; color:#1E5631 !important; border:1px solid #C6E2D0 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body td .btn-success:hover, html body td .btn-success:focus{ background:#2E7D46 !important; color:#FFFFFF !important; border-color:#2E7D46 !important; }
html body td .btn-danger{ background:#FBE4E4 !important; color:#A12525 !important; border:1px solid #F0C8C8 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body td .btn-danger:hover, html body td .btn-danger:focus{ background:#C0392B !important; color:#FFFFFF !important; border-color:#C0392B !important; }
html body td .btn-info{ background:#E2EEF7 !important; color:#1A5A80 !important; border:1px solid #C5DCED !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body td .btn-info:hover, html body td .btn-info:focus{ background:#2B7FB8 !important; color:#FFFFFF !important; border-color:#2B7FB8 !important; }
html body td .btn-primary{ background:#E4EBFA !important; color:#1E40AF !important; border:1px solid #C9D8F5 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body td .btn-primary:hover, html body td .btn-primary:focus{ background:#1E40AF !important; color:#FFFFFF !important; border-color:#1E40AF !important; }

/* --- pagination spacing --- */
html body .dataTables_paginate .pagination{ display:inline-flex !important; gap:6px !important; }
html body .dataTables_paginate .pagination > li > a, html body .dataTables_paginate .pagination > li > span{ border-radius:8px !important; border:1px solid #DDE5EE !important; padding:6px 13px !important; color:#475569 !important; font-weight:500 !important; }
html body .dataTables_paginate .pagination > li > a:hover{ background:#F1F5F9 !important; color:#1E293B !important; }
html body .dataTables_paginate .pagination > .active > a, html body .dataTables_paginate .pagination > .active > a:hover{ background:#1E40AF !important; border-color:#1E40AF !important; color:#FFFFFF !important; }
html body .dataTables_paginate .pagination > .disabled > a, html body .dataTables_paginate .pagination > .disabled > span{ opacity:.45 !important; }

/* --- pagination polish: breathing room + legible disabled state --- */
html body .dataTables_paginate, html body .dataTables_info{ margin-top:18px !important; }
html body .dataTables_paginate .pagination > .disabled > a, html body .dataTables_paginate .pagination > .disabled > span{ opacity:1 !important; color:#8A97A8 !important; }
/* --- employee list polish (preview) --- */
html body table.dataTable tbody img{ width:34px !important; height:34px !important; border-radius:50% !important; object-fit:cover !important; border:1px solid #E4EAF2 !important; }
html body table.dataTable tbody tr:hover > td{ background:#F7FAFD !important; }

/* --- export buttons outline; destructive stays solid --- */
html body .btn-export.btn-success{ background:transparent !important; color:#1E7A45 !important; border:1px solid #B9DCC8 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body .btn-export.btn-success:hover, html body .btn-export.btn-success:focus{ background:#1E7A45 !important; color:#FFFFFF !important; border-color:#1E7A45 !important; }
html body .btn-export.btn-danger{ background:transparent !important; color:#B3392B !important; border:1px solid #E8BCB6 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body .btn-export.btn-danger:hover, html body .btn-export.btn-danger:focus{ background:#C0392B !important; color:#FFFFFF !important; border-color:#C0392B !important; }
/* --- employee modal: two-column layout (preview) --- */
html body #addEmployee .modal-dialog, html body #edit .modal-dialog{ width:auto !important; max-width:940px !important; }
html body #addEmployee .modal-body, html body #edit .modal-body{ display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:24px !important; }
html body #addEmployee .modal-body > .form-group, html body #edit .modal-body > .form-group{ margin-bottom:14px !important; }
html body #addEmployee label, html body #edit label{ font-size:12px !important; font-weight:600 !important; color:#475569 !important; margin-bottom:5px !important; }
html body #addEmployee .form-control, html body #edit .form-control{ height:40px !important; border-radius:8px !important; border:1px solid #E4EAF2 !important; box-shadow:none !important; }
html body #addEmployee .form-control:focus, html body #edit .form-control:focus{ border-color:#1E40AF !important; box-shadow:0 0 0 3px rgba(30,64,175,.14) !important; }
html body #addEmployee textarea.form-control, html body #edit textarea.form-control{ height:auto !important; min-height:72px !important; }
html body #addEmployee .modal-footer, html body #edit .modal-footer{ position:sticky !important; bottom:0 !important; background:#FFFFFF !important; border-top:1px solid #E4EAF2 !important; }

/* --- employee modal: wider, no overflow --- */
html body #addEmployee .modal-dialog, html body #edit .modal-dialog{ width:auto !important; max-width:1080px !important; }
html body #addEmployee .modal-body, html body #edit .modal-body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:30px !important; align-items:start !important; overflow-x:hidden !important; padding:20px 26px !important; }
html body #addEmployee .modal-body > .form-group, html body #edit .modal-body > .form-group{ min-width:0 !important; }
html body #addEmployee textarea.form-control{ min-height:40px !important; height:40px !important; }

/* --- employee modal section headings --- */
html body #addEmployee .modal-body > .emp-sec, html body #edit .modal-body > .emp-sec{ grid-column:1 / -1 !important; margin:24px 0 8px !important; padding-top:14px !important; border-top:1px solid #E4EAF2 !important; font-size:13.5px !important; font-weight:800 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:#334155 !important; }
/* --- schedule grid (preview) --- */
html body table:has(.schedcell){ border-collapse:separate !important; border-spacing:0 !important; }
html body table:has(.schedcell) thead th{ position:sticky !important; top:0 !important; z-index:3 !important; background:#F4F7FB !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.05em !important; color:#475569 !important; vertical-align:middle !important; }
html body table:has(.schedcell) tr > *:first-child{ position:sticky !important; left:0 !important; z-index:2 !important; background:#FFFFFF !important; box-shadow:1px 0 0 #E4EAF2 !important; }
html body table:has(.schedcell) thead th:first-child{ z-index:4 !important; background:#F4F7FB !important; }
html body table:has(.schedcell) tr > *:nth-child(2), html body table:has(.schedcell) tr > *:nth-child(8){ background:#FAFAFD !important; }
html body table:has(.schedcell) tbody tr:hover > td{ background:#F5F9FE !important; }
html body table:has(.schedcell) td.schedcell{ vertical-align:middle !important; padding:8px !important; }

/* --- sidebar label wrap: icon stays inline, text wraps beside it --- */
body:not(.sidebar-collapse) .sidebar-menu > li > a{ display:flex !important; align-items:flex-start !important; gap:8px !important; white-space:normal !important; height:auto !important; padding-top:11px !important; padding-bottom:11px !important; }
body:not(.sidebar-collapse) .sidebar-menu > li > a > i{ flex:0 0 20px !important; margin:2px 0 0 !important; }
body:not(.sidebar-collapse) .sidebar-menu > li > a > span{ flex:1 1 auto !important; min-width:0 !important; white-space:normal !important; line-height:1.3 !important; }
body:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li > a{ white-space:normal !important; height:auto !important; line-height:1.35 !important; }


/* --- date picker: presets beside calendars, single-line labels --- */
.daterangepicker .ranges{ float:left !important; width:auto !important; margin:0 !important; padding:8px 0 !important; border-right:1px solid #EDF1F6 !important; }
.daterangepicker .ranges ul{ width:auto !important; min-width:186px !important; margin:0 !important; }
.daterangepicker .ranges li:hover{ background:#EEF2F8 !important; }
.daterangepicker .ranges li.active{ background:#123C6B !important; color:#FFFFFF !important; }
.daterangepicker .calendar, .daterangepicker .drp-calendar{ float:left !important; padding:10px !important; }
.daterangepicker th.month{ font-weight:700 !important; color:#0F2A4A !important; }
.daterangepicker .range_inputs, .daterangepicker .drp-buttons{ clear:both !important; border-top:1px solid #EDF1F6 !important; padding:10px 12px !important; text-align:right !important; }
.daterangepicker .applyBtn{ background:#123C6B !important; border-color:#123C6B !important; border-radius:8px !important; font-weight:600 !important; }
.daterangepicker .cancelBtn{ border-radius:8px !important; }

/* --- picker flex layout: presets left, calendars right, buttons below --- */
.daterangepicker .calendar-table td, .daterangepicker .calendar-table th{ padding:4px !important; }

/* --- picker min width: presets wrap below the calendars without room to sit beside them --- */
@media (min-width: 860px){
  .daterangepicker.show-calendar{ min-width:760px !important; }
}

/* --- picker polish: cosmetic only, no layout model changes --- */
.daterangepicker:before, .daterangepicker:after{ display:none !important; }
.daterangepicker{ border:1px solid #D8E0EA !important; border-radius:12px !important; box-shadow:0 14px 34px rgba(15,42,74,.18) !important; }
.daterangepicker .ranges li{ background:#FFFFFF !important; border:1px solid #E4EAF2 !important; border-radius:8px !important; color:#334155 !important; font-size:12.5px !important; font-weight:500 !important; padding:9px 12px !important; margin:0 0 6px 0 !important; }
.daterangepicker .ranges li:hover{ background:#EEF2F8 !important; border-color:#C9D6E5 !important; color:#0F2A4A !important; }
.daterangepicker .ranges li.active{ background:#123C6B !important; border-color:#123C6B !important; color:#FFFFFF !important; font-weight:600 !important; }
.daterangepicker .input-mini{ border:1px solid #E4EAF2 !important; border-radius:8px !important; height:36px !important; font-size:13px !important; }
.daterangepicker .calendar-table td{ border-radius:6px !important; }
.daterangepicker .applyBtn{ background:#123C6B !important; border-color:#123C6B !important; border-radius:8px !important; font-weight:600 !important; }
.daterangepicker .cancelBtn{ border-radius:8px !important; border:1px solid #D8E0EA !important; background:#FFFFFF !important; color:#475569 !important; }

/* --- ranges heading --- */
.daterangepicker .ranges::before{ content:"RANGE"; display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748B; padding:2px 2px 9px; }

/* CSV export: outline to match PDF and Excel */
html body .btn-export.btn-warning{ background:transparent !important; color:#8A6100 !important; border:1px solid #E8D3A0 !important; box-shadow:none !important; transition:background .15s,color .15s !important; }
html body .btn-export.btn-warning:hover, html body .btn-export.btn-warning:focus{ background:#8A6100 !important; color:#FFFFFF !important; border-color:#8A6100 !important; }