/* Shared Component Styles */

/* Circle Button Styles */
.circle-button {
    border-radius: 50% !important;
    padding: 0.5rem;
}

.gmc-input > input.gmc-input-root-outlined,
div.gmc-input-slot.gmc-input-root-outlined,
.gmc-input > input.gmc-input-root-outlined.gmc-input-root-adorned-end,
div.gmc-input-slot.gmc-input-root-outlined.gmc-input-root-adorned-end,
.gmc-input > input.gmc-input-root-outlined,
div.gmc-input-slot.gmc-input-root-outlined,
.gmc-input > input.gmc-input-root-outlined.gmc-input-root-adorned-end,
div.gmc-input-slot.gmc-input-root-outlined.gmc-input-root-adorned-end,
.gmc-autocomplete input {
    padding: 0.625rem 0px 0.625rem 0.75rem !important;
}

.gmc-input,
.gmc-select,
.gmc-autocomplete {
    font-size: 0.875rem !important;
}

.gmc-input-control > .gmc-input-control-input-container > .gmc-input-label-inputcontrol {
    font-size: 0.875rem !important;
}

.gmc-input-numeric-spin svg.gmc-icon-root {
    font-size: 0.75rem;
}

/* Khi label đang ở trạng thái bình thường (nằm giữa input) */
.gmc-input-label-outlined {
    transform: translate(0.625rem, 0.625rem) scale(1) !important;
}

/* Khi .gmc-shrink xuất hiện trên div cha (label cần nổi lên) */
.gmc-shrink ~ label.gmc-input-label.gmc-input-label-inputcontrol.gmc-input-label-outlined,
.gmc-input:focus-within ~ label.gmc-input-label.gmc-input-label-inputcontrol.gmc-input-label-outlined {
    transform: translate(0.625rem, -0.5rem) scale(0.75) !important;
}

/* Fix datagrid column shrink */
/* thead .column-header, */
thead.gmc-table-head th.gmc-table-cell {
    white-space: nowrap;
}

/* Remove card header padding bottom */
.gmc-card-header ~ .gmc-card-content {
    padding-top: 0;
}

/* Card actions left align by default */
.gmc-card-actions {
    justify-content: flex-end;
    gap: 0.5rem;
}

/* remove chip's default margin */
.gmc-chip {
    margin: 0;
}

.gmc-tab {
    padding: 6px 24px;
}

.gmc-nav-group * .gmc-navmenu .gmc-nav-item .gmc-nav-link {
    padding-inline-end: 12px;
}

/* Dành cho GMCChipSet của MES phân theo Grid */
.chip-grid {
    display: grid !important;
}

.chip-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.chip-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.chip-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.chip-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}
.chip-grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.chip-grid .gmc-chip {
    width: 100%;
    justify-content: center;
    height: 50px;
}