/* =========================================================
   KsTU HR — Custom theme overlay for AdminLTE 3
   Palette taken from the KsTU crest (NIMDEE HYEREN)
   Primary (navy)  : #0D2A5C
   Primary dark    : #081E46
   Primary light   : #1E4384
   Accent (gold)   : #D4A437
   Accent light    : #F1C45A
   Accent dark     : #A97E1E
   ========================================================= */

:root {
    --kstu-primary: #0D2A5C;
    --kstu-primary-dark: #081E46;
    --kstu-primary-light: #1E4384;
    --kstu-accent: #D4A437;
    --kstu-accent-light: #F1C45A;
    --kstu-accent-dark: #A97E1E;
    --kstu-bg-soft: #F4F6FA;
    --kstu-text: #232a3b;
}

/* ------- Sidebar ---------------------------------------- */
.sidebar-dark-kstu {
    background-color: var(--kstu-primary);
}

.sidebar-dark-kstu .brand-link {
    background-color: var(--kstu-primary-dark);
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.3px;
}

.sidebar-dark-kstu .user-panel {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sidebar-dark-kstu .user-panel .info a {
    color: #fff;
    font-weight: 600;
}

.sidebar-dark-kstu .nav-sidebar .nav-link {
    color: #d3d8e0;
    transition: all 0.2s ease-in-out;
}

.sidebar-dark-kstu .nav-sidebar .nav-link p {
    font-size: 0.92rem;
}

.sidebar-dark-kstu .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-kstu .nav-sidebar .nav-treeview .nav-link.active {
    background-color: var(--kstu-accent);
    color: var(--kstu-primary-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-weight: 600;
}

.sidebar-dark-kstu .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: var(--kstu-primary-light);
    color: #fff;
}

.sidebar-dark-kstu .nav-sidebar .nav-link:hover {
    background-color: var(--kstu-primary-light);
    color: #fff;
}

.sidebar-dark-kstu .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.2rem;
    color: #b9c0ca;
}

.sidebar-dark-kstu .brand-image {
    background: #fff;
    padding: 2px;
}

/* ------- Top navbar ------------------------------------- */
.main-header.navbar-kstu {
    background-color: #ffffff;
    border-bottom: 3px solid var(--kstu-accent);
    box-shadow: 0 2px 6px rgba(13, 42, 92, 0.08);
}

.main-header.navbar-kstu .nav-link {
    color: var(--kstu-primary) !important;
    font-weight: 500;
}

.main-header.navbar-kstu .nav-link:hover {
    color: var(--kstu-accent-dark) !important;
}

/* ------- Content area ----------------------------------- */
body.hold-transition {
    background-color: var(--kstu-bg-soft);
    font-family: "Source Sans Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.content-wrapper {
    background-color: var(--kstu-bg-soft);
}

/* Tighter padding around content to avoid the "airy/washed-out" feel */
.content-header {
    padding: 10px 0 0 0;
}

.content > .container-fluid {
    padding-top: 0.75rem;
}

.content-header > .container-fluid,
.content > .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
}

.content-header h1,
.content-header h3 {
    color: var(--kstu-primary);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--kstu-primary);
}

.breadcrumb-item.active {
    color: var(--kstu-accent-dark);
}

/* ------- Cards ------------------------------------------ */
.card {
    border: 0;
    box-shadow: 0 1px 3px rgba(13, 42, 92, 0.08), 0 1px 2px rgba(13, 42, 92, 0.1);
    border-radius: 6px;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f4;
    font-weight: 600;
}

.card-primary.card-outline {
    border-top: 3px solid var(--kstu-primary);
}

.card-accent.card-outline {
    border-top: 3px solid var(--kstu-accent);
}

