/*
-------------------------------------------------------------------------------
-   Author : ToNict
-------------------------------------------------------------------------------
*/

/* Form data, confirm, search
   ========================================================================== */
.form-data .col-form-label {
    font-weight: 600;
    /*text-align: right;*/
}
.form-data .col-form-label label{
    margin-bottom: 0px;
}
.modal .form-data .col-form-label {
    text-align: left;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
}
.modal-footer .btn {
    font-weight: 600;
}
.custom-modal .modal-footer .btn > [class*="fa-"] {
    margin-right: 5px;
}
.custom-modal .modal-body .row:not(:last-child) {
    margin-bottom: 10px;
}

.form-data [data-toggle="tooltip"],
.form-data [data-bs-toggle="tooltip"] {
    cursor: help;
    font-size: 1.2rem;
    color: #b7b6b6;
}
.form-data .col-form-label > label > [data-toggle="tooltip"],
.form-data .col-form-label > label > [data-bs-toggle="tooltip"] {
    margin-left: 7px;
}

.form-data .line-break {
    width: 100%;
}
.form-data .col-form-btn {
    margin-top: 0.7rem;
}

.form-data .col-form-btn button {
    font-weight: 600;
    padding: 0.5rem 0.85rem;
}

.form-data .col-form-btn button i {
    margin-right: 0.5rem;
}

.form-data button{
    cursor: pointer;
}
.form-data button:disabled{
    cursor: not-allowed;
}

.form-data textarea {
    min-height: 5.5rem;
    height: auto;
}

