/* CityLink Back Office - Theme (Fomantic UI + font Kanit + สีแบรนด์จาก citylink.express) */

:root {
    --cl-green: #00a651;
    --cl-green-dark: #378f50;
    --cl-gold: #efac43;
}

/* alertifyjs: ซ่อนปุ่ม OK/Cancel เดิม ไว้ใส่ปุ่มของเราเองแทนทีหลัง (ผูก event เองภายหลัง) */
.my-alertify-ok,
.my-alertify-cancel {
    display: none;
}

/* alertifyjs: ให้กล่อง popup ย่อ/ขยายตามความยาวข้อความจริง แทนที่จะกว้างคงที่ 50% ของจอเสมอ */
.alertify .ajs-dialog {
    width: fit-content !important;
    min-width: 320px !important;
    max-width: 500px !important;
}

/* ui.tabular.menu: เดิม Fomantic ใส่ font-weight:bold ให้ .active.item ตรงๆ (ไม่ใช่ inherit)
   ทำให้ข้อความกว้างขึ้นตอนกดเลือก แล้วดันความกว้างแท็บอื่นขยับตาม - บังคับให้น้ำหนักตัวอักษรเท่ากันเสมอ
   แล้วบังคับให้ทุกแท็บกว้างเท่ากัน (แบ่งพื้นที่เท่าๆ กันด้วย flex) แบบเดียวกับ ShipEZi */
.ui.tabular.menu {
    display: flex;
}
.ui.tabular.menu .item {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    font-weight: 400 !important;
}
/* browser default focus outline เป็นสีฟ้า เปลี่ยนเป็นสีเขียวแบรนด์แทน */
.ui.tabular.menu .item:focus,
.ui.tabular.menu .item:focus-visible {
    outline: 2px solid var(--cl-green);
    outline-offset: -2px;
}
/* แท็บที่ active อยู่ พื้นหลังเขียว ตัวหนังสือขาว ส่วนแท็บที่ไม่ active ปล่อยไว้ตามเดิม */
.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover {
    background-color: #21ba45 !important;
    color: #ffffff !important;
}

body,
.ui.form input,
.ui.form textarea,
.ui.button,
.ui.input input,
.ui.table,
.ui.menu,
.ui.header,
.ui.modal,
.ui.message,
.ui.label {
    font-family: "Kanit", sans-serif !important;
    font-weight: 400 !important;
}

body {
    background: #f5f5f5;
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: var(--cl-green);
}
a:hover {
    color: var(--cl-green-dark);
}

/* ---- ปุ่มหลัก/รอง ใช้สีแบรนด์แทนค่า default ของ Fomantic ---- */
.ui.primary.button,
.ui.primary.buttons .button {
    background-color: var(--cl-green);
}
.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.primary.button:active {
    background-color: var(--cl-green-dark);
}

.ui.orange.button {
    background-color: var(--cl-gold);
}
.ui.orange.button:hover,
.ui.orange.button:focus,
.ui.orange.button:active {
    background-color: #d99a35;
}

/* ---- Navbar: เขียวแบรนด์แทนเขียว default ของ Fomantic ---- */
.ui.green.menu .item,
.ui.green.inverted.menu {
    background-color: var(--cl-green) !important;
}
.ui.green.inverted.menu .item:hover,
.ui.green.inverted.menu .active.item {
    background-color: var(--cl-green-dark) !important;
}

/* ---- Checkbox: ให้ติ๊กแล้วเป็นสีเขียวแบรนด์ ---- */
.ui.checkbox input:checked ~ label::before {
    border-color: var(--cl-green);
}
.ui.checkbox input:checked ~ label::after {
    color: var(--cl-green);
}

/* ---- Form focus border สีเขียวแบรนด์ ---- */
.ui.form input:not([type]):focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="password"]:focus,
.ui.input input:focus {
    border-color: var(--cl-green);
}

/* ---- แถวลูกค้าในหน้า Invoice ---- */
.customer-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.customer-head .cust-no {
    color: rgba(0, 0, 0, .4);
    font-weight: 400;
}
.customer-head .cust-id {
    color: var(--cl-green-dark);
    font-weight: 700;
}
.customer-head .cust-name {
    font-weight: 700;
}
.customer-head .cust-extra {
    margin-left: auto;
    font-weight: 400;
    font-size: .85714286rem;
    color: rgba(0, 0, 0, .5);
}

tr.invoice-row {
    cursor: pointer;
}

/* ---- Pagination (custom, ไม่ใช่ของ Fomantic เพราะต้องการช่วง ... เอง) ---- */
.ui-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: .28571429rem;
    width: fit-content;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .1);
}
.ui-pagination li {
    border-right: 1px solid rgba(34, 36, 38, .15);
}
.ui-pagination li:last-child {
    border-right: none;
}
.ui-pagination li a {
    display: block;
    padding: .65em 1em;
    color: rgba(0, 0, 0, .8);
    text-decoration: none;
    background: #fff;
    font-weight: 700;
}
.ui-pagination li a:hover {
    background: #f9fafb;
}
.ui-pagination li.active a {
    background: var(--cl-green);
    color: #fff;
}
.ui-pagination li.disabled a {
    color: rgba(0, 0, 0, .3);
    pointer-events: none;
}
.ui-pagination li.ellipsis span {
    display: block;
    padding: .65em .6em;
    color: rgba(0, 0, 0, .4);
}