/**
 * MTI Admin Panel Brand Overrides
 * This file overrides Bagisto default styles to match MTI brand identity.
 * 
 * Brand Colors (from MTI Brandbook):
 * - Primary Blue: #166FB0
 * - Dark Blue: #041E42
 * - Accent Orange: #FF4C00
 * - Secondary Lime: #97D700
 * - Text Gray-900: #161616
 * - Text Gray-800: #494949
 * - Border Gray-400: #A8A8A8
 * - Background Gray-100: #F5F5F5
 */

/* ==========================================================================
   1. CSS Variables - MTI Brand Colors
   ========================================================================== */
:root {
    /* Primary Colors */
    --mti-primary: #166FB0;
    --mti-primary-hover: #104E7D;
    --mti-primary-active: #0A3A5F;
    --mti-primary-light: rgba(22, 111, 176, 0.08);
    
    /* Dark Blue - Premium elements */
    --mti-primary-dark: #041E42;
    
    /* Accent Colors */
    --mti-accent: #FF4C00;
    --mti-accent-hover: #CC3D00;
    --mti-secondary: #97D700;
    
    /* Text Colors */
    --mti-text: #161616;
    --mti-text-secondary: #494949;
    --mti-text-muted: #737373;
    
    /* Background & UI Colors */
    --mti-white: #FFFFFF;
    --mti-bg: #F5F5F5;
    --mti-border: #A8A8A8;
    --mti-border-light: #E5E5E5;
    
    /* Shadows */
    --mti-shadow-sm: 0 1px 2px rgba(4, 30, 66, 0.05);
    --mti-shadow-md: 0 4px 12px rgba(4, 30, 66, 0.08);
    
    /* Fonts */
    --mti-font-heading: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mti-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. Typography - MTI Brand Fonts
   ========================================================================== */
/* Montserrat - for headings */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter - for body text */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Typography Classes */
.mti-heading-1 {
    font-family: var(--mti-font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: var(--mti-text);
}

.mti-heading-2 {
    font-family: var(--mti-font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--mti-text);
}

.mti-heading-3 {
    font-family: var(--mti-font-heading);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--mti-text);
}

.mti-body {
    font-family: var(--mti-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--mti-text-secondary);
}

.mti-body-semibold {
    font-family: var(--mti-font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--mti-text-secondary);
}

.mti-caption {
    font-family: var(--mti-font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--mti-text-muted);
}

/* Apply fonts globally */
body {
    font-family: var(--mti-font-body);
    background-color: var(--mti-bg);
    color: var(--mti-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mti-font-heading);
    color: var(--mti-text);
}

/* ==========================================================================
   3. SVG Color Overrides - Replace #0041FF with MTI Primary
   ========================================================================== */
/* Override SVG fill attributes */
svg [fill="#0041FF"],
svg [fill="#0041ff"],
svg [fill*="0041FF" i],
svg [fill*="0041ff" i] {
    fill: var(--mti-primary) !important;
}

/* Override SVG stroke attributes */
svg [stroke="#0041FF"],
svg [stroke="#0041ff"],
svg [stroke*="0041FF" i],
svg [stroke*="0041ff" i] {
    stroke: var(--mti-primary) !important;
}

/* Override hardcoded #0041FF colors in inline styles */
[style*="#0041FF"],
[style*="#0041ff"],
[style*="color: #0041FF"],
[style*="color: #0041ff"] {
    color: var(--mti-primary) !important;
}

/* Override any element with this specific color class or direct color */
.color-0041FF,
.text-0041FF {
    color: var(--mti-primary) !important;
}

/* ==========================================================================
   4. Links
   ========================================================================== */
a,
a:link,
a:visited,
.navbar-top .navbar-top-right .profile-info .dropdown-container ul li a:hover {
    color: var(--mti-primary) !important;
}

a:hover,
a:active,
a:focus {
    color: var(--mti-accent) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   5. Navigation - Sidebar (navbar-left)
   ========================================================================== */
.navbar-left {
    background-color: var(--mti-white) !important;
    border-right: 1px solid var(--mti-border-light) !important;
    box-shadow: 2px 0 8px rgba(4, 30, 66, 0.05) !important;
}

.navbar-left ul.menubar li.menu-item {
    position: relative !important;
    padding: 10px 5px !important;
    transition: all 0.2s ease;
    height: auto !important;
    min-height: 75px;
}

.navbar-left ul.menubar li.menu-item a {
    color: var(--mti-text-secondary) !important;
    display: block;
    font-family: var(--mti-font-body);
}

.navbar-left ul.menubar li.menu-item:hover {
    background-color: var(--mti-primary-light);
}

.navbar-left ul.menubar li.menu-item:hover a {
    color: var(--mti-primary) !important;
}

/* Active state with Orange accent */
.navbar-left ul.menubar li.menu-item.active {
    background-color: var(--mti-primary-light) !important;
}

.navbar-left ul.menubar li.menu-item.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background-color: var(--mti-accent) !important;
    display: block !important;
    z-index: 10;
}

.navbar-left ul.menubar li.menu-item.active a {
    color: var(--mti-primary) !important;
    border-left: none !important;
    font-weight: 600;
}

.navbar-left ul.menubar li.menu-item span.icon {
    opacity: 0.7;
    margin-bottom: 5px;
}

.navbar-left ul.menubar li.menu-item:hover span.icon,
.navbar-left ul.menubar li.menu-item.active span.icon {
    opacity: 1;
    fill: var(--mti-primary) !important;
    color: var(--mti-primary) !important;
}

/* ==========================================================================
   6. Navigation - Header (navbar-top) - Dark Blue Theme
   ========================================================================== */
.navbar-top {
    background-color: var(--mti-primary-dark) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 4px rgba(4, 30, 66, 0.15) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: 70px !important;
    box-sizing: border-box !important;
}

.navbar-top-left,
.navbar-top-right {
    background-color: transparent !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    height: 100% !important;
}

.navbar-top-left {
    min-width: 130px !important;
}

.navbar-top-right {
    flex: 1 !important;
    justify-content: flex-end !important;
}

.navbar-top .brand-logo img {
    max-height: 113px !important;
    width: auto !important;
}

/* White text for header elements on dark background */
.navbar-top .navbar-top-right .profile-info .name {
    color: var(--mti-white) !important;
    font-weight: 600 !important;
    font-family: var(--mti-font-body);
}

.navbar-top .navbar-top-right .profile-info .dropdown-toggle {
    color: var(--mti-white) !important;
}

/* Profile Dropdown - make it match dark header */
.navbar-top .navbar-top-right .profile-info .dropdown-toggle .arrow-down-icon {
    filter: brightness(0) invert(1) !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list {
    background-color: var(--mti-primary-dark) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(4, 30, 66, 0.3) !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list .dropdown-container {
    background-color: transparent !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list label {
    color: var(--mti-white) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list ul li a {
    color: var(--mti-white) !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--mti-white) !important;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list .app-version {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   7. Buttons & Badges - Primary Blue
   ========================================================================== */
.btn.btn-primary,
button.btn-primary,
.pagination .page-item.active,
.badge.badge-info,
.badge.badge-primary,
.datagrid-filters .apply-filter {
    background-color: var(--mti-primary) !important;
    border-color: var(--mti-primary) !important;
    color: var(--mti-white) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: var(--mti-font-body);
    transition: all 0.2s ease !important;
}

.btn.btn-primary:hover,
button.btn-primary:hover,
.pagination .page-item.active:hover,
.datagrid-filters .apply-filter:hover {
    background-color: var(--mti-primary-hover) !important;
    border-color: var(--mti-primary-hover) !important;
}

/* Secondary/Outline buttons */
.btn.btn-secondary,
.btn.btn-outline-primary {
    border-color: var(--mti-primary) !important;
    color: var(--mti-primary) !important;
}

.btn.btn-secondary:hover,
.btn.btn-outline-primary:hover {
    background-color: var(--mti-primary-light) !important;
}

/* Success/Status badges - use Lime only on dark backgrounds */
.badge.badge-success {
    background-color: var(--mti-secondary) !important;
    color: var(--mti-primary-dark) !important;
}

/* Warning/Error badges - use Orange accent */
.badge.badge-warning,
.badge.badge-danger {
    background-color: var(--mti-accent) !important;
    color: var(--mti-white) !important;
}

/* ==========================================================================
   8. Form Elements & Grid Controls
   ========================================================================== */
.control,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea {
    border: 1px solid var(--mti-border) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
    background-color: var(--mti-white) !important;
    color: var(--mti-text) !important;
    font-family: var(--mti-font-body);
}

/* Select dropdown with MTI blue chevron */
select.control,
select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 35px 0 16px !important;
    height: 40px !important;
    line-height: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23166FB0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    cursor: pointer !important;
}

/* Focus states */
.control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mti-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 111, 176, 0.15) !important;
    outline: none !important;
}

/* Checkboxes, Radio buttons, Toggles - use MTI primary */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--mti-primary) !important;
}

/* Toggle switches */
.toggle-switch input:checked + .slider {
    background-color: var(--mti-primary) !important;
}

/* Override from ui.css - control group toggle */
.control-group input:checked + .slider {
    background-color: var(--mti-primary) !important;
}

.control-group input:focus + .slider {
    box-shadow: 0 0 1px var(--mti-primary) !important;
}

/* Search filter styling */
.search-filter .control {
    height: 40px !important;
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.search-filter .icon-wrapper {
    background-color: var(--mti-white) !important;
    border: 1px solid var(--mti-border) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    height: 40px !important;
    width: 40px !important;
    padding: 8px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dropdown/Select headers in grid */
.grid-dropdown-header {
    border: 1px solid var(--mti-border) !important;
    border-radius: 8px !important;
    background-color: var(--mti-white) !important;
    color: var(--mti-text) !important;
    padding: 0 16px !important;
    height: 40px !important;
    font-weight: 500 !important;
    font-family: var(--mti-font-body);
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

/* Dropdown arrow with MTI blue */
.grid-dropdown-header .icon.arrow-down-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23166FB0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 10px !important;
    display: inline-block !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* ==========================================================================
   9. Tables & DataGrids
   ========================================================================== */
.table thead th {
    background-color: var(--mti-bg) !important;
    background-image: none !important;
    color: var(--mti-text) !important;
    font-weight: 600 !important;
    font-family: var(--mti-font-heading);
    border-bottom: 2px solid var(--mti-border) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.table tbody tr:hover {
    background-color: var(--mti-primary-light) !important;
}

.table tbody td {
    border-bottom: 1px solid var(--mti-border-light) !important;
    color: var(--mti-text-secondary) !important;
    font-family: var(--mti-font-body);
}

/* Pagination */
.pagination .page-item {
    border: 1px solid var(--mti-border) !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   10. Page Header & Layout Elements
   ========================================================================== */
/* Dashboard page header */
.dashboard:has(.dashboard-stats) .page-header {
    border-bottom: 1px solid var(--mti-border-light) !important;
    padding: 20px 30px 20px 45px !important;
    background-color: var(--mti-white) !important;
    margin-bottom: 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.page-header .page-title h1,
.page-header .page-title h2 {
    color: var(--mti-text) !important;
    font-weight: 700 !important;
    font-family: var(--mti-font-heading);
    margin: 0 !important;
}

/* Cards */
.card,
.dashboard .card,
.dashboard-stats .dashboard-card {
    border: 1px solid var(--mti-border-light) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background-color: var(--mti-white) !important;
    transition: all 0.3s ease !important;
}

.card:hover,
.dashboard .card:hover,
.dashboard-stats .dashboard-card:hover {
    border-color: var(--mti-primary) !important;
}

/* ==========================================================================
   11. Aside-nav (Secondary Sidebar)
   ========================================================================== */
.content-container .aside-nav {
    background-color: var(--mti-white) !important;
    border-right: 1px solid var(--mti-border-light) !important;
    padding-top: 15px !important;
}

.aside-nav ul li a {
    color: var(--mti-text-secondary) !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
    border-left: 4px solid transparent !important;
    display: block !important;
    font-family: var(--mti-font-body);
}

.aside-nav ul li a:hover {
    background-color: var(--mti-primary-light) !important;
    color: var(--mti-primary) !important;
    text-decoration: none !important;
}

.aside-nav ul li.active a {
    background-color: var(--mti-primary-light) !important;
    color: var(--mti-primary) !important;
    border-left: 4px solid var(--mti-accent) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   12. Action Icons & Tables
   ========================================================================== */
/* Action icons in tables (edit, delete, etc.) */
.action-icon {
    color: var(--mti-primary) !important;
}

.action-icon:hover {
    color: var(--mti-accent) !important;
}

/* Status icons */
.status-icon.active,
.status-icon.enabled {
    color: var(--mti-secondary) !important;
}

.status-icon.inactive,
.status-icon.disabled {
    color: var(--mti-accent) !important;
}

/* ==========================================================================
   13. Tabs
   ========================================================================== */
.tabs .tab.active {
    border-bottom: 2px solid var(--mti-primary) !important;
    color: var(--mti-primary) !important;
    font-weight: 600;
}

.tabs .tab:hover {
    color: var(--mti-primary) !important;
}

/* ==========================================================================
   14. Alerts & Notifications
   ========================================================================== */
.alert.alert-success {
    background-color: var(--mti-secondary) !important;
    color: var(--mti-primary-dark) !important;
    border: none !important;
}

.alert.alert-warning,
.alert.alert-danger {
    background-color: var(--mti-accent) !important;
    color: var(--mti-white) !important;
    border: none !important;
}

.alert.alert-info {
    background-color: var(--mti-primary) !important;
    color: var(--mti-white) !important;
    border: none !important;
}

/* ==========================================================================
   15. Override hardcoded #0041FF from aniartCms.css
   ========================================================================== */
.control-group .custom-file .custom-file-input::file-selector-button {
    background: var(--mti-primary) !important;
}

/* ==========================================================================
   16. Force override ANY remaining #0041FF colors
   ========================================================================== */
/* This catches any hardcoded #0041FF that might exist in any CSS */
body .icon,
/* Icons are SVG background images - color updated in source SVG files */
ul.menubar li.menu-item span.icon,
ul.menubar li.menu-item.active span.icon {
    /* Icons use brand color from SVG files */
}

/* Tabs active state */
.tabs ul li.active a {
    border-bottom-color: var(--mti-primary) !important;
}

/* Force link colors */
a {
    color: var(--mti-primary) !important;
}

a:hover {
    color: var(--mti-accent) !important;
}

/* Force icon colors in navigation */
.navbar-left ul.menubar li.menu-item span.icon {
    opacity: 1 !important;
}

/* ==========================================================================
   17. Dashboard Stats & Card Data - Override ALL #0041FF colors
   ========================================================================== */
.dashboard .dashboard-stats .dashboard-card .data,
.dashboard-stats .dashboard-card .data,
.dashboard-card .data,
.dashboard .data,
.dashboard-card .data span,
.dashboard-stats .dashboard-card .data span,
.dashboard .dashboard-stats .dashboard-card .data span,
.dashboard-card .title,
.dashboard-stats .dashboard-card .title,
.dashboard .dashboard-stats .dashboard-card .title,
.dashboard-card .title span,
.dashboard-stats .dashboard-card .title span {
    color: var(--mti-primary) !important;
}

/* Override any color in dashboard stats */
.dashboard-stats *,
.dashboard-card *,
.dashboard .dashboard-card * {
    color: var(--mti-text) !important;
}

.dashboard-card .data {
    color: var(--mti-primary) !important;
}

.dashboard-card .title {
    color: var(--mti-text-secondary) !important;
}

/* Global override - target any element with old color */
.dashboard .data,
.dashboard-stats .data,
.card .data {
    color: var(--mti-primary) !important;
}

/* ==========================================================================
   18. ULTRA AGGRESSIVE - Catch ALL remaining #0041FF 
   ========================================================================== */
/* This must be at the end and use highest specificity */
html body .dashboard .dashboard-stats .dashboard-card .data,
html body .dashboard .dashboard-stats .dashboard-card .data *,
body.dashboard .dashboard-stats .dashboard-card .data,
body.dashboard .dashboard-stats .dashboard-card .data *,
div.dashboard div.dashboard-stats div.dashboard-card div.data,
div.dashboard div.dashboard-stats div.dashboard-card div.data span,
div[class*="dashboard"] div[class*="dashboard-card"] div[class*="data"],
div[class*="dashboard"] div[class*="dashboard-card"] div[class*="data"] span {
    color: var(--mti-primary) !important;
}

/* Override inline styles with !important */
[style*="color: #0041ff"],
[style*="color:#0041ff"],
[style*="color: #0041FF"],
[style*="color:#0041FF"] {
    color: var(--mti-primary) !important;
}

/* ==========================================================================
   19. Dashboard stats specifically 
   ========================================================================== */
/* Target the entire dashboard stats area */
.dashboard .dashboard-stats,
.dashboard .dashboard-stats .dashboard-card,
.dashboard .dashboard-stats .dashboard-card .data,
.dashboard .dashboard-stats .dashboard-card .title,
.dashboard .dashboard-stats .dashboard-card .data * {
    color: var(--mti-primary) !important;
}

.dashboard .dashboard-stats .dashboard-card .title {
    color: var(--mti-text-secondary) !important;
}

/* ==========================================================================
    20. Dashboard Card - Title & Links
    ========================================================================== */
.dashboard .card .card-title {
    color: var(--mti-text-secondary) !important;
}

.dashboard .card .card-info ul li .description .name a,
.dashboard .card .card-info .description .name {
    color: var(--mti-primary) !important;
}

/* Force override for any link inside dashboard card description */
.dashboard .card .description a,
.dashboard .card-info .description a {
    color: var(--mti-primary) !important;
}

.dashboard .card .description a:hover,
.dashboard .card-info .description a:hover {
    color: var(--mti-accent) !important;
    text-decoration: none !important;
}

/* ==========================================================================
    19. Dashboard stats specifically - use CSS filter to force color change
    ========================================================================== */
/* Target the entire dashboard stats area and force all text to use brand color */
.dashboard .dashboard-stats,
.dashboard .dashboard-stats .dashboard-card,
.dashboard .dashboard-stats .dashboard-card .data,
.dashboard .dashboard-stats .dashboard-card .title,
.dashboard .dashboard-stats .dashboard-card .data * {
    color: var(--mti-primary) !important;
}

.dashboard .dashboard-stats .dashboard-card .title {
    color: var(--mti-text-secondary) !important;
}