.form-data .checkbox-multiple {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* confirm form */
.form-confirm {
    padding: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.form-confirm .header{
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.1;
    font-size: 1.25rem;

    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.form-confirm .col-form,
.form-confirm .col-form-inline,
.form-confirm .col-form-label{
    padding-top: calc(0.2rem - 1px * 2);
    padding-bottom: calc(0.2rem - 1px * 2);
    margin-bottom: 0;
    min-height: 1px;
    width: 100%;
}

.form-confirm .col-form-label {
    text-align: left;
}

.form-confirm .col-form,
.form-confirm .col-form-inline {
    margin-left: 10px;
}

/* form search */
.form-search,
.form-import {
    position: relative;
    margin-bottom: 11px;
    clear: both;
}
.form-report {
    margin-bottom: 0 !important;
}
.form-search .search-title {
    display:flex;
    align-items: center;
    flex: 1 0 auto;
    align-content: center;
    margin-top: -.4rem;
    font-weight: 600;
}

.form-search .search-title [class*="fa-"]{
    font-size: 1.2rem;
}

.form-search .col-form-btn button,
.form-import .col-form-btn button {
    padding: 0.375rem 0.75rem;
}

.form-search [for="QuickSearch"]{
    display: none;
}

.form-data .htmlprefix,
.form-data .htmlsuffix{
    position: relative;
    min-height: 1px;
    width: 100%;
}

/*  input dropdown */
.text-dropdown input:disabled + div {
    pointer-events: none;
    cursor: not-allowed;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.9;
}

.form-data .custom-controls-stacked > .custom-radio {
    margin-bottom: 0.4rem;
}

.import-data-alert > div {
    max-height: 300px;
    overflow: auto;
}

.form-data .btn,
.form-search .btn,
.form-import .btn {
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (min-width: 768px) {
    .form-data {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        /*width: 100%;*/
    }

    .form-data .col-form,
    .form-data .col-form-inline{
        margin-bottom: 6px;
    }

    .form-data .col-form-label {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;

        padding-right: 10px;
        text-align: right;
    }
    .form-data .col-form,
    .form-data .col-form-inline {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
        margin-left: 0px;
    }
    .form-data .col-form-btn {
        margin-left: 25%;
    }
    .form-data-rtl .col-form-btn {
        margin-left: 0;
        margin-right: 25%;
    }

    .form-search .search-quick .col-form-inline{
        -ms-flex: 0 0 210px;
        flex: 0 0 210px;
        max-width: 210px;
    }

    .form-search .search-quick .col-form-btn{
        margin-left: 0px;
        margin-top: 0px
    }

    .form-search [for="QuickSearch"]{
        display: block;
    }

    .form-import .import-data .col-form-inline{
        -ms-flex: 0 0 350px;
        flex: 0 0 350px;
        max-width: 350px;
    }

    .form-import .import-data .col-form-btn{
        margin-left: 0px;
        margin-top: 0px
    }
}

/* Large and Extra large */
@media (min-width: 992px) {
    .form-data {
        margin-left: -15px;
        margin-right: -15px;
    }

    .tab-pane > .form-data {
        margin-left: -5px;
        margin-right: -5px;
    }

    .form-data-body {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
    }

    .form-data .col-form,
    .form-data .col-form-inline,
    .form-data .col-form-label,
    .form-data .col-form-btn,
    .form-data .htmlprefix,
    .form-data .htmlsuffix{
        padding-left: 5px;
        padding-right: 5px;
    }

    .form-data .col-form-label {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .form-data .col-form {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
        margin-left: 0px;
    }
    .form-data .col-form-inline {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        margin-left: 0px;
    }
    .form-data .col-form-btn {
        margin-left: 16.666667%;
    }
    .form-data-rtl .col-form-btn {
        margin-left: 0;
        margin-right: 16.666667%;
    }

    .form-confirm {
        margin-left: 5px;
        margin-right: 5px;
    }

    .modal .form-data {
        margin-left: -10px;
        margin-right: -10px;
    }

    .modal .form-data .col-form-label {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .modal .col-form,
    .modal .form-data .col-form-inline {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .modal .col-form-label {
        padding-left: 10px;
        padding-right: 0px;
    }

    .modal .col-form {
        padding-left: 5px;
        padding-right: 10px;
    }
}

.form-data .required:after {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f069";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #F00;
    font-size: 0.6rem;
    vertical-align: super;
    padding-left: 3px;
    padding-right: 3px;
}

/* bootstrap 4
   ========================================================================== */
.form-control {
    /*padding: 0.45rem 0.6rem;*/
    padding: 0.375rem 0.6rem;
    /*height: 2.4rem;*/
    /*line-height: 3;   fix for google chrome */
    color: #000000;
    max-width: 100%;
    border-color: #CCCCCC;

    /*    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);*/
}

.form-control-sm {
    padding: 0.25rem 0.5rem;
}

.form-control-lg {
    padding: 0.5rem 1rem;
}

textarea.form-control{
    line-height: 1.5
}

select.form-control {
    padding: 0.39rem 0.3rem 0.45rem 0.3rem;
}

.custom-file {
    width: 100%;
    height: 2.367rem;
}
.custom-file-label{
    padding-right: 70px;
}
.custom-file .delete-file {
    position: absolute;
    right: 75px;
    top: 0.55rem;
    z-index: 10;
    color: #78909C;
    font-size: 1rem;
}
.custom-file .delete-file:hover {
    color: #e53935;
    cursor: pointer;
}
/*.custom-file-control:before{
    border-bottom-width: 0px;
    line-height: 1.6;
    height: inherit;
    padding: 0.31rem 0.5rem;
}*/

/*.custom-file-control {
    height: inherit;
    padding: 0.34rem 0.5rem;
    padding-right: 5rem;
}*/

.form-control.is-valid-custom {
    border-color: #28a745;
}
.form-control.is-valid-custom:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid-custom,
.custom-file-input.is-invalid-custom + .custom-file-label {
    border-color: #dc3545;
}
.form-control.is-invalid-custom:focus,
.custom-file-input.is-invalid-custom:focus + .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.custom-control-label{
    cursor: pointer;
    padding-top: 0.1rem;
    padding-left: 5px;
}
.custom-control-label::before,
.custom-control-label::after {
    width: 1.2rem;
    height: 1.2rem;
}

.custom-checkbox {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.custom-checkbox > [data-toggle="tooltip"],
.custom-checkbox > [data-bs-toggle="tooltip"] {
    margin-left: 0.6rem;
}

.input-group > .input-group-prepend > .input-group-text .custom-checkbox {
    margin: 0px;
}
.input-group > .input-group-prepend > .input-group-text .custom-control-label{
    padding-top: 0px;
}
.input-group > .input-group-prepend > .input-group-text .custom-control-label::before,
.input-group > .input-group-prepend > .input-group-text .custom-control-label::after {
    top: .15rem;
}

/* BS */
.form-check {
    padding-top: 4px;
    padding-left: 1.8em;
}
.form-check .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
    margin-left: -1.8em;
}

/* .form-switch is also .form-check (same DOM element carries both
 * classes), so the fixed 1.2rem width above — meant for plain checkboxes/
 * radios — has the same specificity as core.css's own `.form-switch
 * .form-check-input { width: 2em; }` and (being defined later in the
 * cascade) wins, collapsing every Bootstrap switch in the app into a
 * plain square/circle instead of the intended wide pill — confirmed live,
 * 25 กันยายน 2026, first noticed on the "เผยแพร่แล้ว" toggle in
 * /main/adm/adm-result-publish-gate (the first .form-switch this app has
 * used), but this restores every switch anywhere in main, not just that
 * one page.
 */
.form-check.form-switch .form-check-input {
    width: 2em;
    height: 1.2rem;
}

.btn-warning { /* Fix */
    color: #765c10;
}

.input-group-btn > .btn{
    height: 2.367rem;
}

.input-group .form-control.is-valid-custom,
.input-group .form-control.is-invalid-custom {
    z-index: 3;
}

.form-data .invalid-feedback{
    display: block;
}

.form-data .is-invalid-custom.invalid-feedback{
    line-height: 1;
}

.form-data .col-form > .form-control,
.form-data .col-form-inline > .form-control {
    display: inline-block;
    vertical-align: middle;
    /* Confirmed live via DevTools on 2026-09-23 (User edit page): despite
       Bootstrap's own `.form-control { width: 100% }`, these inputs render
       at a small fixed intrinsic width (~208px) inside a `.col-form` that's
       already 83% of the row (see the min-width:992px media query below) —
       leaving most of the wide edit-form column empty. Couldn't pin down
       which rule wins that fight via cascade/specificity inspection (no
       competing `width` rule matched this selector in any same-origin
       stylesheet), but forcing it back to 100% here empirically fixes it. */
    width: 100% !important;
}

.form-data .dropdown-toggle::after {
    margin-left: 0.4em;
}

.form-data .collapse,
.form-data .collapsing {
    width: 100%;
}

.form-data .radio-multiple {
    margin-top: 6px;
    margin-bottom: 5px;
}

.form-data .custom-controls-nostacked > div{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 1rem;
}

.form-data .input-other {
    margin-left: .5rem;
}

.form-confirm .input-other {
    border: none;
    background: none;
}

.form-search .card,
.form-import .card {
    position: inherit;
}

.form-search .card-header,
.form-import .card-header {
    padding-top: .5rem;
}

.form-search .card-body,
.form-import .card-body {
    position: relative;
    padding: 0;
}

.form-search .card-body > .tab-pane,
.form-import .card-body > .tab-pane {
    padding: 0.5rem;
}

.form-search .search-quick .col-form-inline,
.form-import .import-data .col-form-inline {
    margin-bottom: 0px;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:focus, .btn-default.focus {
    box-shadow: 0 0 0 3px rgba(134, 142, 150, 0.2);
}

.btn-default.disabled, .btn-default:disabled {
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:active, .btn-default.active,
.show > .btn-default.dropdown-toggle {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.form-data .input-group.time{
    max-width: 150px !important;
}

@media (max-width: 767px) {
    .input-group {
        width: 100% !important;
    }

    .form-data .input-other {
        margin-left: 0px !important;
        margin-top: .5rem !important;
    }
}

@media (min-width: 768px) {
    .form-data div[class^="col-form"] > .form-control {
        width: auto;
    }

    .form-data .input-group.date {
        width: 50%;
        max-width: 240px;
    }

    .custom-file {
        width: 100%;
        max-width: 300px;
    }

    .form-search .card-body > .tab-pane,
    .form-import .card-body > .tab-pane {
        padding: 1.24rem;
    }

    .form-import .import-data .custom-file{
        width: 100%;
    }
}


/* select 2
   ========================================================================== */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    font-size: 1rem;
    min-height: 2.367rem;
    border-color: #CCCCCC;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--default .select2-selection--single {
    padding-top: 0.15rem;
    height: 2.367rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: 2rem;
    padding-left: 0.6rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear{
    margin-top: -1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 0.36rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 3px;
    margin-right: 0.15rem;
    margin-top: 0.34rem;
    height: 1.56rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 0.6;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 3px;
    margin-right: 1px;
}
.select2-container--default .select2-search--inline .select2-search__field {
    min-width: 1em;
}

.select2-container .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container .is-valid-custom{
    border-color: #28a745;
}
.select2-container .is-valid-custom:focus,
.select2-container--default.select2-container--open .select2-selection--single.is-valid-custom,
.select2-container--default.select2-container--focus .select2-selection--multiple.is-valid-custom {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.select2-container .is-invalid-custom{
    border-color: #dc3545;
}
.select2-container .is-invalid-custom:focus,
.select2-container--default.select2-container--open .select2-selection--single.is-invalid-custom,
.select2-container--default.select2-container--focus .select2-selection--multiple.is-invalid-custom {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    padding-left: 0px;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__clear{
    display: none;
}
.select2-container .select2-search--inline .select2-search__field {
    font-family: inherit;
}

.select2[dir="rtl"] .select2-selection__rendered {
    text-align: right;
}

.form-data .select2-container {
    max-width: 500px;
}

.select2-dropdown {
    z-index: 1029;
}

.modal-open .select2-dropdown {
    z-index: 1051;
}

@media (max-width: 767px) {
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* noty
   ========================================================================== */
.noty-icon {
    font-size: 1.5rem;
    padding-right: 8px;
    padding-left: 3px;
}

/* iconpicker
   ========================================================================== */
.iconpicker-popover .popover-body{
    padding: 9px 9px;
}

.iconpicker-popover tfoot .text-center{
    padding-top: 9px;
}

/*@media (min-width: 768px) {

}*/

/* Modal loading
   ========================================================================== */
.modal-loading .modal-content {
    padding: 15px 0px 15px 30px;
}

.modal-loading .modal-content i {
    color: #38e;
}

.text-loading {
    font-size: 1.3rem;
    font-weight: 600;
    padding-left: 10px;
}

/* RTL Support
   ========================================================================== */
[dir="rtl"] .input-group-addon:not(:last-child){
    border-right: 1px solid rgba(0,0,0,.15);
    border-left: 0;
}

[dir="rtl"] .input-group .form-control:not(:last-child),
[dir="rtl"] .input-group-addon:not(:last-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group-btn:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.dropdown-toggle{
    border-bottom-right-radius: .25rem;
    border-top-right-radius: .25rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

[dir="rtl"] .input-group .form-control:not(:first-child),
[dir="rtl"] .input-group-addon:not(:first-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.dropdown-toggle,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn:not(:first-child){
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: .25rem;
    border-top-left-radius: .25rem;
}

[dir="rtl"] .form-control + .input-group-addon:not(:first-child){
    border-left: 1px solid rgba(0,0,0,.15);
    border-right: 0;
}

[dir="rtl"] .input-group .form-control:not(:first-child):not(:last-child),
[dir="rtl"] .input-group .input-group-addon:not(:first-child):not(:last-child){
    border-radius: 0;
}

/*[dir="rtl"] .custom-file-control {
    padding-right: 0.5rem;
    padding-left: 5rem;
}

[dir="rtl"] .custom-file-control::before {
    left: -1px;
    right: auto;
    border-radius: 0.25rem 0 0 0.25rem;
}*/

/* load page */
.spinner-load-tab {
    margin: 30px auto 0;
    width: 150px;
    text-align: center;
}

.spinner-load-tab > div {
    width: 15px;
    height: 15px;
    background-color: #d3d7da;
    margin-right: 3px;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner-load-tab .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner-load-tab .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/* Grid density — jqGrid's own stylesheet (plugins/jqgrid/css/ui.jqgrid.css)
   ships noticeably larger type/row-height than the rest of the Vuexy-themed
   UI (16px base font, ~38px rows) and than this project's own pre-Vuexy grid
   screens, which ran closer to 13-14px text / ~34px rows. Scale it down here
   rather than editing the vendor file directly.

   Bumped 0.8125rem (~13.8px) -> 0.875rem (~14.9px), 23 กันยายน 2026: still
   noticeably smaller than the rest of the page (~16px sidebar/breadcrumb/
   caption text) to preserve most of the original density, but the old value
   read as too small for staff reading grid data for extended periods — see
   docs/audit.md for the fuller before/after comparison across the page.
   ========================================================================== */
.ui-jqgrid > .ui-jqgrid-view {
    font-size: 0.875rem;
}
.ui-jqgrid .ui-jqgrid-titlebar {
    font-size: 0.9375rem;
    padding: .5rem .75rem;
}
.ui-jqgrid tr.jqgrow,
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td {
    height: 2rem;
}
.ui-jqgrid .ui-jqgrid-htable th {
    height: 2rem;
}
.ui-jqgrid > .ui-jqgrid-pager {
    font-size: 0.875rem;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pager-control,
.ui-jqgrid .ui-jqgrid-pager .ui-pager-control {
    padding: .2rem .5rem;
}

/* Pager "rows per page" dropdown (.ui-pg-selbox) shows its number overlapping
   the Bootstrap 5 chevron icon. Cause: guiStyle="bootstrap5" (see index.volt)
   makes jqGrid add the .form-select class to this <select>, which reserves
   ~42px of right padding in core.css for its chevron background-image — but
   ui.jqgrid.css's own `.ui-jqgrid .ui-pg-table .ui-pg-selbox { padding: 2px }`
   rule has higher specificity and collapses that padding back down, so the
   text runs under the icon. Restore just the right padding, with enough
   specificity (4 classes) to win regardless of load order between the vendor
   sheet and this one. */
.ui-jqgrid .ui-pg-table .ui-pg-selbox.form-select {
    padding-right: 1.75rem;
}

/* ckeditor 5 v.40 */
.ck5__body>textarea {
    display: none;
}

.ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-source-editing-area {
    min-height: 250px;
    max-height: 500px;
}

.ck-source-editing-area textarea {
    overflow: auto !important;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    border-color: var(--bs-border-color) !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: var(--bs-border-radius) !important;
}

.ck.ck-editor__main > .ck-editor__editable {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    border-color: var(--bs-border-color) !important;
}

.ck-toolbar__separator+.ck-toolbar__separator {
    display: none !important;
}

/* PhpGrid\TreeGrid (System > Structure) renders its edit-form dialog's
   dismiss button with legacy Bootstrap 4 markup — <button class="close">
   wrapping <i class="fas fa-times">) — instead of Bootstrap 5's
   `.btn-close`. Confirmed live via DevTools on 2026-09-23: this app's
   compiled Bootstrap 5 build has no `.close` rule at all, so it falls back
   to the browser's native <button> chrome (2px outset border, gray
   background, sits inline right after the title) instead of Vuexy's themed,
   absolutely-positioned close icon (see `.modal .modal-header .btn-close` in
   public/vendor/css/core.css, which this mirrors). Setting `$.phpGrid.bootstrap
   = 5` (public/js/custom.js) does not fix this dialog specifically, since
   TreeGrid's modal isn't built through phpgrid.min.js's shared modal helper. */
.modal-header .close {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--bs-body-color);
    opacity: 0.5;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}
.modal-header .close:hover,
.modal-header .close:focus {
    opacity: 0.85;
}

/* TreeGrid's edit-form footer has a prev/next record nav pair rendered as a
   Bootstrap `.btn-group` (#pData "back", #nData "forward", both icon-only
   `.fm-button.btn-success`). Confirmed live via DevTools on 2026-09-23: the
   two buttons are structurally and stylistically identical (same classes,
   same computed padding/border/font, same 16x16 icon) yet auto-size to
   different heights — #pData settles at ~33.4px (correct, matching an
   icon-only button's padding+line-height) while #nData renders ~8px taller
   for no CSS-attributable reason (no matching rule, no hover/focus state
   found to explain it — most likely a font-metric quirk on that specific
   FontAwesome glyph). Content-based auto-height isn't reliable for this
   pair, so pin both to an explicit height instead of chasing the glyph
   quirk further; this also stops the taller button from visually
   overlapping/poking out of the shared `.btn-group` pill shape. */
.modal-footer .btn-group #pData.fm-button,
.modal-footer .btn-group #nData.fm-button {
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sub-menu items in the sidebar (main/index.volt) only render a real
   `.menu-icon` when SysStructure.StructureIcon is set and StructureIconVisible
   is on for that row (see IndexController::_buildSidebarMenu()); most rows
   have neither, so they fall back to Vuexy's default `::before` bullet dot
   (public/vendor/css/core.css `.menu .menu-sub > .menu-item > .menu-link::before`),
   which core.css applies unconditionally to every sub-menu link. Once a row
   does get a real icon, showing the bullet dot *and* the icon at once looks
   like a rendering glitch, so suppress the dot only on items that actually
   have one. */
.menu-sub > .menu-item:has(> .menu-link > .menu-icon) > .menu-link::before {
    display: none;
}

/* PhpGrid's search form (renderSearch(), used by every grid with a
   basic/advanced search toggle e.g. main/controllers/System/LogsController.php)
   renders "คำค้นหา"/"แบบละเอียด" as `.nav-item.nav-link` inside a
   `.nav.nav-tabs.card-header-tabs`, alongside a `.search-title` item that
   carries `.me-auto` to push the tabs to the right edge. Confirmed live via
   DevTools on 2026-09-23: Vuexy's own core.css rule
   `.nav-tabs:not(.nav-fill):not(.nav-justified) .nav-link { inline-size: 100%; }`
   applies unconditionally, so with 2 tabs each wanting 100% width they
   flex-shrink to ~50% of the remaining row each (~607px measured) instead of
   their natural (short) text width — that eats all the free space `.me-auto`
   needs, so the tab group ends up spread across the full header instead of
   grouped at the right. The exact same Vuexy quirk was already hit and fixed
   once for the page-tab bar (`#mainSwiperTabs .nav-item` above); same fix
   here, scoped to the search-form tabs only. */
.form-search .card-header-tabs .nav-link {
    inline-size: auto !important;
    flex: 0 1 auto !important;
}

/* Row-action buttons built via $grid->addButton([...'color' => 'purple'|'red'|
   'green'|'blue'|'orange'...]) (e.g. LogsController's "Detail" button, colored
   'purple') render as `.ui-btn.ui-btn-<color>` from the licensed jqGrid build
   (public/plugins/jqgrid/css/ui.jqgrid.css) — a fixed Bootstrap-3-era swatch
   set (e.g. purple = #563d7c) with no relation at all to this app's actual
   Vuexy theme colors (--bs-primary = #7367f0, etc.), so any such button reads
   as visibly off-brand next to everything else on the page. Remap each named
   color to the equivalent Vuexy semantic color, keeping the same soft
   text+border+tinted-background treatment the vendor CSS already uses. Don't
   edit ui.jqgrid.css directly — bundled/licensed vendor file. */
.ui-jqgrid .ui-btn.ui-btn-purple,
.ui-jqgrid .ui-userdata .ui-btn-purple:hover,
.ui-jqgrid .ui-userdata .ui-btn-purple:focus,
.ui-jqgrid .ui-userdata .ui-btn-purple:active {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
}
.ui-jqgrid .ui-btn.ui-btn-red,
.ui-jqgrid .ui-userdata .ui-btn-red:hover,
.ui-jqgrid .ui-userdata .ui-btn-red:focus,
.ui-jqgrid .ui-userdata .ui-btn-red:active {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.12);
}
.ui-jqgrid .ui-btn.ui-btn-green,
.ui-jqgrid .ui-userdata .ui-btn-green:hover,
.ui-jqgrid .ui-userdata .ui-btn-green:focus,
.ui-jqgrid .ui-userdata .ui-btn-green:active {
    color: var(--bs-success);
    border-color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.12);
}
.ui-jqgrid .ui-btn.ui-btn-blue,
.ui-jqgrid .ui-userdata .ui-btn-blue:hover,
.ui-jqgrid .ui-userdata .ui-btn-blue:focus,
.ui-jqgrid .ui-userdata .ui-btn-blue:active {
    color: var(--bs-info);
    border-color: var(--bs-info);
    background: rgba(var(--bs-info-rgb), 0.12);
}
.ui-jqgrid .ui-btn.ui-btn-orange,
.ui-jqgrid .ui-userdata .ui-btn-orange:hover,
.ui-jqgrid .ui-userdata .ui-btn-orange:focus,
.ui-jqgrid .ui-userdata .ui-btn-orange:active {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), 0.12);
}

/* TreeGrid's "MoveNode" up/down row buttons (System > Structure) are built by
   the same compiled `\PhpGrid\TreeGrid` class as the icon-picker/close-button
   issues fixed above — no `fasicon` option exposed for this button type, so
   the FontAwesome glyph (`fa-chevron-up`/`fa-chevron-down`) is hardcoded and
   can't be swapped via PHP. Repaint the icon's own ::before pseudo-element to
   pull the equivalent Tabler glyph instead, so it matches the outline style
   used everywhere else (Dashboard, sidebar, etc.) instead of FontAwesome's
   solid chevrons — same visual goal as
   IndexController::_convertFontAwesomeToTabler(), just done in CSS because
   this specific icon has no PHP-configurable source to convert. Codepoints
   from public/vendor/fonts/tabler-icons.css (ti-chevron-up = \ea62,
   ti-chevron-down = \ea5f). */
.move-up i.fa-chevron-up::before {
    font-family: "tabler-icons" !important;
    font-weight: 400;
    content: "\ea62";
}
.move-down i.fa-chevron-down::before {
    font-family: "tabler-icons" !important;
    font-weight: 400;
    content: "\ea5f";
}

/* `main` never loads public/css/custom.css (that file is apply/register-only
   per docs/frontend.md and is 1800+ lines of apply-specific component
   styling — importing the whole thing into main would be a much bigger,
   riskier change than what was asked). But custom.css's very first rule
   overrides two Bootstrap root variables that core.css itself defines and
   consumes (`html { font-size: var(--bs-root-font-size) }`, `body { font-size:
   var(--bs-body-font-size) }` — see public/vendor/css/core.css), which is why
   apply's base type scale (17px root / 0.95rem body ≈ 16.15px) reads
   slightly larger than main's unmodified core.css defaults (16px root /
   0.9375rem body = 15px) even though both use the same "Public Sans" font
   stack. Match just those two variables here — this file loads after
   core.css in main/index.volt, so the override wins the same way custom.css's
   copy already does for apply. (custom.css's third variable,
   --bs-body-font-letter-spacing, isn't consumed anywhere in core.css — it's
   dead weight there, not a real visual difference — so it's not replicated.) */
:root {
    --bs-root-font-size: 17px;
    --bs-body-font-size: 0.95rem;
}

/* Toolbar/row-action buttons built via $grid->addButton([...]) without a
   'color' option (e.g. Add/Edit/View used to have none — only Delete set
   'color'=>'red') fall through to the licensed jqGrid vendor's bare `.ui-btn`
   rule (public/plugins/jqgrid/css/ui.jqgrid.css): flat #fafafa background, no
   icon color. Tried a neutral gray CSS-only fallback here first, but that
   read as flat/colorless rather than "on-theme" — the actual fix is giving
   each button its own semantic color via the 'color' option PhpGrid already
   supports (see UserController.php: green=Add, blue=Edit, purple=View,
   red=Delete), matching the same theme-color remap above. Do that
   per-controller instead of papering over it here. */