/* The theme's default .login-form width (20rem/320px) reads as cramped
   on anything wider than a phone. */
.login-form {
    width: 26rem;
}

/* The login card sat flush with the background with no elevation, making it
   look flat/pasted-on instead of a raised card. */
.login-form .card {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

/* Circular avatar preview on the profile page — object-fit keeps non-square
   uploads from stretching instead of just cropping to fit the circle. */
.avatar-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #dee2e6;
}

/* Password show/hide toggle: the theme's .form-group-feedback-left only
   reserves input padding on the left (for the lock icon). Adding the
   matching -right modifier class instead would push every .form-control-feedback
   in the group — including the left lock icon — to both sides at once, since
   the theme styles them by parent modifier, not per-icon. So the right-side
   padding and icon position are set directly here instead. */
#password {
    padding-right: 2.75rem;
}

/* Needs to match the theme's own selector specificity
   (.form-group-feedback-left .form-control-feedback) to actually win —
   a plain .toggle-password{left:auto} loses to it and both icons render
   pinned to left:0. */
.form-group-feedback-left .toggle-password {
    left: auto;
    right: 0;
    cursor: pointer;
}

.sidebar-dark .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #E7F5F3 !important;
    color: #00B49F !important;
}

.sidebar-dark .nav-sidebar .nav-item>.nav-link.active {
    background-color: #E7F5F3 !important;
    color: #00B49F !important;
}

/* Modern sidebar: horizontal breathing room + rounded nav items */
.sidebar .nav-sidebar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.sidebar .nav-sidebar .nav-link {
    border-radius: 0.5rem;
}

.sidebar .nav-sidebar .nav-item + .nav-item {
    margin-top: 0.125rem;
}

.sidebar .nav-sidebar > .nav-item-header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* The placeholder avatar (user.png) is a dark slate silhouette on a
   transparent background, which nearly disappears against the dark green
   sidebar. A white backdrop behind it restores contrast; real uploaded
   photos are opaque and simply cover it. */
.sidebar-avatar {
    background-color: #fff;
    object-fit: cover;
}

.table > thead > tr {
    background-color: #01534A;
    color: #fff;
}

/* border-radius never actually bends a collapsed table's border line (only
   the background fill respects it, painted per-cell) — so instead of
   fighting that, give the header's own outer edges a real border colored to
   match the fill. A cell's own border always wins the collapse conflict
   over the table's frame border (priority: cell > table) — but Bootstrap
   ALSO zeroes border-top-width on this exact th via a more specific
   selector (`.table thead:first-child tr:first-child th`), a cell-vs-cell
   fight this rule alone doesn't win on specificity. Hence !important. The
   straight edge is still there underneath, it's just invisible against the
   same-color fill. */
.table.table-bordered > thead > tr > th {
    border-top: 1px solid #01534A !important;
}

.table.table-bordered > thead > tr > th:first-child {
    border-left: 1px solid #01534A;
}

.table.table-bordered > thead > tr > th:last-child {
    border-right: 1px solid #01534A;
}

/* border-radius on a collapsed table's cells doesn't reliably round either
   the border or the background fill across browsers — the color-matched
   border above only hides the seam, it doesn't bend it. Clipping the actual
   corner via a wrapping container is what makes it visually round.

   Targeting .datatable-scroll here, not .table-responsive: our custom
   `dom` string (`<"datatable-header"fl><"datatable-scroll"rt>...`) has
   DataTables build its own wrapper and move the <table> into a fresh
   .datatable-scroll div, so .table-responsive (written in the blade view)
   never ends up as its actual parent post-init — confirmed via devtools,
   which is why targeting it earlier had zero effect.

   overflow-y only (not the shorthand) so the existing overflow-x: scroll
   on wide tables keeps working; this only clips top/bottom.

   Trade-off: a row's action dropdown menu opening downward from the very
   last row could get clipped if it extends past this container's bottom
   edge. Revisit (e.g. drop the radius, or open those menus upward) if that
   turns out to be a real problem in practice. */
.datatable-scroll {
    border-radius: 5px 5px 0 0;
    overflow-y: hidden;
}

/* .datatable-header (the Filter/Show toolbar row above the table) has its
   own border-bottom sitting right against the rounded header — an extra
   straight line stacked immediately above the curve. Drop it so the toolbar
   simply meets the colored header with no divider line. */
.datatable-header {
    border-bottom: 0;
}

table.dataTable td.dt-control:before, #sub-primary-table td.dt-control-sub-primary:before, #secondary-table td.dt-control-secondary:before {
    cursor: pointer;
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: inline-block;
    color: white;
    border: 0.15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 0.2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New",Courier,monospace;
    line-height: 1em;
    content: "+";
    background-color: #31b131;
}

