/* mat-elevation-z8 */
/* // table mat */



.minimal-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 14px;
    color: #333;
    /* border: 1px solid #e0e0e0; */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.thead-fix {
    border-collapse: separate;
}

table.minimal-table.minimal-primary th {
    background: #f0f8ff !important;
}

table.minimal-table th,
.minimal-table th.mat-header-cell {
    font-weight: 600;
    text-align: center;
    /* padding: 12px 16px; */
    padding: 6px 8px;
    background: #ffffff !important;
    color: #333;
    font-size: 14px;
    border-bottom: 2px solid #e0e0e0;
    /* border-bottom: 2px solid orange; */
}

table.th-primary th,
table.th-warning th {
    padding: 12px !important;
}

table.th-primary.color th {
    /* background-color: rgba(200, 230, 255, 0.5) !important; */
    background-color: rgb(145 213 242 / 80%) !important
}

table.th-warning.color th {
    background-color: rgb(255 237 162 / 80%) !important;
}

table.minimal-table.th-warning2 th,
table.minimal-table.th-warning th,
.th-warning th.mat-header-cell {
    border-bottom: 2px solid orange !important;
}

table.mat-mdc-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* .mat-mdc-header-cell {
  border-bottom: 2px solid orange !important;
} */


table.minimal-table.th-primary th,
.th-primary th.mat-header-cell {
    border-bottom: 2px solid #55acee;
}

.th-success th.mat-header-cell {
    border-bottom: 2px solid #008d4c;
}

table.minimal-table td,
.minimal-table td.mat-cell {
    /* padding: 12px 16px; */
    padding: 6px 8px;
    border-bottom: 1px solid #eeeeee;
}

table.minimal-table>tbody>tr:hover,
.minimal-table tr.mat-row:hover {
    background: #f9f9f9;
    transition: background 0.2s;
}

table.minimal-table.no-hover>tbody>tr:hover,
.minimal-table.no-hover tr.mat-row:hover {
    background: unset;
}

/* แถวที่ถูกเลือก */
tr.selectedRow {
    background-color: #bbdefb !important;
    /* ฟ้าเข้มขึ้น */
    /* color: #0d47a1; */
    color: black;
    font-weight: bold;
    box-shadow: inset 2px 0 0 #1976d2;
    transition: background-color 0.3s ease;
}

/* เพิ่มเอฟเฟกต์เมื่อคลิก (active) */
.mat-row:active {
    background-color: #90caf9;
}

tr.th-success.selectedRow {
    background-color: #d1fae5 !important;
    color: #065f46;
    font-weight: bold;
    box-shadow: inset 4px 0 0 #10b981;
    transition: background-color 0.3s ease, color 0.3s ease;
}

tr.warning.selectedRow,
tr.th-warning.selectedRow {
    background-color: #fff3cd !important;
    color: #856404;
    font-weight: bold;
    box-shadow: inset 4px 0 0 #ffc107;
    transition: background-color 0.3s ease, color 0.3s ease;
}

tr.th-primary.selectedRow {
    background-color: #bbdefb !important;
    color: #0d47a1;
    font-weight: bold;
    box-shadow: inset 4px 0 0 #55acee;
    transition: background-color 0.3s ease, color 0.3s ease;
}


.mat-row .th-success:active {
    background-color: #008d4c;
}


th.mat-header-cell:last-of-type,
td.mat-cell:last-of-type,
td.mat-footer-cell:last-of-type {
    padding-right: 4px !important;
}

th.mat-header-cell:first-of-type,
td.mat-cell:first-of-type,
td.mat-footer-cell:first-of-type {
    padding-left: 12px !important;
}

/* /// table html */

thead.mat-header-cell th {
    font-weight: 600;
    text-align: center;
    padding: 12px 16px;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    border-bottom: 2px solid #e0e0e0;
    /* border-bottom: 2px solid orange; */
}

thead.mat-header-orange th {
    font-weight: 600;
    text-align: center;
    padding: 12px 16px;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    border-bottom: 2px solid orange !important;
}

.minimal-table tr.mat-cell td {
    padding: 12px 16px;
    border-bottom: 1px solid #eeeeee;
}

.mat-elevation-z8 {
    border-radius: 8px !important;
    overflow: auto;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 
    0px 8px 10px 1px rgba(0, 0, 0, 0.08), 
    0px 3px 10px 2px rgba(0, 0, 0, 0.08) !important;
}


.mat-elevation-z8.gray,
.mat-elevation-z8.no-shadow {
    border: solid !important;
    border-color: gainsboro !important;
    box-shadow: unset !important;
}

section.mat-elevation-z8>table.table,
div.mat-elevation-z8>table.table{
    margin-bottom: 0px;
}


table.fitwidth .mat-mdc-header-cell,
table.fitwidth .mat-mdc-cell {
    width: fit-content !important;
    white-space: nowrap !important;
}

.mat-mdc-paginator {
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
}

.mat-mdc-paginator-range-label {
    font-weight: bold;
}

.mat-mdc-icon-button {
    color: #1976d2;
}

thead.thfix2 th::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: orange;
}

thead.thfix2 th {
    position: sticky !important;
    top: 0;
    z-index: 2;
    background: white;
    padding: 12px !important;
}



/* mat tab start  */

.mat-tab-group {
    font-family: 'kanitDev' !important;
}

.mat-tab-label {
    font-weight: bold;
    font-family: 'kanitDev' !important;
    color: black !important;
    height: 42px !important;
}