.card-header .card-title {
    color: var(--kstu-primary);
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* ------- Buttons ---------------------------------------- */
.btn-primary,
.btn-kstu {
    background-color: var(--kstu-primary);
    border-color: var(--kstu-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-kstu:hover {
    background-color: var(--kstu-primary-dark);
    border-color: var(--kstu-primary-dark);
    color: #fff;
}

.btn-accent,
.btn-kstu-accent {
    background-color: var(--kstu-accent);
    border-color: var(--kstu-accent);
    color: var(--kstu-primary-dark);
    font-weight: 600;
}

.btn-accent:hover,
.btn-kstu-accent:hover {
    background-color: var(--kstu-accent-dark);
    border-color: var(--kstu-accent-dark);
    color: #fff;
}

.btn-outline-kstu {
    background: transparent;
    border-color: var(--kstu-primary);
    color: var(--kstu-primary);
}

.btn-outline-kstu:hover {
    background: var(--kstu-primary);
    color: #fff;
}

/* ------- Small stat cards ------------------------------ */
.small-box.bg-kstu-primary {
    background: linear-gradient(135deg, var(--kstu-primary) 0%, var(--kstu-primary-light) 100%);
    color: #fff;
}

.small-box.bg-kstu-accent {
    background: linear-gradient(135deg, var(--kstu-accent) 0%, var(--kstu-accent-light) 100%);
    color: var(--kstu-primary-dark);
}

.small-box.bg-kstu-accent .icon > i,
.small-box.bg-kstu-accent h3,
.small-box.bg-kstu-accent p {
    color: var(--kstu-primary-dark);
}

.small-box > .small-box-footer {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.small-box.bg-kstu-accent > .small-box-footer {
    color: var(--kstu-primary-dark);
    background: rgba(0, 0, 0, 0.06);
}

/* ------- Tables ----------------------------------------- */
.table thead th {
    background-color: var(--kstu-primary);
    color: #fff;
    border-bottom: 0;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(13, 42, 92, 0.03);
}

.table-hover tbody tr:hover {
    background-color: rgba(212, 164, 55, 0.08);
}

/* Make tables inside flush card-body (.card-body.p-0) always span full width */
.card-body.p-0 > .table-responsive,
.card-body.p-0 > .dataTables_wrapper {
    width: 100%;
}

.card-body.p-0 > .table-responsive > table,
.card-body.p-0 .dataTables_wrapper table {
    width: 100% !important;
    margin-bottom: 0;
}

/* Add gentle padding to DataTables search/info/pagination UI so they don't
   stick to the card edges when the card-body is flush (p-0). */
.card-body.p-0 .dataTables_wrapper .dataTables_length,
.card-body.p-0 .dataTables_wrapper .dataTables_filter,
.card-body.p-0 .dataTables_wrapper .dataTables_info,
.card-body.p-0 .dataTables_wrapper .dataTables_paginate {
    padding: 10px 14px;
}

.card-body.p-0 .dataTables_wrapper .dataTables_info {
    padding-top: 14px;
}

/* ------- Forms ------------------------------------------ */
.form-control:focus {
    border-color: var(--kstu-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(13, 42, 92, 0.12);
}

label {
    color: var(--kstu-primary);
    font-weight: 500;
}

/* ------- Login page ------------------------------------- */
body.hold-transition.login-page,
body.hold-transition.register-page {
    background: linear-gradient(135deg, var(--kstu-primary) 0%, var(--kstu-primary-dark) 100%);
    min-height: 100vh;
    position: relative;
}

.login-page::before,
.register-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('../../images/ho_banner.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    z-index: 0;
}

.login-page::after,
.register-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 42, 92, 0.82) 0%, rgba(8, 30, 70, 0.92) 100%);
    z-index: 0;
}

.login-box,
.register-box {
    position: relative;
    z-index: 1;
    width: 420px;
    max-width: 96%;
}

.login-logo,
.register-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    margin-bottom: 18px;
}

.login-logo img,
.register-logo img {
    width: 86px;
    height: auto;
    background: #fff;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
}

.login-logo b,
.register-logo b {
    color: var(--kstu-accent);
    font-size: 1.2rem;
    letter-spacing: 0.4px;
}

.login-card-body,
.register-card-body {
    border-top: 4px solid var(--kstu-accent);
    border-radius: 6px !important;
}

.login-box-msg {
    color: var(--kstu-primary);
    font-weight: 600;
}

/* ------- Glyphicon → Font Awesome shim ------------------
   Bootstrap 3 shipped with Glyphicons, but AdminLTE 3 / Bootstrap 4 dropped
   them. Several legacy widgets (e.g. the easyTree plugin used on the
   organizational structure page) still emit .glyphicon .glyphicon-<name>
   markup. This shim renders those via Font Awesome 5 so buttons that used
   to show "+" "pencil" etc. keep working without editing vendor JS.         */
.glyphicon {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    line-height: 1;
}

.glyphicon::before { display: inline-block; }

.glyphicon-plus::before,
.glyphicon-plus-sign::before           { content: "\f067"; } /* + */
.glyphicon-minus::before,
.glyphicon-minus-sign::before          { content: "\f068"; } /* - */
.glyphicon-remove::before,
.glyphicon-remove-sign::before,
.glyphicon-remove-circle::before       { content: "\f00d"; } /* × */
.glyphicon-ok::before,
.glyphicon-ok-sign::before,
.glyphicon-ok-circle::before           { content: "\f00c"; } /* check */
.glyphicon-edit::before,
.glyphicon-pencil::before              { content: "\f303"; } /* pencil-alt */
.glyphicon-trash::before               { content: "\f2ed"; } /* trash-alt */
.glyphicon-folder-open::before         { content: "\f07c"; }
.glyphicon-folder-close::before        { content: "\f07b"; }
.glyphicon-file::before                { content: "\f15b"; }
.glyphicon-search::before              { content: "\f002"; }
.glyphicon-refresh::before             { content: "\f021"; }
.glyphicon-cog::before                 { content: "\f013"; }
.glyphicon-user::before                { content: "\f007"; }
.glyphicon-home::before                { content: "\f015"; }
.glyphicon-print::before               { content: "\f02f"; }
.glyphicon-download::before,
.glyphicon-download-alt::before        { content: "\f019"; }
.glyphicon-upload::before              { content: "\f093"; }
.glyphicon-chevron-left::before,
.glyphicon-menu-left::before           { content: "\f053"; }
.glyphicon-chevron-right::before,
.glyphicon-menu-right::before          { content: "\f054"; }
.glyphicon-chevron-up::before,
.glyphicon-menu-up::before             { content: "\f077"; }
.glyphicon-chevron-down::before,
.glyphicon-menu-down::before           { content: "\f078"; }
.glyphicon-th-list::before             { content: "\f00b"; }
.glyphicon-th::before                  { content: "\f00a"; }
.glyphicon-eye-open::before            { content: "\f06e"; }
.glyphicon-eye-close::before           { content: "\f070"; }
.glyphicon-envelope::before            { content: "\f0e0"; }
.glyphicon-info-sign::before           { content: "\f05a"; }
.glyphicon-warning-sign::before        { content: "\f071"; }
.glyphicon-question-sign::before       { content: "\f059"; }
.glyphicon-exclamation-sign::before    { content: "\f06a"; }
.glyphicon-floppy-disk::before,
.glyphicon-save::before                { content: "\f0c7"; }
.glyphicon-calendar::before            { content: "\f073"; }
.glyphicon-lock::before                { content: "\f023"; }
.glyphicon-user-plus::before           { content: "\f234"; }
.glyphicon-list::before                { content: "\f03a"; }
.glyphicon-list-alt::before            { content: "\f022"; }
.glyphicon-star::before                { content: "\f005"; }
.glyphicon-heart::before               { content: "\f004"; }
.glyphicon-filter::before              { content: "\f0b0"; }

/* ------- jQuery UI datepicker (KsTU palette) ------------- */
.ui-datepicker {
    background: #fff;
    border: 1px solid #d1d7e0;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(13, 42, 92, 0.18);
    padding: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    z-index: 1060 !important;
    width: auto;
    min-width: 260px;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--kstu-primary);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 4px;
    margin-bottom: 6px;
    position: relative;
}