table.dataTable tr.dt-hasChild td.dt-control:before, #sub-primary-table tr.dt-hasChild td.dt-control-sub-primary:before, #secondary-table tr.dt-hasChild td.dt-control-secondary:before {
    cursor: pointer;
    content: "-";
    background-color: #d33333;
}

.is-invalid + .select2-container--default .select2-selection--single {
    border: 1px solid #ef5350;
}

.span-feedback {
    width: 100%;
    margin-top: 0.5rem;
    font-size: .8125rem;
    display: none;
}

.datatable-basic .bg-warning, .status-indicator .bg-warning {
    background-color: #FCD34D !important;
}

.datatable-basic .bg-success, .status-indicator .bg-success {
    background-color: #86EFAC !important;
}

.datatable-basic .bg-danger, .status-indicator .bg-danger {
    background-color: #FCA5A5 !important;
}

.datatable-basic .bg-secondary, .status-indicator .bg-secondary {
    background-color: #CBD5E1 !important;
}

.status-indicator {
    margin-top: 10px;
}

.status-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.status-indicator-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.status-indicator-inline .status-item {
    margin-bottom: 0;
}

.status-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
}

.status-badge {
    display: inline-block;
    min-width: 90px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
}

.status-badge.bg-warning {
    background-color: #FCD34D !important;
    color: #78350F !important;
}

.status-badge.bg-success {
    background-color: #86EFAC !important;
    color: #14532D !important;
}

.status-badge.bg-danger {
    background-color: #FCA5A5 !important;
    color: #7F1D1D !important;
}

.status-badge.bg-secondary {
    background-color: #CBD5E1 !important;
    color: #1E293B !important;
}

.custom-badge {
    font-size: 0.75rem;
    padding: 0.2em 0.4em;
    margin-left: 8px;
    vertical-align: middle;
}

.photo-container {
    width: 100%; /* atau ukuran yang diinginkan */
    height: 100px; /* atau ukuran yang diinginkan */
    background-size: cover;
    background-position: center;
}

.spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* DataTables sort icon: show the descending arrow in the bottom slot (instead of
   reusing the top/ascending slot) so the icon position matches the sort direction. */
.dataTable thead .sorting_desc:after {
    content: none;
}

.dataTable thead .sorting_desc:before {
    content: "\e9c1";
    font-family: "icomoon";
    position: absolute;
    top: 50%;
    right: 1.25rem;
    font-size: 0.8125rem;
    margin-top: -0.125rem;
    opacity: 1;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Native <select class="form-control"> falls back to the browser's own caret
   squeezed into a plain 0.875rem padding, unlike Bootstrap's .custom-select
   which reserves room and draws a positioned SVG arrow. Apply the same
   treatment globally so every plain select (dashboard filters, DataTables
   length menu, etc.) gets a properly spaced arrow instead of a cramped one. */
select.form-control {
    padding-right: 2.1875rem;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.875rem center/8px 10px no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* DataTables' length-menu select isn't marked up with .form-control at all —
   the theme styles it directly via ".dataTables_length select" (see
   components.css), so the fix above never reaches it. Match that same
   selector (with equal specificity, loaded after components.css) to give it
   the same properly-spaced arrow. */
.dataTables_length select:not(.custom-select) {
    padding-right: 2.1875rem;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.875rem center/8px 10px no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dataTables_filter > label {
    display: flex;
    align-items: center;
    width: 100%;
}

.dataTables_filter input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* This input isn't a .form-control, so it misses the theme's focus style —
   match the same primary-color treatment (border + glow) on focus. */
.dataTables_filter input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    outline: 0;
}

/* The loading state is rendered as a row inside <tbody> (see the processing.dt
   handler in layouts/app.blade.php) instead of the theme's default overlay,
   which centers over the whole table (including the header) and looks wrong
   while the body is still empty. */
.dataTables_processing {
    display: none !important;
}

/* Reusable DataTables filter popup — see components/filter-panel.blade.php and
   js/backend/filter-panel.js. The button is floated into the native toolbar
   next to the search box; the panel is a plain absolutely-positioned box
   parented to .card (never inside .table-responsive), placed by hand under the
   button, so no overflow / stacking context / Popper quirk from the theme can
   clip or misplace it. */
.js-filter-wrap {
    float: left;
    margin: 0 0 1.25rem .625rem;
}

.filter-panel {
    position: absolute;
    z-index: 1050;
    display: none;
    min-width: 280px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
}

/* Select2 controls placed inside the panel */
.filter-panel .select2-container {
    width: 100% !important;
}

/* Moved from an inline <style> block in resources/views/admin/dashboard.blade.php.
   This is a hand-built, pixel-perfect rack floor plan — every box inside is
   absolutely/manually positioned to match a real physical layout, so it isn't
   meant to reflow at different screen sizes. width/height were originally in
   vw (viewport-relative), which meant the whole diagram silently resized —
   and at some widths, the floor plan's actual content needed more height than
   the vw math gave it, so it overflowed past the modal's white area onto the
   dimmed backdrop behind. Fixed px pins the diagram to one true size (~1440px
   viewport, matching the reference this was designed against) so it always
   renders identically; #rakLocationModal .modal-body below adds scrolling so
   smaller screens scroll to see it instead of the layout changing shape. */
.square {
    width: 1224px;
    min-height: 841px;
    border: 3px solid #000;
}
/* The floor plan's 5 columns use bare Bootstrap grid classes (.row/.col-lg),
   which are responsive by design: .col-lg only sits side-by-side at ≥992px
   viewports — below that it falls back to width:100% and stacks vertically,
   reflowing the whole diagram instead of just needing to scroll. Fixing
   .square's own size doesn't touch this; it's the grid classes themselves
   doing it. Locking flex-wrap + column sizing here keeps the 5 columns
   side-by-side at any viewport width, so shrinking the window only ever
   triggers .modal-body's scrollbar. */
#rakLocationModal .square .row {
    flex-wrap: nowrap !important;
}
#rakLocationModal .square .col-lg {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
    width: auto !important;
}
.box {
    width: 100%;
    height: 200px;
    border: 2px solid #000;
}

