/* ===== Local polish overrides on top of the ported FMS system ===== */

/* Page header: align title (start) and action buttons (end) on one row */
.mot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
    margin-bottom: 20px;
}

.mot-title {
    font-size: 20px;
}

.mot-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mot-header .header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Tighten cards + tables for a denser, more professional feel */
.table-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.custom-table thead th {
    white-space: nowrap;
}

/* Consistent vertical alignment across all list tables */
.custom-table td {
    vertical-align: middle;
}

/* Prevent flex name-cells (icon + text) from overflowing into the next column:
   flex items default to min-width:auto and refuse to shrink, causing overlap. */
.custom-table td .d-flex {
    min-width: 0;
}
.custom-table td .d-flex > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Opt-in fixed columns (add `table-fixed-cols` + a <colgroup> to the table):
   keeps every field on one line with clean ellipsis so rows never grow unevenly.
   Used on tables with long free-text columns (e.g. the room location breadcrumb). */
.custom-table.table-fixed-cols {
    table-layout: fixed;
}

.custom-table.table-fixed-cols td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-table.table-fixed-cols td > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-table.table-fixed-cols td.text-center {
    overflow: visible;
}

/* DataTables generates Bootstrap `.row` control strips (length/search on top,
   info/pagination on bottom). Bootstrap `.row` has -12px side margins, which
   inside `.table-responsive` (overflow-x:auto) leak past the edge and spawn a
   phantom horizontal scrollbar. Neutralize the margins on DataTables' own rows. */
.dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Stat cards: consistent height + spacing */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

/* Buttons: consistent sizing */
.mot-btn {
    padding: 9px 16px;
    font-size: 0.9rem;
}

.mot-btn-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
}

/* ===== Form labels + validation (FMS-style) ===== */
.form-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .88rem;
    color: #374151;
    margin-bottom: 6px;
}
.form-label i { color: #00685E; font-size: .8rem; }

/* Required-field asterisk */
.form-label.required::after,
label.required::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}

/* Form controls a touch tighter + professional focus ring */
.form-control, .form-select {
    border-radius: var(--radius);
    border-color: #d7dee4;
}
.form-control:focus, .form-select:focus {
    border-color: #00685E;
    box-shadow: 0 0 0 .18rem rgba(0, 104, 94, .14);
}

/* Invalid state (added by jquery-validation-unobtrusive) */
.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: #dc2626 !important;
    background: #fef6f6;
}
.input-validation-error:focus {
    box-shadow: 0 0 0 .18rem rgba(220, 38, 38, .14) !important;
}

/* Inline field error message */
.field-validation-error,
span[asp-validation-for],
.text-danger.small {
    display: inline-block;
    font-size: .8rem;
    margin-top: 4px;
}
.field-validation-error::before {
    content: "\f06a"; /* fa exclamation-circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-inline-end: 5px;
}

/* Action buttons row stays on one line */
.action-btn-group {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* ===== Header notifications bell ===== */
.notif-bell { display: flex; align-items: center; }
.notif-bell-btn {
    position: relative; background: transparent; border: none;
    width: 40px; height: 40px; border-radius: 50%; color: #475569;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    cursor: pointer; transition: background .12s;
}
.notif-bell-btn:hover { background: #eef2f1; color: #00685E; }
.notif-badge {
    position: absolute; top: 3px; inset-inline-start: 4px;
    background: #A13525; color: #fff; border-radius: 999px;
    min-width: 17px; height: 17px; padding: 0 4px;
    font-size: .65rem; font-weight: 700; line-height: 17px; text-align: center;
}
.notif-menu { width: 340px; max-width: 92vw; padding: 0; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; overflow: hidden; }
.notif-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: #E7F3F2; color: #00685E; font-weight: 800; font-size: .9rem;
    border-bottom: 1px solid #cce5e2;
}
.notif-menu-head a { color: #00685E; font-size: .8rem; text-decoration: none; }
.notif-menu-head a:hover { text-decoration: underline; }
.notif-menu-list { max-height: 380px; overflow-y: auto; }
.notif-menu-empty { padding: 24px; text-align: center; color: #9ca3af; font-size: .85rem; }
.notif-menu-item {
    display: block; padding: 11px 14px; text-decoration: none; color: inherit;
    border-bottom: 1px solid #f1f4f3;
}
.notif-menu-item:last-child { border-bottom: none; }
.notif-menu-item:hover { background: #f7faf9; }
.notif-menu-item.unread { background: #f0f8f6; }
.notif-menu-item .nm-title { font-weight: 700; font-size: .85rem; color: #1f2937; }
.notif-menu-item.unread .nm-title { color: #00685E; }
.notif-menu-item .nm-body { font-size: .8rem; color: #6b7280; margin-top: 2px; }
.notif-menu-item .nm-time { font-size: .72rem; color: #9ca3af; margin-top: 3px; }

/* ===== DataTables length menu placed inside the teal table header ===== */
.table-card-header .dataTables_length { margin: 0; }
.table-card-header .dataTables_length label {
    color: #fff; font-size: .85rem; font-weight: 600; margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.table-card-header .dataTables_length select {
    background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4);
    border-radius: 8px; padding: 5px 10px; font-weight: 600; cursor: pointer;
}
.table-card-header .dataTables_length select option { color: #1f2937; }
/* Pagination + info footer spacing under the table body */
.table-card-body .dataTables_wrapper .dataTables_paginate { margin-top: 6px; }