/* ====== CSS Variables ====== */
:root { --primary: #326295; --accent: #5EDCB6; --background: #FFFFFF; --header-bg: #F0F0F0; --danger: #b00020; --max-content-width: 1250px; }

/* ====== Base Layout ====== */
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--background); color: #333; display: flex; flex-direction: column; min-height: 100vh; }

.loading-placeholder { background-color: #f5f5f5; color: #999; text-align: center; font-size: 0.9rem; padding: 0.5rem; border-radius: 4px; min-height: 40px; /* ensures header/nav/footer have space */ display: flex; align-items: center; justify-content: center; }

main { flex: 1; }

.page-container { padding: .75rem; background: var(--background); border-radius: 1rem; margin: .5rem auto; max-width: var(--max-content-width); }

    /* Make forms expand to the full width of the container */
    .page-container form { display: block; /* default, but safe to declare */ width: 100%; /* stretch to container */ max-width: 100%; /* don’t cap narrower than parent */ }


/* Then keep the 2-column grid flexible */
.form-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; width: 100%; /* important – let it fill parent */ }
    /* Make form pages wider than the default grid container */
/* you have .page-container .form-page, but your HTML is class="page-container form-page" */

.page-container.form-page { max-width: 1100px; /* or 1250px if you want as wide as the grid */ width: 100%; /* make it stretch fully */ }

    .page-container.form-page form { width: 100%; }

    .page-container.form-page .form-layout { width: 100%; grid-template-columns: 1fr 1fr; /* still 2 columns */ }

/* ====== Header ====== */
#header { background-color: var(--header-bg); padding: 1.5rem 2rem; border-bottom: 2px solid var(--primary); position: relative; }

.main-header { position: relative; text-align: center; font-size: 1.75rem; font-weight: bold; color: var(--primary); }

    .main-header .user-info { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 1rem; font-weight: 500; }

.header-container { display: flex; align-items: center; justify-content: center; position: relative; padding: 1rem 2rem; background-color: var(--header-bg); }

.logo-left { position: absolute; left: 2rem; display: flex; align-items: center; }

.logo-center, .logo-text { font-size: 1.75rem; font-weight: bold; color: var(--primary); text-align: center; }

.user-info { position: absolute; right: 2rem; font-size: 1rem; font-weight: 500; }

.logo-image { width: 150px; height: auto; vertical-align: middle; background-color:transparent; }

/* ===== Footer ===== */
#footer { background-color: var(--header-bg); color: var(--primary); text-align: center; padding: .35rem; margin-top: auto; }

/* ====== Nav ====== */
#nav { background-color: #f5f5f5; border-bottom: 1px solid var(--primary); padding: 0.75rem 2rem; }

    #nav a { color: var(--primary); text-decoration: none; margin-right: 15px; font-weight: 500; }

        #nav a:hover { color: var(--accent); }

/* ===== Buttons ===== */
button,
.k-button,
.btn-action,
.form-actions button { background-color: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 6px; cursor: pointer; font-size: 0.95rem; padding: 0.5rem 1.2rem; transition: background-color 0.2s ease-in-out; }

    button:hover,
    .k-button:hover,
    .btn-action:hover,
    .form-actions button:hover { background-color: var(--accent) !important; color: #fff !important; }

/* ====== Form Styles ====== */
.form-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 100%; }

/* Ensure consistent vertical spacing even for full-width fields */
/*.form-group { display: flex; flex-direction: column; margin-bottom: 1.5rem;*/ /* NEW - keeps RoleName/Description from touching */ /*}*/
/* Default row spacing */
.form-group { display: flex; flex-direction: column; margin-bottom: .0rem; /* was 1.5rem */ }


    .form-group .full-width { grid-column: span 2; margin-bottom: 1.5rem; /* ensures space after long blocks */ }
    .form-group label { margin-bottom: 0.5rem; font-weight: 600; color: var(--primary); }

    .form-group input,
    .form-group select,
    textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.9rem; }

        .form-group input:focus,
        .form-group select:focus,
        textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 3px rgba(94, 220, 182, 0.6); }