/* Boxes sitting flush against .square's own outer frame — same doubled-line
   cause as everywhere else, just against the outer frame instead of a
   sibling this time. Applied per-instance (location-col-1's first two boxes
   touch the top-left corner of the whole floor plan; its box-half touches
   the left and bottom edges; location-col-4's first box touches the top
   edge and its column's own inline `border-left` divider) rather than as a
   general rule, since which side(s) to drop depends on where in the floor
   plan each one sits. */
.box-flush-top-left {
    border-top: 0 !important;
    border-left: 0 !important;
}
.box-flush-left {
    border-left: 0 !important;
}
.box-flush-top {
    border-top: 0 !important;
}
.box-flush-bottom {
    border-bottom: 0 !important;
}
.box-half {
    width: 50%;
    height: 200px;
    border: 2px solid #000;
    float: left;
    position: absolute;
    bottom: 0;
}
.square h1 {
    color: #fff;
}
.card-box {
    border: 1px solid #000;
    border-radius: 0 !important;
}
.card-inline {
    display: inline-block;
}
/* Rack pairs (e.g. "7"/"8") are two separate .card-box siblings sitting flush
   in a flex row, each drawing its own full border — the shared edge between
   them showed both borders stacked, reading as a doubled line. Pulling every
   .card-inline that follows another .card-inline back by exactly the border
   width overlaps the two lines into one. */
.card-inline + .card-inline {
    margin-left: -1px;
}

/* Same doubled-border issue, but between stacked rows instead of side-by-side
   pairs — each numbered rack sits in its own "rack-row" flex wrapper (added
   to the blade views alongside this rule), and consecutive rows drawn with
   plain block stacking left both the row above's bottom border and the row
   below's top border visible. !important because some of these wrappers used
   to carry an ad-hoc inline `margin-top: -12px` (an earlier, imprecise stab
   at the same problem) that's since been removed in favor of this. */
.rack-row + .rack-row {
    margin-top: -1px !important;
}

/* Two decorative empty placeholder boxes (see location-col-1.blade.php) stack
   as plain siblings — same doubled-border cause as above, one level simpler
   since there's no wrapper class involved. */
.box + .box {
    margin-top: -2px;
}

/* .modal-xl caps out around 1140px, narrower than .square's fixed 1224px
   (plus .modal-body/.container padding around it) — so even on a wide
   screen the modal itself was too narrow and clipped the floor plan.
   Widening it here means .modal-body's overflow:auto below only kicks in
   as a genuine fallback, once the viewport is too small for even this.
   The .container Bootstrap wraps .square in has its own ~1140px max-width
   too — narrower than .square itself, so .square overflowed *that* box
   off-center (not evenly, since .container was the one being centered, not
   .square). Widening .container to match removes that inner mismatch. */
