/* ==========================================================================
   TVM HelpDesk - Common Application Styles
   Shared across all pages (admin + public)
   ========================================================================== */

:root {
    --brand-primary: #6B1F2E;       /* TVM maroon */
    --brand-primary-dark: #4d141f;
    --brand-primary-light: #8a3142;
    --brand-cream: #F7F1E8;
    --brand-accent: #C9A961;        /* warm gold to pair with maroon */
}

/* Map Bootstrap's primary CSS variables to the brand palette so every
   utility built on top of them (.btn-primary, .text-bg-primary, .alert-primary,
   focus rings, pagination, etc.) follows. */
:root,
[data-bs-theme="light"] {
    --bs-primary: #6B1F2E;
    --bs-primary-rgb: 107, 31, 46;
    --bs-primary-text-emphasis: #4d141f;
    --bs-primary-bg-subtle: #f3e3e6;
    --bs-primary-border-subtle: #d9b6bc;
    --bs-link-color: #6B1F2E;
    --bs-link-color-rgb: 107, 31, 46;
    --bs-link-hover-color: #4d141f;
    --bs-link-hover-color-rgb: 77, 20, 31;
}

/* Belt-and-braces overrides for any rule that hardcodes #0d6efd outside
   the variable system. */
.btn-primary,
.bg-primary,
.badge.bg-primary,
.text-bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary, a.link-primary { color: var(--brand-primary) !important; }
.bg-primary.bg-opacity-10 {
    background-color: rgba(107, 31, 46, 0.10) !important;
}
.bg-primary.bg-opacity-25 {
    background-color: rgba(107, 31, 46, 0.25) !important;
}

/* Default link color (covers <a> without explicit class). */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }
.navbar .nav-link,
.navbar-brand,
.dropdown-item,
.btn { color: inherit; }  /* don't recolor nav/btn text */
.navbar .nav-link { color: rgba(33, 37, 41, 0.85); }
.navbar .nav-link:hover { color: var(--brand-primary); }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark { color: #fff; }

/* Focus ring */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn.focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(107, 31, 46, 0.20) !important;
}

/* --------------------------------------------------------------------------
   Base / Reset
   -------------------------------------------------------------------------- */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.6;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}
/* Auto-fit height only when the HTML doesn't pin one — otherwise
   `height: auto` clobbers the height attribute (e.g. <img height="36">). */
img:not([height]):not([style*="height"]) {
    height: auto;
}

/* --------------------------------------------------------------------------
   Flash Messages
   -------------------------------------------------------------------------- */
.flash-message {
    animation: flashFadeIn 0.4s ease-out both;
}

@keyframes flashFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.flash-message.fade-out {
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(-12px);
}

/* --------------------------------------------------------------------------
   Custom Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #b0b7bf;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8a929a;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #b0b7bf #f1f1f1;
}

/* --------------------------------------------------------------------------
   Tables - Responsive Tweaks
   -------------------------------------------------------------------------- */
.table th {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #6c757d;
}

.table td {
    vertical-align: middle;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive .table {
        min-width: 600px;
    }

    .table th,
    .table td {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Card Hover Lift Effect
   -------------------------------------------------------------------------- */
.card-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Badge & Status Colors
   -------------------------------------------------------------------------- */
.badge-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 50rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-status-open {
    background-color: var(--brand-primary);
    color: #fff;
}

.badge-status-in-progress {
    background-color: #ffc107;
    color: #000;
}

.badge-status-waiting {
    background-color: #fd7e14;
    color: #fff;
}

.badge-status-resolved {
    background-color: #198754;
    color: #fff;
}

.badge-status-closed {
    background-color: #6c757d;
    color: #fff;
}

.badge-status-reopened {
    background-color: #dc3545;
    color: #fff;
}

.badge-priority-low {
    background-color: #e2e8f0;
    color: #475569;
}

.badge-priority-medium {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-priority-high {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-priority-urgent {
    background-color: #dc3545;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Utility Helpers
   -------------------------------------------------------------------------- */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.min-h-100vh {
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #fff !important;
    }

    .no-print,
    .flash-message,
    .btn,
    nav,
    footer,
    .sidebar,
    .admin-sidebar {
        display: none !important;
    }

    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }

    a[href]::after {
        content: none !important;
    }

    .table th,
    .table td {
        padding: 0.35rem 0.5rem !important;
    }

    @page {
        margin: 1.5cm;
    }
}