/* Repair Tickets — shared application design system */
:root {
    --rt-navy: #172554;
    --rt-primary: #2563eb;
    --rt-primary-dark: #1d4ed8;
    --rt-sky: #eaf2ff;
    --rt-ink: #172033;
    --rt-muted: #64748b;
    --rt-line: #e2e8f0;
    --rt-surface: #ffffff;
    --rt-canvas: #f5f7fb;
    --rt-radius: 14px;
    --rt-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    --rt-success: #047857;
    --rt-success-soft: #d1fae5;
    --rt-warning: #b45309;
    --rt-warning-soft: #fef3c7;
    --rt-danger: #b91c1c;
    --rt-danger-soft: #fee2e2;
    --rt-info: #0369a1;
    --rt-info-soft: #e0f2fe;
}

html { min-height: 100%; }
body {
    min-height: 100vh;
    background: var(--rt-canvas);
    color: var(--rt-ink);
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: .95rem;
}
a { color: var(--rt-primary); }
a:hover { color: var(--rt-primary-dark); }

/* Navigation */
.app-navbar {
    min-height: 68px;
    background: linear-gradient(105deg, var(--rt-navy), #1e3a8a) !important;
    box-shadow: 0 3px 16px rgba(15, 23, 42, .15);
}
.app-navbar .navbar-brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.app-navbar .brand-mark {
    width: 33px; height: 33px; display: inline-grid; place-items: center;
    margin-right: .5rem; border-radius: 10px; background: rgba(255,255,255,.14);
}
.app-navbar .nav-link {
    margin: .2rem; padding: .5rem .7rem !important; border-radius: 8px;
    color: rgba(255,255,255,.76) !important; font-size: .88rem; transition: .18s ease;
}
.app-navbar .nav-link i { width: 1.1rem; margin-right: .3rem; text-align: center; }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active {
    color: #fff !important; background: rgba(255,255,255,.14);
}
.app-navbar .nav-link.logout-link { color: #fecaca !important; }
.app-navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }

/* Page framing: use a deliberate reading width instead of stretching every screen. */
.app-main { max-width: 1320px; margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; }
.app-navbar + .container-fluid {
    width: min(1360px, calc(100% - 2.5rem)); margin: 1.75rem auto 2.5rem !important;
    padding: 0;
}
.app-navbar + .container-fluid:not([class*="app-layout"]) { max-width: 1320px; }
.app-layout-list, .app-layout-report { max-width: 1360px; }
.app-layout-dashboard { max-width: 1280px; }
.app-layout-history { max-width: 1180px; }
.app-layout-form { max-width: 960px; }
.app-layout-form .card, .app-layout-form .filter-panel { box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.app-layout-list > .card, .app-layout-report > .card { min-width: 0; }
.app-navbar + .container-fluid > .row:first-child h1,
.app-navbar + .container-fluid > .row:first-child .d-flex > h1 {
    margin: 0; color: var(--rt-ink); font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 750; letter-spacing: -.035em;
}
.app-navbar + .container-fluid > .row:first-child h1 > i { color: var(--rt-primary); margin-right: .35rem; }
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.5rem !important; padding: 1.35rem 1.5rem;
    background: linear-gradient(110deg, #fff, #f7faff); border: 1px solid var(--rt-line);
    border-radius: var(--rt-radius); box-shadow: var(--rt-shadow);
}
.page-title { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 750; letter-spacing: -.035em; }
.page-title .page-title-icon { color: var(--rt-primary); margin-right: .55rem; }
.page-header .text-muted { margin-top: .35rem !important; color: var(--rt-muted) !important; }

/* Bootstrap component refinements */
.card { border: 1px solid var(--rt-line); border-radius: var(--rt-radius); box-shadow: var(--rt-shadow); overflow: hidden; }
.card-header { padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid var(--rt-line); font-weight: 700; }
.card-body { padding: 1.25rem; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem .9rem; border-bottom-color: #edf1f6; }
.table thead th { color: #475569; background: #f8fafc; font-size: .78rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.table tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}
.table tbody td .ticket-number,
.table tbody td .badge,
.table tbody td .btn,
.table tbody td .action-buttons,
.table tbody td .ticket-action-btn-group {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.table tbody td.text-nowrap,
.table tbody td .text-nowrap { white-space: nowrap; }
.dashboard-recent-tickets { table-layout: fixed; }
.dashboard-recent-tickets th:nth-child(1), .dashboard-recent-tickets td:nth-child(1) { width: 13%; }
.dashboard-recent-tickets th:nth-child(2), .dashboard-recent-tickets td:nth-child(2) { width: 30%; }
.dashboard-recent-tickets th:nth-child(3), .dashboard-recent-tickets td:nth-child(3) { width: 17%; }
.dashboard-recent-tickets th:nth-child(4), .dashboard-recent-tickets td:nth-child(4) { width: 17%; }
.dashboard-recent-tickets th:nth-child(5), .dashboard-recent-tickets td:nth-child(5) { width: 13%; }
.dashboard-recent-tickets th:nth-child(6), .dashboard-recent-tickets td:nth-child(6) { width: 10%; }
.dashboard-recent-tickets td:nth-child(5) .badge { display: inline-block; max-width: 100%; white-space: normal; text-align: center; }
.login-history-table { table-layout: fixed; }
.login-history-table th:nth-child(1), .login-history-table td:nth-child(1) { width: 15%; }
.login-history-table th:nth-child(2), .login-history-table td:nth-child(2) { width: 12%; }
.login-history-table th:nth-child(3), .login-history-table td:nth-child(3) { width: 16%; }
.login-history-table th:nth-child(4), .login-history-table td:nth-child(4) { width: 15%; }
.login-history-table th:nth-child(5), .login-history-table td:nth-child(5) { width: 15%; }
.login-history-table th:nth-child(6), .login-history-table td:nth-child(6) { width: 13%; }
.login-history-table th:nth-child(7), .login-history-table td:nth-child(7) { width: 14%; }
.login-history-table .status-badge { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; white-space: nowrap; }
.sla-overdue-table { table-layout: auto; min-width: 640px; }
.sla-overdue-table th:nth-child(1), .sla-overdue-table td:nth-child(1) { width: 20%; }
.sla-overdue-table th:nth-child(2), .sla-overdue-table td:nth-child(2) { width: 35%; }
.sla-overdue-table th:nth-child(3), .sla-overdue-table td:nth-child(3) { width: 25%; }
.sla-overdue-table th:nth-child(4), .sla-overdue-table td:nth-child(4) { width: 20%; }
.sla-overdue-table td { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.table-hover tbody tr:hover > * { background-color: #f4f8ff; }
.form-label, label { color: #334155; font-weight: 650; font-size: .88rem; }
.form-control, .form-select { min-height: 42px; border-color: #cbd5e1; border-radius: 9px; }
.form-control:focus, .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12); }
.btn { border-radius: 9px; font-weight: 650; padding: .5rem .9rem; }
.btn-primary { background: var(--rt-primary); border-color: var(--rt-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--rt-primary-dark); border-color: var(--rt-primary-dark); }
.btn-outline-primary { color: var(--rt-primary); border-color: #93c5fd; }
.badge { padding: .42em .68em; border-radius: 999px; font-weight: 650; }
.alert { border-radius: 11px; border-width: 1px; }
.card-body p, .card-body td, .card-body th,
.card-body .field-value, .card-body .info-value,
.modal-body, .alert {
    overflow-wrap: anywhere;
    word-break: normal;
}
.card-body .text-nowrap, .card-body .ticket-number,
.card-body .badge, .card-body .btn,
.card-body button, .card-body input, .card-body select {
    overflow-wrap: normal;
    word-break: normal;
}
.table-responsive { overflow-x: auto; }
.app-navbar + .container-fluid.app-layout-list {
    width: min(1500px, calc(100% - 2.5rem));
    max-width: 1500px;
}
.tickets-list-table { min-width: 1240px; }
.tickets-list-table th:nth-child(1), .tickets-list-table td:nth-child(1) { width: 10%; }
.tickets-list-table th:nth-child(2), .tickets-list-table td:nth-child(2) { width: 20%; }
.tickets-list-table th:nth-child(3), .tickets-list-table td:nth-child(3) { width: 11%; }
.tickets-list-table th:nth-child(4), .tickets-list-table td:nth-child(4) { width: 11%; }
.tickets-list-table th:nth-child(5), .tickets-list-table td:nth-child(5) { width: 8%; }
.tickets-list-table th:nth-child(6), .tickets-list-table td:nth-child(6) { width: 9%; }
.tickets-list-table th:nth-child(7), .tickets-list-table td:nth-child(7) { width: 9%; }
.tickets-list-table th:nth-child(8), .tickets-list-table td:nth-child(8) { width: 8%; }
.tickets-list-table th:nth-child(9), .tickets-list-table td:nth-child(9) { width: 7%; }
.tickets-list-table th:nth-child(10), .tickets-list-table td:nth-child(10) { width: 7%; }
.pagination .page-link { color: var(--rt-primary); border-color: var(--rt-line); }
.pagination .active .page-link { background: var(--rt-primary); border-color: var(--rt-primary); }

.filter-panel { background: #fff; border: 1px solid var(--rt-line); box-shadow: var(--rt-shadow); border-radius: var(--rt-radius); }
.pagination-container { background: #fff; border: 1px solid var(--rt-line); box-shadow: none; border-radius: 11px; }
.ticket-number { color: var(--rt-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.empty-state { padding: 3.25rem 1rem; color: var(--rt-muted); }

/* Dashboard and report summaries */
.card-stat { height: 100%; }
.card-stat .card-body { display: flex; align-items: center; gap: 1rem; min-height: 122px; }
.stat-icon {
    width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 13px; font-size: 1.25rem;
}
.stat-primary { color: #1d4ed8; background: #dbeafe; }
.stat-warning { color: #b45309; background: #fef3c7; }
.stat-info { color: #0369a1; background: #e0f2fe; }
.stat-success { color: #047857; background: #d1fae5; }
.stat-secondary { color: #475569; background: #e2e8f0; }
.stat-title { margin: 0 0 .25rem; color: var(--rt-muted); font-size: .82rem; font-weight: 650; }
.stat-value { margin: 0; color: var(--rt-ink); font-size: 1.8rem; font-weight: 750; line-height: 1; }
.chart-container, .chart-section { background: #fff; border: 1px solid var(--rt-line); border-radius: var(--rt-radius); box-shadow: var(--rt-shadow); }
.stat-card { border: 1px solid var(--rt-line) !important; border-left: 4px solid var(--rt-primary) !important; border-radius: var(--rt-radius); box-shadow: var(--rt-shadow); }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 23, 42, .11) !important; }
.stat-card.success { border-left-color: #10b981 !important; }
.stat-card.danger { border-left-color: #ef4444 !important; }
.stat-card.warning { border-left-color: #f59e0b !important; }
.stat-card.info { border-left-color: #0ea5e9 !important; }

/* Authentication screens */
.auth-page, .register-page {
    min-height: 100vh; background: radial-gradient(circle at 15% 15%, #3b82f6 0, transparent 27%),
        linear-gradient(135deg, #0f172a, #1e3a8a) !important;
}
.login-page {
    min-height: 100vh; background: radial-gradient(circle at 15% 15%, #3b82f6 0, transparent 27%),
        linear-gradient(135deg, #0f172a, #1e3a8a);
}
.login-container {
    width: min(100% - 2rem, 420px); min-height: 100vh; margin: 0 auto; padding: 1.25rem 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.login-card { width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; box-shadow: 0 24px 65px rgba(2, 6, 23, .35); }
.login-card-header { padding: 2.35rem 2rem; color: #fff; text-align: center; background: linear-gradient(120deg, #1e3a8a, #2563eb); }
.login-card-header .icon { display: block; margin-bottom: .85rem; font-size: 2.5rem; }
.login-card-header h1 { margin: 0; font-size: 1.55rem; font-weight: 750; letter-spacing: -.025em; }
.login-card-header p { margin: .45rem 0 0; opacity: .82; }
.login-card-body { padding: 2rem; background: #fff; }
.login-form-group { margin-bottom: 1.25rem; }
.login-label { display: block; margin-bottom: .5rem; color: #334155; font-size: .88rem; font-weight: 650; }
.login-label i { width: 1.15rem; color: var(--rt-primary); }
.login-input { min-height: 46px; border: 1px solid #cbd5e1 !important; border-radius: 9px; }
.login-input:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 .22rem rgba(37,99,235,.12) !important; }
.login-btn-submit { width: 100%; padding: .72rem 1rem; color: #fff; background: var(--rt-primary); border: 1px solid var(--rt-primary); border-radius: 9px; font-weight: 700; }
.login-btn-submit:hover { color: #fff; background: var(--rt-primary-dark); border-color: var(--rt-primary-dark); }
.login-error { display: flex; gap: .65rem; align-items: center; margin-bottom: 1.25rem; padding: .85rem 1rem; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; }
.login-card-footer { padding: 1.25rem 2rem; text-align: center; background: #f8fafc; border-top: 1px solid var(--rt-line); }
.login-card-footer p { margin: .25rem 0; color: var(--rt-muted); font-size: .9rem; }
.login-register-link { font-weight: 700; text-decoration: none; }
.login-footer-info { margin-top: 1.5rem; color: rgba(255,255,255,.75); font-size: .84rem; }
.login-footer-info p { margin: 0; }
.auth-panel { max-width: 560px !important; min-height: 100vh; display: grid; place-items: center; }
.auth-panel .card { width: 100%; }
.auth-panel .card-body { padding: 2rem !important; }
.register-container > div:first-child { border: 1px solid rgba(255,255,255,.25) !important; border-radius: 16px !important; box-shadow: 0 24px 65px rgba(2, 6, 23, .35) !important; }
.register-container > div:first-child > div:first-child { background: linear-gradient(120deg, #1e3a8a, #2563eb) !important; }
.register-page { font-family: "Segoe UI", Tahoma, sans-serif !important; }
.register-page .form-control { border-color: #cbd5e1 !important; box-shadow: none !important; }
.register-page .btn-register { background: var(--rt-primary) !important; box-shadow: none !important; }

/* Long forms, tickets, and empty/error states */
.accordion { overflow: hidden; border: 1px solid var(--rt-line); border-radius: var(--rt-radius); }
.accordion-item { border-color: var(--rt-line); }
.accordion-button { font-weight: 700; color: var(--rt-ink); }
.accordion-button:not(.collapsed) { color: var(--rt-primary-dark); background: #eff6ff; box-shadow: inset 0 -1px 0 var(--rt-line); }
.accordion-body { background: #fcfdff; }
.nav-tabs { border-bottom-color: var(--rt-line); }
.nav-tabs .nav-link { border-radius: 9px 9px 0 0; color: var(--rt-muted); font-weight: 650; }
.nav-tabs .nav-link.active { color: var(--rt-primary); border-color: var(--rt-line) var(--rt-line) #fff; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.error-container { max-width: 500px; padding: 2.5rem; text-align: center; background: #fff; border: 1px solid var(--rt-line); border-radius: 18px; box-shadow: var(--rt-shadow); }
.error-icon { margin: 0 auto 1rem; color: #dc2626; font-size: 3rem; }
footer { background: #0f172a !important; border-top: 1px solid rgba(255,255,255,.08); }
footer .container-fluid { width: min(1320px, calc(100% - 2.5rem)); margin: 0 auto; padding: 0; }

/* Keep the legacy registration markup on the shared blue palette. */
body.register-page { background: linear-gradient(135deg, var(--rt-navy), var(--rt-primary)) !important; }
body.register-page > .register-container > div > div:first-child,
body.register-page #submitBtn { background: linear-gradient(135deg, var(--rt-navy), var(--rt-primary)) !important; }
body.register-page label i[style*="#667eea"],
body.register-page a[style*="#667eea"] { color: var(--rt-primary) !important; }
body.register-page input[style*="#e0e0e0"] { border-color: #cbd5e1 !important; }

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse { padding: .65rem 0; }
    .app-navbar .nav-link { margin: .12rem 0; padding: .65rem .75rem !important; }
    .app-layout-list, .app-layout-report, .app-layout-dashboard, .app-layout-history, .app-layout-form { max-width: none; }
}
@media (max-width: 575.98px) {
    .app-main { padding: 1rem .8rem 2rem; }
    .app-navbar + .container-fluid { width: calc(100% - 1.6rem); margin: 1rem auto 2rem !important; }
    .page-header { padding: 1rem; flex-direction: column; }
    .card-body { padding: 1rem; }
    .table > :not(caption) > * > * { padding: .7rem .65rem; }
}