/*
    Override สุดท้ายในลำดับ CSS cascade เสมอ (ดู Components/App.razor) — reskin Radzen ให้เข้ากับธีม Datix
    (MudBlazor ถูกถอดออกจากโปรเจกต์ทั้งหมดแล้ว เพราะ CSS ของมันเซ็ต global reset (*, body) ที่ไม่ scope เฉพาะ
    .mud-* ทำให้ธีม Datix พังทั้งหน้าแค่โหลดไฟล์ CSS เข้ามาเฉย ๆ — ดูรายละเอียดใน App.razor)
*/

/* Radzen เซ็ต header ตารางเป็นตัวพิมพ์ใหญ่ทั้งหมด (UPPERCASE) โดย default — Datix ใช้ตัวพิมพ์ปกติ */
:root {
    --rz-grid-header-text-transform: none;
}

/* จัดฟอนต์ Radzen ให้ใช้ THSarabunNew เดียวกับทั้งแอป แทนฟอนต์เริ่มต้นของ Radzen เอง */
.rz-body,
.rz-grid-table,
.rz-dropdown,
.rz-dropdown-panel,
.rz-chart,
.rz-chkbox-label,
.rz-chkbox-template {
    font-family: THSarabunNew, sans-serif !important;
}

/* RadzenDataGrid ทุกหน้าในแอป — ปรับตาม selector จริงของ Radzen (.rz-column-title/.rz-cell-data) ตามที่อ้างอิงจาก
   _content/Radzen.Blazor/css/default-base.css โดยตรง แทนการตั้งค่าที่ th/td ตรง ๆ (ของเดิม) ซึ่งชนกับ
   padding/font-size ที่ Radzen คำนวณจาก CSS custom property ของมันเอง — หัวตารางใช้สีน้ำเงิน Datix (#5387e4) + ตัวอักษร
   ขาว ให้เข้าชุดกับ .table thead th ของ Bootstrap ธรรมดาทั้งแอป (main.min.css) แทนสีเทาอ่อนเดิมที่ไม่ตรงกับตารางอื่น ๆ
   (ตัด class -striped ออกจาก selector ต้นฉบับเพราะกริดในแอปนี้ไม่มีกริดไหนเปิด AllowStriped เลยไม่มี class นั้นใน DOM จริง) */
.rz-grid-table thead th {
    background-color: #5387e4;
}

.rz-grid-table thead th .rz-column-title {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: var(--rz-grid-cell-line-height);
}

.rz-grid-table tbody > tr:not(.rz-expanded-row-content) > td {
    padding: 5px !important;
}

.rz-grid-table td .rz-cell-data {
    font-size: 1.15rem;
    white-space: normal;
    word-break: break-word;
}

.rz-grid-table tbody tr:hover {
    background-color: #f6f7fa;
}

/* ปุ่มค้นหา/เพิ่มข้อมูล/ไอคอนแก้ไข-ลบ ทุกหน้าที่มี RadzenDataGrid — ต้นแบบคือ AU_Role.razor ย้ายมาไว้ global ที่นี่
   (เดิมอยู่ใน AU_Role.razor.css แบบ CSS isolation ซึ่ง scope เฉพาะ component เดียว ใช้ข้ามหน้าไม่ได้) เพื่อให้ทุกหน้า
   ที่แปะคลาส .au-role-btn/.au-role-icon-btn ได้ผลลัพธ์เดียวกันหมด — ดูที่มาของแต่ละกฎในคอมเมนต์เดิมของไฟล์นี้
   (mycustom.css เซ็ต .btn { font-size: inherit !important } ทำให้ปุ่มทุกปุ่มโตตาม body 1.3rem ทั้งแอป, ปุ่มไอคอนต้อง
   บังคับ padding-bottom:0 เพราะ .btn-icon ของ Datix (main.min.css) ตั้ง padding มาแล้วชนกัน) */
.au-role-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 1.15rem !important;
    line-height: 1.2;
}

.au-role-btn i {
    font-size: 1rem;
    line-height: 1;
}

.au-role-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    padding-bottom: 0px !important;
    border-radius: 0.5rem;
    font-size: 1rem !important;
}

/* ปุ่ม/กรอบ RadzenDropDown, RadzenNumeric ให้มุมโค้งและความสูงใกล้เคียง .form-control ของ Datix */
.rz-dropdown,
.rz-numeric,
.rz-textbox {
    border-radius: 0.5rem !important;
    border-color: #ccd4e6 !important;
}

/* RadzenCheckBox/RadzenSwitch ใช้สี primary ของ Datix แทนสีน้ำเงิน/เขียวเริ่มต้นของ Radzen
   (ใช้ CSS custom properties ของ Radzen เองแทนการ !important ทับคลาส เพื่อให้ครอบคลุมทุก state
   (hover/disabled) ที่ component คำนวณจากตัวแปรเดียวกัน — .rz-chkbox-box คือคลาสจริง ไม่ใช่ .rz-checkbox-box) */
:root {
    --rz-checkbox-checked-background-color: #5387e4;
    --rz-checkbox-checked-hover-background-color: #3f6fcc;
    --rz-checkbox-checked-border: 1px solid #5387e4;
    --rz-checkbox-checked-hover-border: 1px solid #3f6fcc;
}

.rz-switch.rz-switch-checked .rz-switch-track {
    background-color: #5387e4 !important;
    border-color: #5387e4 !important;
}

/* ตาราง permission tree (AU_Role.razor) — Bootstrap table ธรรมดา ไม่ใช่ RadzenDataGrid จึงไม่โดนกฎ .rz-grid-table
   ด้านบน ทำให้ font-size สืบทอดจาก body (1.3rem) ตรง ๆ ทั้งตาราง ทั้ง header/แถว/label เช็คบ็อกซ์ขนาดเท่ากันหมด
   ทำให้ห้วข้อ 4 คอลัมน์ขวา (เปิดดู/เพิ่ม/แก้ไข/ลบ) ที่บีบอยู่ใน 90px ดูอึดอัดกว่าคอลัมน์ "หน้าจอ" — ลดขนาด+จัดระยะห่าง
   ให้สม่ำเสมอทั้งตารางตามอัตราส่วนของ template ต้นแบบ (tables.html) แทน */
.perm-tree-table {
    font-size: 1.15rem;
}

.perm-tree-table th,
.perm-tree-table td {
    padding: 5px 1rem;
    vertical-align: middle;
}

.perm-tree-table thead th {
    font-size: 1.15rem;
    font-weight: 600;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.perm-tree-table thead th span {
    font-size: 1.15rem;
}

.perm-tree-table .rz-chkbox {
    margin: 0;
}