.form-actions { grid-column: span 2; text-align: right; margin-top: 1rem; }

textarea { height: 38px; resize: vertical; }




/* ====== Error Messages ====== */
.error-message { margin-bottom: 1rem; padding: 0.75rem 1rem; background-color: #ffe5e5; color: var(--danger); border: 1px solid #ffb3b3; border-radius: 6px; font-weight: 500; }

/* ===== Grid: compact + polish ===== */
#userGrid,
.k-grid { font-size: 0.85rem; }

    .k-grid td,
    .k-grid th { padding: 6px 8px; }

.k-grid-header th { font-weight: 600; background-color: #f0f0f0 !important; color: #333 !important; }

/* Zebra + hover */
.k-grid tbody tr:nth-child(even) { background-color: #fafafa; }
.k-grid tbody tr:hover { background-color: #f4fffa; }

/* === Edit Action Button (smaller) === */
.k-grid .btn-action { background-color: var(--primary); color: #fff; padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; text-decoration: none; display: inline-block; }
    .k-grid .btn-action:hover { background-color: var(--accent); color: #fff; }

/* === FILTER ROW:  === */

/* Kendo wraps the filter control and the (extra) button inside .k-operator-hidden */
.k-filtercell .k-operator-hidden { display: flex; align-items: center; gap: 1px; padding-right: .1em }

    /* Kendo sometimes inserts <br> between input and button; hide it to prevent wrapping */
    .k-filtercell .k-operator-hidden br { display: none !important; }

    /* The Kendo input wrapper (autocomplete/dropdown) – make it grow */
    .k-filtercell .k-operator-hidden .k-widget { flex: 1 1 auto; width: 100% !important; }

        /* The actual input inside the wrapper */
        .k-filtercell .k-operator-hidden .k-widget .k-input { width: 100% !important; height: 22px; font-size: 0.8rem; padding: 2px 4px; box-sizing: border-box; }

    /* Hide the redundant blue “clear filter” button to the right – keep only inline X */
    .k-filtercell .k-operator-hidden > .k-button.k-button-icon { display: none !important; }

/* === Pager/Footer restyle (compact + theme) === */
.k-pager-wrap { font-size: 0.85rem; padding: 4px 6px; height: 26px; }


/* Page size dropdown (older jQuery Kendo markup) */
.k-pager-sizes .k-dropdown,
.k-pager-sizes .k-dropdown .k-dropdown-wrap,
.k-pager-sizes .k-input,
.k-pager-sizes .k-select { height: 24px !important; line-height: 22px !important; font-size: 0.8rem !important; }

    .k-pager-sizes .k-dropdown .k-dropdown-wrap { padding: 0 28px 0 6px !important; /* room for arrow */ border-radius: 4px !important; background-color: #fff !important; border: 1px solid #ccc !important; box-sizing: border-box; }

/* Pager numbers + arrows styled like small buttons */
.k-pager-wrap a.k-link,
.k-pager-wrap .k-pager-nav { background-color: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 4px; min-width: 28px; height: 26px; line-height: 24px; font-size: 0.8rem; margin: 0 2px; cursor: pointer; transition: background 0.2s ease-in-out; display: inline-flex; align-items: center; justify-content: center; }

    .k-pager-wrap a.k-link:hover,
    .k-pager-wrap .k-pager-nav:hover { background-color: var(--accent) !important; color: #fff !important; }

    /* Disabled pager state */
    .k-pager-wrap a.k-link.k-state-disabled,
    .k-pager-wrap .k-pager-nav.k-state-disabled { background-color: #ccc !important; color: #666 !important; cursor: not-allowed; }


/* ===== Darker Grid Lines for Kendo Grids ===== */
.k-grid table { border-collapse: collapse !important; }

.k-grid th,
.k-grid td { border: 1px solid #ccc !important; }

.k-grid-header { border-bottom: 2px solid #bbb !important; padding-right:0 !important; }
/* ====Filter Row style======*/
/* Kendo (newer markup) */
.k-grid .k-filter-row .k-numerictextbox .k-input { height: 25px; }
.k-grid .k-filter-row .k-numerictextbox .k-input-inner { height: 25px; line-height: 25px; }
.k-grid .k-filter-row .k-numerictextbox .k-spin-button { height: 12px; }

/* Kendo (legacy jQuery markup) */
.k-grid .k-filter-row .k-numerictextbox .k-numeric-wrap .k-input { height: 25px; }
.k-grid .k-filter-row .k-numerictextbox .k-numeric-wrap .k-select { height: 25px; }
.k-grid .k-filter-row .k-numerictextbox .k-numeric-wrap .k-link { height: 12px; }

/*.k-grid .k-filter-row td { padding-top: 6px; padding-bottom: 6px; height:150px }

.k-grid .k-filter-row input.k-textbox,
.k-grid .k-filter-row .k-dropdown,
.k-grid .k-filter-row .k-picker { height: 32px; min-height: 32px; font-size: 0.9rem; }*/

/* --- Fix unwanted bottom scrollbar on Kendo Grids --- */
/*.k-grid-content { overflow-x: hidden !important; }*/
.k-grid-content { overflow-x: auto; padding-bottom: 0 !important; }

.k-grid-header { box-sizing: border-box; padding-right: 0 !important; /* align header and content columns */ }

.k-grid-content table { width: 100% !important; /* prevent fractional width overflow */ table-layout: fixed; /* keep consistent column sizing */ }

    .k-grid-content::-webkit-scrollbar:horizontal { height: 0; /* hide unnecessary horizontal scrollbars */ }





/* --- Remove phantom horizontal scrollbar from Kendo Grids --- */
/*.k-grid,
.k-grid-content,
.k-grid-header { box-sizing: border-box; }

.k-grid-content { overflow-x: clip !important;*/ /* hides overflow without breaking scroll alignment */ /*padding-bottom: 0 !important; }*/

/* Prevent header width mismatch */
/*.k-grid-header { padding-right: 0 !important; margin-right: 0 !important; }*/

/* Normalize table layout so total width matches content width exactly */
/*.k-grid table { table-layout: auto !important; width: 100% !important; }*/

/* Optional: smooth fix for Chrome subpixel rounding */
.k-grid-content::-webkit-scrollbar { height: 0 !important; }


/* ====== Status Badges ====== */
.status-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; color: #fff; display: inline-block; }
.status-active { background-color: var(--accent); }
.status-inactive { background-color: #bbb; }


/* Checklist layout */
.form-checklist { display: grid; grid-template-columns: auto 1fr; /* checkbox column + flexible label column */ gap: 0.25rem 0.5rem; /* vertical & horizontal spacing */ align-items: center; }

    .form-checklist .form-check { display: contents; /* flatten so child elements flow into the grid */ }

    .form-checklist input[type="checkbox"] { justify-self: start; /* always left-align checkboxes */ margin: 0; /* reset browser default */ }

    .form-checklist label { margin: 0; /* reset spacing */ font-size: 0.9rem; line-height: 1.4; }
    /* Scrollable checklist utility */
    .form-checklist.scrollable { max-height: 240px; /* ~10 items at ~24px each */ overflow-y: auto; border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem; background: #fafafa; }


/* Small input utility */
.input-sm { max-width: 225px; /* adjust to taste */ }

/* Small select */
select.input-sm { max-width: 250px; }

/* Small input labels still line up */
.form-group.input-sm { max-width: 250px; }


/* Special layout for single checkboxes */
.form-group.checkbox-group { display: flex; flex-direction: column; /* stack label and checkbox */ align-items: flex-start; /* align checkbox to left, not center */ }

    .form-group.checkbox-group input[type="checkbox"] { margin-top: 0.25rem; /* small gap under label */ width: auto; /* don't stretch checkbox */ }


    /* ====== Modal Dialog ====== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; }

.modal-box { background: #fff; border-radius: 10px; padding: 20px 30px; width: 350px; max-width: 90%; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.modal-actions { margin-top: 20px; display: flex; justify-content: space-around; }

    .modal-actions button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }

#stayLoggedInBtn { background: #28a745; color: #fff; }

#logoutNowBtn { background: #dc3545; color: #fff; }