.ui-datepicker .ui-datepicker-title {
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
}

.ui-datepicker .ui-datepicker-title select {
    color: var(--kstu-primary-dark);
    background: #fff;
    border: 0;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 2px;
    font-size: 0.85rem;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 6px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.ui-datepicker .ui-datepicker-prev { left: 6px; }
.ui-datepicker .ui-datepicker-next { right: 6px; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--kstu-accent);
    border: 0;
    top: 6px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0;
    overflow: visible;
    color: #fff;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
}

.ui-datepicker .ui-datepicker-prev span::before { content: "\f053"; }
.ui-datepicker .ui-datepicker-next span::before { content: "\f054"; }

.ui-datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0;
}

.ui-datepicker th {
    color: var(--kstu-primary);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 0;
    text-align: center;
}

.ui-datepicker td {
    padding: 1px;
    text-align: center;
}

.ui-datepicker td .ui-state-default {
    display: block;
    padding: 6px 0;
    border: 0;
    background: #f5f7fa;
    color: var(--kstu-text);
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.12s ease-in-out;
}

.ui-datepicker td .ui-state-default:hover {
    background: rgba(212, 164, 55, 0.25);
    color: var(--kstu-primary-dark);
}

.ui-datepicker td .ui-state-highlight {
    background: rgba(13, 42, 92, 0.1);
    color: var(--kstu-primary-dark);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--kstu-primary);
}

