/* ==========================================
   FAIDesk Theme � Aligned with MSuite-UI
   Primary: #007acc | Font: Outfit
   ========================================== */

:root {
    --primary-color:        #007acc;
    --primary-dark:         #005f9e;
    --primary-light:        #3399dd;
    --primary-lighter:      #cce5f7;

    --accent-color:         #ff4081;
    --success-color:        #037a33;
    --warning-color:        #faa41a;
    --danger-color:         #cc0028;
    --info-color:           #007acc;

    --body-bg:              #f4f5f7;
    --bg-primary:           #ffffff;
    --bg-panel-head:        #f5f5f5;

    --text-primary:         #212121;
    --text-secondary:       #8e918f;
    --text-muted:           #8e918f;

    --gray-50:              #f9fafb;
    --gray-100:             #f5f5f5;
    --gray-200:             #e5e7eb;
    --gray-300:             #d1d5db;
    --gray-400:             #9ca3af;
    --gray-500:             #6b7280;

    --card-shadow:          1px 0px 4px rgba(177,177,177,0.4), 0 0px 4px rgba(161,161,161,0.2);
    --navbar-shadow:        0 2px 4px rgba(177,177,177,0.4), 0 2px 4px rgba(161,161,161,0.2);

    --radius-sm:            4px;
    --radius-md:            5px;
    --radius-lg:            8px;
    --radius-xl:            12px;

    --transition-base:      200ms ease;
    --transition-slow:      300ms ease;

    --font-family:          'Outfit', sans-serif;
    --font-size-base:       13.5px;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Density tokens — used across cards, tables, buttons, forms, headers */
    --space-xxs:            0.25rem;   /* 4px  */
    --space-xs:             0.4rem;    /* ~6px */
    --space-sm:             0.55rem;   /* ~8px */
    --space-md:             0.75rem;   /* 12px */
    --space-lg:             1rem;      /* 16px */
}

/* ==========================================
   Base
   ========================================== */
html, body {
    font-family:      var(--font-family);
    font-size:        var(--font-size-base);
    color:            var(--text-primary);
    background-color: var(--body-bg);
    line-height:      1.4;
}

h1, h2, h3, h4, h5, h6 {
    font-family:   var(--font-family);
    font-weight:   var(--font-weight-bold);
    color:         var(--text-primary);
    margin-bottom: 0.35rem;
    line-height:   1.25;
}

h1 { font-size: 1.25rem; }
h2 { font-size: 1.10rem; }
h3 { font-size: 1.00rem; }
h4 { font-size: 0.95rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.8125rem; }

/* ==========================================
   Cards
   ========================================== */
.card {
    background-color: #ffffff;
    border:           none;
    border-radius:    var(--radius-md);
    box-shadow:       var(--card-shadow);
    margin-top:       6px;
    margin-bottom:    6px;
    transition:       box-shadow var(--transition-base);
}

.card:hover {
    box-shadow: 1px 2px 6px rgba(177,177,177,0.45), 0 2px 6px rgba(161,161,161,0.25);
}

.card-header {
    background-color: var(--primary-color);
    color:            #ffffff;
    border-radius:    var(--radius-md) var(--radius-md) 0 0 !important;
    border:           none;
    padding:          0.45rem 0.875rem;
    font-weight:      var(--font-weight-semibold);
    font-size:        0.85rem;
    letter-spacing:   0.2px;
}

.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    color:         #ffffff;
    margin-bottom: 0;
    font-size:     0.875rem;
    font-weight:   var(--font-weight-semibold);
}

.card-body { padding: 0.75rem 0.875rem; }