#rakLocationModal .modal-dialog {
    max-width: 1300px;
}
#rakLocationModal .container {
    max-width: 1260px;
}
#rakLocationModal .modal-body {
    overflow: auto;
}
.first-card {
    background-color: #ACBFD4;
    width: 35px;
    height: 100px;
}
.second-card {
    background-color: #DADFE5;
    width: 35px;
    height: 150px;
}
.third-card {
    background-color: #F2C592;
    width: 35px;
    height: 50px;
    margin-bottom: 0 !important;
}
.fourth-card {
    background-color: #799AE8;
    width: 25px;
    height: 35px;
    margin-bottom: 0 !important;
}
.fiveth-card {
    background-color: #C6D0E8;
    width: 25px;
    height: 35px;
    margin-bottom: 0 !important;
}
.sixth-card {
    background-color: #717379;
    width: 25px;
    height: 35px;
    margin-bottom: 0 !important;
}
.fourth-card > .card-body, .fiveth-card > .card-body, .sixth-card > .card-body {
    font-size: 9px
}
.card-box .card-body {
    padding: 0px;
}
.box-small-1 {
    border: 2px solid #000;
    border-top: 0;
    width: 70px;
    height: 55px;
    position: absolute;
    top: 0 !important;
    margin-top: -25px;
    margin-left: 10px;
}
.box-small-2 {
    border: 2px solid #000;
    border-top: 0;
    border-right: 0;
    width: 40px;
    height: 45px;
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    margin-top: -25px;
}

/* Moved from an inline <style> block in
   resources/views/admin/dashboard/styles.blade.php — that partial's .square
   rule silently collided with (and, being later in the rendered document,
   overrode) the real .square defined above, which is what caused the floor
   plan to shrink/reflow instead of staying fixed size. Consolidating these
   here avoids the same class of bug recurring for the rest of this partial's
   rules, and makes them win reliably regardless of include order. */
.top {
    border-top: 1px solid #000;
}
.right {
    border-right: 1px solid #000;
}
.bottom {
    border-bottom: 1px solid #000;
}
.left {
    border-left: 1px solid #000;
}
.display-table {
    display: table;
}
.display-table > div {
    display: table-row;
}
.box1 {
    display: table-cell;
    height: 80px;
    width: 25px;
    background-color: #E0E4FD;
    padding: 5px;
    font-size: 9px;
    text-align: center;
}
.box2 {
    display: table-cell;
    height: 100px;
    width: 25px;
    background-color: #E6E3E3;
    padding: 5px;
    font-size: 9px;
    text-align: center;
}
.box3 {
    display: table-cell;
    height: 50px;
    width: 25px;
    background-color: #FFCC99;
    padding: 5px;
    font-size: 9px;
    text-align: center;
}
.box4 {
    display: table-cell;
    height: 20px;
    width: 18px;
    background-color: #606060;
    padding: 5px;
    font-size: 3px;
    text-align: center;
}
.box5 {
    display: table-cell;
    height: 20px;
    width: 18px;
    background-color: #98A6D2;
    padding: 5px;
    font-size: 3px;
    text-align: center;
}
.box6 {
    display: table-cell;
    height: 20px;
    width: 18px;
    background-color: #8296D7;
    padding: 5px;
    font-size: 3px;
    text-align: center;
}
.box1-hide {
    display: table-cell;
    height: 80px;
    width: 25px;
}
p.spacer > span {
    display: inline-block;
    min-width: 80px;
}
.tooltip-inner {
    text-align: left;
}
.has-bg-image {
    transition: 0.5s;
    cursor: pointer;
}
.has-bg-image:hover {
    transform: scale(1.1);
}

/* Global modal centering: Bootstrap only centers a modal (vertically +
   horizontally) when it's given the .modal-dialog-centered modifier class,
   and most modals across the admin controllers were never given it, so
   they open pinned to the top with a lot of dead space below on anything
   taller than the dialog itself. Rather than adding that class to every
   modal one at a time, this reapplies Bootstrap's own .modal-dialog-centered
   rules (see all.min.css) to the base .modal-dialog, so every modal is
   centered by default — a modal can still opt out with .modal-dialog-top or
   similar if one genuinely needs the old pinned-to-top behavior. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
.modal-dialog::before {
    display: block;
    height: calc(100vh - 1rem);
    height: min-content;
    content: "";
}
@media (min-width: 576px) {
    .modal-dialog {
        min-height: calc(100% - 3.5rem);
    }
    .modal-dialog::before {
        height: calc(100vh - 3.5rem);
        height: min-content;
    }
}
.modal-dialog.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.modal-dialog.modal-dialog-scrollable .modal-content {
    max-height: none;
}
.modal-dialog.modal-dialog-scrollable::before {
    content: none;
}