.ui-datepicker td .ui-state-active,
.ui-datepicker td.ui-datepicker-current-day .ui-state-default {
    background: var(--kstu-primary) !important;
    color: #fff !important;
    font-weight: 700;
}

.ui-datepicker td.ui-state-disabled .ui-state-default {
    background: transparent;
    color: #bbb;
    cursor: not-allowed;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background: transparent;
    border-top: 1px solid #e3e6eb;
    margin: 6px 0 0;
    padding: 8px 2px 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    background: var(--kstu-primary);
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: var(--kstu-primary-dark);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    background: var(--kstu-accent);
    color: var(--kstu-primary-dark);
}

/* Fix input-group width when datepicker is inside one */
.input-group .ui-datepicker-trigger {
    margin-left: 0;
}

/* ------- Toastr alerts (KsTU palette) ------------------- */
#toast-container > div {
    opacity: 1;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(13, 42, 92, 0.22);
    padding: 14px 14px 14px 50px;
    font-size: 0.92rem;
    line-height: 1.4;
    background-image: none !important;
}

#toast-container > div .toast-title {
    font-weight: 700;
    letter-spacing: 0.2px;
}

#toast-container > div .toast-close-button {
    opacity: 0.8;
    text-shadow: none;
}

/* Warning — gold background, navy text (fixes the white-on-yellow issue) */
#toast-container > .toast-warning {
    background-color: var(--kstu-accent);
    color: var(--kstu-primary-dark);
    border-left: 4px solid var(--kstu-accent-dark);
}

#toast-container > .toast-warning .toast-close-button {
    color: var(--kstu-primary-dark);
}

#toast-container > .toast-warning .toast-progress {
    background-color: var(--kstu-primary-dark);
    opacity: 0.5;
}

/* Info — navy on light blue tint */
#toast-container > .toast-info {
    background-color: var(--kstu-primary);
    color: #fff;
    border-left: 4px solid var(--kstu-accent);
}

#toast-container > .toast-info .toast-progress {
    background-color: var(--kstu-accent);
}

/* Success — green */
#toast-container > .toast-success {
    background-color: #1e7e34;
    color: #fff;
    border-left: 4px solid #155724;
}

/* Error */
#toast-container > .toast-error {
    background-color: #b02a37;
    color: #fff;
    border-left: 4px solid #842029;
}

/* ------- Footer ----------------------------------------- */
.main-footer {
    background: #fff;
    border-top: 1px solid #eef0f4;
    color: var(--kstu-primary);
    padding: 12px 20px;
    /* Leave room on the right for the help-chat chip so they don't collide */
    padding-right: 160px;
    font-size: 0.85rem;
}