.card-footer {
    background-color: var(--bg-panel-head);
    border-top:    1px solid var(--gray-200);
    padding:       0.45rem 0.875rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.maincard {
    background-color: #ffffff;
    border:           none;
    box-shadow:       var(--card-shadow);
    margin:           0 0 12px 0;
    padding:          12px 14px;
    border-radius:    var(--radius-md);
}

/* ==========================================
   Statistics Cards
   ========================================== */
.stats-card {
    background:    #ffffff;
    border-radius: var(--radius-md);
    padding:       0.75rem 0.875rem;
    box-shadow:    var(--card-shadow);
    border-left:   3px solid var(--primary-color);
    transition:    all var(--transition-base);
}

.stats-card:hover {
    box-shadow: 1px 2px 8px rgba(177,177,177,0.45);
    transform:  translateY(-2px);
}

.stats-card.primary { border-left-color: var(--primary-color); }
.stats-card.success { border-left-color: var(--success-color); }
.stats-card.warning { border-left-color: var(--warning-color); }
.stats-card.danger  { border-left-color: var(--danger-color);  }

.stats-value {
    font-size:     1.4rem;
    font-weight:   var(--font-weight-bold);
    line-height:   1.05;
    margin-bottom: 0.2rem;
    color:         var(--primary-color);
}

.stats-label {
    font-size:      0.7rem;
    color:          var(--text-secondary);
    font-weight:    var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stats-icon {
    font-size: 1.25rem;
    opacity:   0.18;
}

/* ==========================================
   Buttons
   ========================================== */
.btn {
    font-family:    var(--font-family);
    font-weight:    var(--font-weight-semibold);
    border-radius:  var(--radius-sm);
    padding:        0.32rem 0.7rem;
    font-size:      0.82rem;
    line-height:    1.2;
    transition:     all var(--transition-base);
    border:         none;
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    letter-spacing: 0.15px;
}

.btn-sm { padding: 0.22rem 0.55rem; font-size: 0.76rem; }
.btn-lg { padding: 0.45rem 0.95rem; font-size: 0.9rem; }

.btn-primary {
    background-color: var(--primary-color);
    color:            #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark);
    color:            #ffffff;
    transform:        translateY(-1px);
    box-shadow:       0 3px 8px rgba(0,122,204,0.35);
}

.btn-warning {
    background-color: var(--warning-color);
    color:            #000000;
    border:           none;
}
.btn-warning:hover { background-color: #e6931a; color: #000000; }

.btn-success {
    background-color: var(--success-color);
    color:            #ffffff;
}
.btn-success:hover {
    background-color: #025e27;
    color:            #ffffff;
    transform:        translateY(-1px);
}

.btn-danger {
    background-color: var(--danger-color);
    color:            #ffffff;
}
.btn-danger:hover {
    background-color: #a50020;
    color:            #ffffff;
    transform:        translateY(-1px);
}

.btn-secondary {
    background-color: #c7c7c7;
    color:            #000000;
    border:           none;
}
.btn-secondary:hover { background-color: #b0b0b0; color: #000000; }

.btn-outline-primary {
    border:     2px solid var(--primary-color);
    color:      var(--primary-color);
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color:            #ffffff;
}

.btn-outline-secondary {
    border:  2px solid #c7c7c7;
    color:   var(--text-primary);
    background: transparent;
}
.btn-outline-secondary:hover {
    background-color: #c7c7c7;
}

/* ==========================================
   Forms
   ========================================== */
.form-control,
.form-select {
    background-color: #f0f3fa;
    border:           none;
    border-radius:    var(--radius-sm);
    padding:          0.34rem 0.55rem;
    font-family:      var(--font-family);
    font-size:        0.82rem;
    line-height:      1.3;
    color:            var(--text-primary);
    transition:       background-color var(--transition-base);
}

.form-control:focus, .form-select:focus {
    background-color: #e8edf8;
    border:           none;
    box-shadow:       0 0 0 2px rgba(0,122,204,0.22);
    outline:          none;
}

.form-control:hover, .form-select:hover {
    background-color: #e8edf8;
}

.form-label {
    font-weight:    var(--font-weight-semibold);
    font-size:      0.78rem;
    color:          var(--text-primary);
    margin-bottom:  0.2rem;
    letter-spacing: 0.15px;
}

.form-control-lg, .form-select-lg {
    font-size: 0.9rem;
    padding:   0.45rem 0.75rem;
}

.form-control-sm, .form-select-sm {
    font-size: 0.75rem;
    padding:   0.22rem 0.45rem;
}

.input-group-text {
    background-color: #f0f3fa;
    border:           none;
    color:            var(--text-secondary);
}

.input-group .form-control { border-right: none; }

/* ==========================================
   Tables
   ========================================== */
.table {
    background:    #ffffff;
    border-radius: var(--radius-md);
    overflow:      hidden;
    box-shadow:    var(--card-shadow);
    margin-bottom: 0;
}

.table thead { background-color: var(--bg-panel-head); }

.table thead th {
    font-weight:    var(--font-weight-bold);
    font-size:      0.72rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color:          var(--text-secondary);
    border-bottom:  1px solid var(--gray-200);
    border-top:     none;
    padding:        0.4rem 0.65rem;
    white-space:    nowrap;
}

.table tbody tr {
    transition:    background-color var(--transition-base);
    border-bottom: 1px solid var(--gray-200);
}

.table tbody tr:hover {
    background-color: var(--primary-lighter) !important;
    cursor:           pointer;
}

.table tbody td {
    padding:        0.4rem 0.65rem;
    vertical-align: middle;
    font-size:      0.82rem;
    color:          var(--text-primary);
    line-height:    1.35;
}

/* Compact table variant — used for dense lists like ticket inbox */
.table-compact tbody td { padding: 0.32rem 0.55rem; font-size: 0.8rem; }
.table-compact thead th { padding: 0.32rem 0.55rem; }

/* ==========================================
   Badges
   ========================================== */
.badge {
    padding:        0.18rem 0.45rem;
    border-radius:  var(--radius-sm);
    font-weight:    var(--font-weight-semibold);
    font-size:      0.68rem;
    letter-spacing: 0.25px;
    display:        inline-flex;
    align-items:    center;
    gap:            0.18rem;
    line-height:    1.2;
}

.badge.bg-primary {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    color: #1e3a8a !important;
    border: 1px solid #3b82f6;
}
.badge.bg-success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
    color: #065f46 !important;
    border: 1px solid #10b981;
}
.badge.bg-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #78350f !important;
    border: 1px solid #f59e0b;
}
.badge.bg-danger {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #7f1d1d !important;
    border: 1px solid #ef4444;
}
.badge.bg-info {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    color: #1e3a8a !important;
    border: 1px solid #007acc;
}
.badge.bg-secondary { background: #e5e7eb !important; color: var(--text-primary) !important; }

/* ==========================================
   Alerts
   ========================================== */
.alert {
    border-radius: var(--radius-md);
    border:        none;
    padding:       0.5rem 0.75rem;
    box-shadow:    var(--card-shadow);
    font-size:     0.82rem;
    margin-bottom: 0.5rem;
}

.alert-success { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.alert-danger  { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.alert-info    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.alert-warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

/* ==========================================
   Page Header
   ========================================== */
.page-header {
    background:    #ffffff;
    padding:       0.5rem 0.875rem;
    border-radius: var(--radius-md);
    box-shadow:    var(--card-shadow);
    margin-bottom: 0.6rem;
}

.page-title {
    font-size:     0.95rem;
    font-weight:   var(--font-weight-bold);
    color:         var(--primary-color);
    margin-bottom: 0;
    line-height:   1.25;
}

/* ==========================================
   Filter Bar
   ========================================== */
.filter-bar {
    background:    #ffffff;
    padding:       0.5rem 0.75rem;
    border-radius: var(--radius-md);
    box-shadow:    var(--card-shadow);
    margin-bottom: 0.6rem;
}

/* ==========================================
   Metrics / Analytics Cards
   ========================================== */
.metrics-card {
    border:        none;
    border-radius: var(--radius-md);
    background:    #ffffff;
    box-shadow:    var(--card-shadow);
    transition:    all var(--transition-base);
    overflow:      hidden;
    position:      relative;
}

.metrics-card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     3px;
    background: var(--primary-color);
}

.metrics-card:hover {
    transform:  translateY(-3px);
    box-shadow: 2px 4px 12px rgba(0,0,0,0.12);
}

.metrics-title {
    color:          var(--text-primary);
    font-weight:    var(--font-weight-bold);
    font-size:      0.72rem;
    margin-bottom:  0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metrics-value {
    font-size:     1.4rem;
    font-weight:   var(--font-weight-bold);
    color:         var(--primary-color);
    margin-bottom: 2px;
    line-height:   1.05;
}

.metrics-subtitle {
    font-size: 0.72rem;
    color:     var(--text-secondary);
}

/* ==========================================
   Info Banner
   ========================================== */
.info-bar {
    background:    var(--primary-color);
    border-radius: var(--radius-md);
    padding:       0.45rem 0.875rem;
    margin-bottom: 0.6rem;
    box-shadow:    0 2px 6px rgba(0,122,204,0.18);
    color:         #ffffff;
    font-size:     0.82rem;
}

/* ==========================================
   Footer
   ========================================== */
.footer-main {
    background-color: #f5f5f5;
    padding:          0.25rem 1.5rem;
    border-top:       1px solid var(--gray-200);
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          900;
    min-height:       30px;
    line-height:      22px;
}

.footer-main a {
    color:           var(--text-primary);
    text-decoration: none;
}

/* Reserve room at the bottom of every page so content isn't hidden
   behind the fixed app footer. */
main > article.content {
    padding-bottom: 40px !important;
}

/* ==========================================
   Spinner
   ========================================== */
.spinner-border { border-width: 3px; color: var(--primary-color); }

/* ==========================================
   Animations
   ========================================== */
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.fade-in  { animation: fadeIn  var(--transition-slow) ease-out; }
.slide-in { animation: slideIn var(--transition-slow) ease-out; }

/* ==========================================
   Utility
   ========================================== */
.bluetext    { color: var(--primary-color) !important; }
.shadow-soft { box-shadow: var(--card-shadow); }
.bg-gradient-primary { background-color: var(--primary-color) !important; }
.mandatory   { color: var(--danger-color); }
.text-gradient { color: var(--primary-color); }
.btn-right   { float: right; }

@media (max-width: 768px) {
    .stats-value  { font-size: 1.2rem; }
    .page-header  { padding: 0.45rem 0.65rem; }
    .filter-bar   { padding: 0.45rem 0.65rem; }
    .card-body    { padding: 0.6rem 0.7rem; }
    h1 { font-size: 1.1rem; }
    h2 { font-size: 1.0rem; }
}