.mat-tab-body,
.mat-tab-body-content {
    font-family: 'kanitDev' !important;
    padding: 4px;
}

.mat_tab_primary .mat-ink-bar {
    background-color: #3c8dbc !important;
}

.mat_tab_warning .mat-ink-bar {
    background-color: orange !important;
}

.mat_tab_warning {
    --mdc-tab-indicator-color: orange !important;
}


.mat-tab-label-content {
    font-weight: 600;
    font-family: 'kanitDev' !important;
}

.mat_tab_primary .mat-tab-label.mat-tab-label-active .mat_tab_warning .mat-tab-label.mat-tab-label-active {
    color: black !important;
    font-size: medium;
}

.mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,
.mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,
.mdc-tab-indicator--active,
.mat-tab-group .mat-tab-label.mat-tab-label-active,
.mat-tab-label.mat-tab-label-active {
    background-color: #eeeeee !important;
    color: #333 !important;
    font-weight: bold !important;
    border-radius: 6px 6px 0 0 !important;
}

/* สีของ tab group primary */
.mat_tab_primary .mat-tab-label.mat-tab-label-active {
    border-bottom: #2196f3 !important;
}

/* สีของ tab group warning */
.mat_tab_warning .mat-tab-label.mat-tab-label-active {
    border-bottom: orange !important;
}

.mat-tab-labels {
    justify-content: flex-start !important;
    width: auto !important;
}

.mat-tab-label {
    flex: 0 0 auto !important;
}

.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab {
    /* flex-grow: 1; */
    flex-grow: unset !important;
}

/* 
.mat_tab_label,
.mdc-tab__content{
    height: 44px !important; 
} */

/* mat tab end */

.mat-tooltip {
    white-space: pre-line !important;
    z-index: 100000 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border-radius: 4px;
}

.line-broken-tooltip {
    white-space: pre-line !important;
    text-align: left !important;
}

/* date picker  */

.mat-calendar {
    font-family: 'kanitDev', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 280px;
}

.mat-calendar-table-header {
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

.mat-calendar-body-cell {
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.mat-calendar-body-cell:hover:not(.mat-calendar-body-disabled) {
    background-color: #f0f4ff;
}

/* .mat-calendar-body-selected {
    background-color: #2c9fd6;
    color: white;
    font-weight: 600;
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border: 1.5px solid #2c9fd6;
    font-weight: 600;
}

.mat-calendar-arrow {
    color: #2c9fd6;
} */

.mat-calendar-previous-button,
.mat-calendar-next-button {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: background-color 0.3s ease;
}

.mat-calendar-previous-button:hover,
.mat-calendar-next-button:hover {
    background-color: #e8eaf6;
}

.mat-calendar-table-header>tr>th {
    background-color: white !important;
}

.mat-form-field-infix {
    border: unset !important;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgb(245 245 245 / 36%) !important;
}

.clear-btn {
    color: #999;
    /* เทาอ่อน */
    opacity: 0.6;
    /* โปร่งใสเล็กน้อย */
    transition: opacity 0.2s, color 0.2s;
}

.clear-btn:hover {
    color: #666;
    /* เทาเข้มนิดหน่อยเมื่อ hover */
    opacity: 1;
}

.mdc-text-field--filled:not(.mdc-text-field--disabled),
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
    height: 48px !important;
}



/* ตัวเลือก appearance
legacy (แบบเก่า)
standard (เส้นใต้)
fill (พื้นหลังเต็ม)
outline (กรอบเส้นรอบกล่อง) */
/* <mat-form-field appearance="fill">
                <mat-label>วันที่</mat-label>
                <input matInput [matDatepicker]="picker" [(ngModel)]="m?.data.recordDate">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field> */


/* date picker  */


/* mat btn  */

.mat-btn,
.mat-button,
.mat-raised-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-fab,
.mat-mini-fab {
    /* font-family: 'kanitDev', "Helvetica Neue", sans-serif !important;
    font-size: 12px;
    font-weight: 500; */

    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mat-btn:hover,
.mat-btn:focus,
.mat-btn.focus {
    color: #333;
    text-decoration: none;
}

.mat-btn-primary {
    background-color: #3c8dbc !important;
    color: white !important;
}

.mat-btn-success {
    background-color: #4caf50 !important;
    color: white !important;
}

.mat-btn-info {
    background-color: #00c0ef !important;
    color: white !important;
}

.mat-btn-danger {
    background-color: #f44336 !important;
    color: white !important;
}

.mat-btn-warning {
    background-color: #f39c12 !important;
    color: white !important;
}


/* ใน styles.scss หรือ component.scss */
.mat-btn-sm {
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}

.mat-margin {
    margin: 4px 4px 10px 4px !important;
}

/* <button mat-raised-button color="primary">Save</button>
<button mat-flat-button color="warn">Delete</button>
<button mat-stroked-button color="accent">Cancel</button>
<button mat-flat-button color="warn">Delete</button>
<button mat-icon-button>
  <mat-icon>favorite</mat-icon>
</button> */




/* mat btn  */

.full-width {
    width: 100%;
}

.multiline-tooltip .mat-tooltip {
    white-space: pre-line !important;
}

.mat-mdc-tooltip-trigger .pull-right pointer .ng-star-inserted,
.mat-tooltip {
    font-size: 12px !important;
    white-space: pre-line !important;
}

.text-center {
    text-align: center !important;
}