.main-footer a {
    color: var(--kstu-accent-dark);
}

/* On narrow screens drop the reserved space — chip becomes an icon-only pill */
@media (max-width: 576px) {
    .main-footer { padding-right: 60px; }
}

/* ------- Help chat chip (preserve old feature) ----------
   Anchored a little higher than the footer so they never collide. */
.kstu-help-chip {
    position: fixed;
    right: 20px;
    bottom: 70px;
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 6px 14px 6px 6px;
    border-radius: 40px;
    background: var(--kstu-accent);
    color: var(--kstu-primary-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.kstu-help-chip:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
    background: var(--kstu-primary);
}

.kstu-help-chip img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    margin-right: 8px;
}

/* ------- Legacy compatibility shims --------------------- */
/* Old pages use .wrapper, .form-panel, .mt, .centered, .sidebar-menu */
.content .wrapper,
.content-wrapper .wrapper {
    background: transparent;
    padding: 0;
}

.form-panel,
.content-panel {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(13, 42, 92, 0.08), 0 1px 2px rgba(13, 42, 92, 0.06);
    margin-bottom: 20px;
    border: 0;
}

/* Give content-panel a subtle accent border at the top so it reads as a card */
.content-panel {
    border-top: 3px solid var(--kstu-primary);
}

.row.mt,
.row.mb,
.mt,
.mb {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.centered {
    text-align: center;
}

/* Legacy search/filter columns used by the v1 HR app */
.search-panel {
    margin-bottom: 10px;
}

.search-panel .form-control,
.search-panel select {
    min-height: 38px;
}

/* imaginary_container was a BS3 helper for select2 inside stylish input-groups */
#imaginary_container,
[id^="imaginary_container"] {
    width: 100%;
}

/* Stylish input group (legacy) — let BS4 handle it */
.stylish-input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.stylish-input-group .form-control,
.stylish-input-group .multiple-select,
.stylish-input-group select {
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
    min-height: 38px;
}

.stylish-input-group .input-group-addon,
.stylish-input-group .input-group-btn {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* `.multiple-select` was a v1 class applied alongside .form-control for select2 */
.multiple-select {
    width: 100% !important;
}

/* Legacy heading/table helpers */
h3 i.right_angle,
h3 i.fa-angle-right.right_angle {
    color: var(--kstu-accent);
    margin-right: 6px;
}

/* A few more v1 layout scraps */
.showback,
.go-back {
    margin-bottom: 15px;
}

.back-top {
    display: none; /* old "back to top" button duplicates AdminLTE's own */
}

/* The v1 app used .panel and .panel-body (Bootstrap 3) in a few spots */
.panel {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(13, 42, 92, 0.08);
    margin-bottom: 20px;
}

.panel-heading {
    background: var(--kstu-primary);
    color: #fff;
    padding: 10px 16px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-weight: 600;
}

.panel-body {
    padding: 20px;
}

.panel-footer {
    background: #f4f6fa;
    padding: 10px 16px;
    border-top: 1px solid #eef0f4;
}

/* BS3 "label-XXX" → BS4 "badge-XXX" shim */
.label {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 80%;
    font-weight: 600;
    border-radius: 3px;
    color: #fff;
    line-height: 1;
}
.label-default  { background: #6c757d; }
.label-primary  { background: var(--kstu-primary); }
.label-info     { background: #17a2b8; }
.label-success  { background: #28a745; }
.label-warning  { background: var(--kstu-accent); color: var(--kstu-primary-dark); }
.label-danger   { background: #dc3545; }

/* BS3 .well */
.well {
    background: #f4f6fa;
    border: 1px solid #e3e6eb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Old sweetalert/gritter/etc won't fight AdminLTE */
.gritter-item-wrapper {
    z-index: 2000;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .login-box,
    .register-box {
        width: 96%;
    }
}