@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   SNEAT-STYLE UI THEME OVERRIDES
   ========================================= */
html[data-theme="metro"] {
    --primary-color: #35abe5; /* Ascentae Blue */
    --secondary-color: #82b704; /* Ascentae Green */
    --success-color: #82b704;
    --danger-color: #ff3e1d; /* Sneat Red */
    --accent-dark: #566a7f; /* Headings and strong text */
    --accent-light: #f5f5f9; /* Background */
    --bg-color: #f5f5f9; /* Soft Dashboard Background */
    --surface-color: #ffffff; /* Cards */
    --text-main: #697a8d; /* Body text */
    --text-muted: #a1acb8;
    --border-color: #d9dee3;
    
    color-scheme: light;
}

/* Aggressively target main containers and enforce Open Sans globally */
html[data-theme="metro"] body,
html[data-theme="metro"] #wrapper,
html[data-theme="metro"] #page-content-wrapper,
html[data-theme="metro"] main,
html[data-theme="metro"] .material-card,
html[data-theme="metro"] .form-control,
html[data-theme="metro"] .btn,
html[data-theme="metro"] h1, html[data-theme="metro"] h2, html[data-theme="metro"] h3, 
html[data-theme="metro"] h4, html[data-theme="metro"] h5, html[data-theme="metro"] h6,
html[data-theme="metro"] p, html[data-theme="metro"] span, html[data-theme="metro"] a, 
html[data-theme="metro"] div, html[data-theme="metro"] table {
    font-family: 'Open Sans', sans-serif !important;
}

html[data-theme="metro"] body,
html[data-theme="metro"] #wrapper,
html[data-theme="metro"] #page-content-wrapper,
html[data-theme="metro"] main {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}

/* Soft Elevated Cards */
html[data-theme="metro"] .material-card {
    border: none !important;
    border-radius: 0.5rem !important;
    background-color: var(--surface-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12) !important;
    padding: 1.5rem !important;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

html[data-theme="metro"] .material-card:hover {
    box-shadow: 0 4px 10px 0 rgba(67, 89, 113, 0.18) !important;
    transform: translateY(-2px) !important;
}

/* Top utility and app bars */
html[data-theme="metro"] .app-bar,
html[data-theme="metro"] .top-utility-bar {
    border-bottom: none !important;
    background-color: var(--surface-color) !important;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12) !important;
}

/* Sidebars */
html[data-theme="metro"] .sidebar,
html[data-theme="metro"] .info-sidebar {
    border-right: none !important;
    border-left: none !important;
    background-color: var(--surface-color) !important;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12) !important;
}

html[data-theme="metro"] .sidebar-link {
    font-weight: 600;
    text-transform: none;
    font-size: 0.9375rem;
    letter-spacing: normal;
    border-radius: 0.375rem !important;
    margin: 0.25rem 1rem !important;
    color: var(--text-main) !important;
    transition: all 0.2s ease-in-out;
}

html[data-theme="metro"] .sidebar-link.active {
    background-color: rgba(53, 171, 229, 0.16) !important;
    color: var(--primary-color) !important;
    border: none !important;
    font-weight: 700;
    box-shadow: none !important; 
}

html[data-theme="metro"] .sidebar-link.active i {
    color: var(--primary-color) !important;
}

html[data-theme="metro"] .sidebar-link:hover:not(.active) {
    background-color: rgba(67, 89, 113, 0.04) !important;
    color: var(--accent-dark) !important;
}

html[data-theme="metro"] .sidebar-link:hover:not(.active) i {
    color: var(--accent-dark) !important;
}

/* Buttons */
html[data-theme="metro"] .btn {
    border-radius: 0.375rem !important;
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
    transition: all 0.2s ease-in-out;
    padding: 0.4375rem 1.25rem;
}

html[data-theme="metro"] .btn-primary,
html[data-theme="metro"] .btn-momus-blue,
html[data-theme="metro"] .bg-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(53, 171, 229, 0.4) !important;
}

html[data-theme="metro"] .btn-success,
html[data-theme="metro"] .btn-momus-green,
html[data-theme="metro"] .bg-success {
    background-color: var(--secondary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--secondary-color) !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(130, 183, 4, 0.4) !important;
}

html[data-theme="metro"] .btn-danger,
html[data-theme="metro"] .bg-danger {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--danger-color) !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 62, 29, 0.4) !important;
}

html[data-theme="metro"] .btn-primary:hover,
html[data-theme="metro"] .btn-momus-blue:hover {
    background-color: #2b8abc !important;
    border-color: #2b8abc !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

html[data-theme="metro"] .btn-success:hover,
html[data-theme="metro"] .btn-momus-green:hover {
    background-color: #6a9603 !important;
    border-color: #6a9603 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

html[data-theme="metro"] .btn-light {
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

html[data-theme="metro"] .btn-light:hover {
    background-color: rgba(67, 89, 113, 0.04) !important;
}

html[data-theme="metro"] .btn-secondary {
    background-color: #8592a3 !important;
    color: #ffffff !important;
    border: 1px solid #8592a3 !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 146, 163, 0.4) !important;
}

html[data-theme="metro"] .btn-secondary:hover {
    background-color: #717c8b !important;
    border-color: #717c8b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Inputs & Forms - Fixed to Sneat Style */
html[data-theme="metro"] .form-control,
html[data-theme="metro"] .form-select,
html[data-theme="metro"] .material-input {
    border: 1px solid var(--border-color) !important;
    background-color: #ffffff !important;
    border-radius: 0.375rem !important;
    color: var(--text-main) !important;
    padding: 0.4375rem 0.875rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

html[data-theme="metro"] .input-group-text {
    border: 1px solid var(--border-color) !important;
    background-color: #f8f9fa !important;
    border-radius: 0.375rem !important;
    color: #697a8d !important;
}

/* Remove default material input border hacks for cleaner look */
html[data-theme="metro"] .input-group .form-control {
    border-left: 0 !important;
}
html[data-theme="metro"] .input-group .input-group-text {
    border-right: 0 !important;
}

html[data-theme="metro"] .form-control:focus,
html[data-theme="metro"] .form-select:focus,
html[data-theme="metro"] .material-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.15rem rgba(53, 171, 229, 0.25) !important;
    outline: none !important;
}

html[data-theme="metro"] .form-control::placeholder {
    color: #b4bdc6 !important;
    opacity: 1;
}

/* Typography Overrides */
html[data-theme="metro"] h1, html[data-theme="metro"] h2, 
html[data-theme="metro"] h3, html[data-theme="metro"] h4, 
html[data-theme="metro"] h5, html[data-theme="metro"] h6,
html[data-theme="metro"] .text-dark {
    color: var(--accent-dark) !important;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

html[data-theme="metro"] .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="metro"] .text-primary {
    color: var(--primary-color) !important;
}
html[data-theme="metro"] .text-success {
    color: var(--secondary-color) !important;
}

/* Sneat Style Soft Badges */
html[data-theme="metro"] .badge {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0.25rem !important;
    padding: 0.4em 0.6em !important;
    border: none !important;
}

html[data-theme="metro"] .badge.bg-primary,
html[data-theme="metro"] .bg-primary.bg-opacity-10 {
    background-color: rgba(53, 171, 229, 0.16) !important;
    color: var(--primary-color) !important;
}

html[data-theme="metro"] .badge.bg-success,
html[data-theme="metro"] .bg-success.bg-opacity-10 {
    background-color: rgba(130, 183, 4, 0.16) !important;
    color: var(--secondary-color) !important;
}

html[data-theme="metro"] .badge.bg-danger,
html[data-theme="metro"] .bg-danger.bg-opacity-10 {
    background-color: rgba(255, 62, 29, 0.16) !important;
    color: var(--danger-color) !important;
}

html[data-theme="metro"] .badge.bg-secondary,
html[data-theme="metro"] .bg-secondary.bg-opacity-10 {
    background-color: rgba(133, 146, 163, 0.16) !important;
    color: #8592a3 !important;
}

/* Tables */
html[data-theme="metro"] .table {
    border: none !important;
    border-collapse: collapse !important;
}

html[data-theme="metro"] .table th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

html[data-theme="metro"] .table td {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

html[data-theme="metro"] .table-light th,
html[data-theme="metro"] .table-light td {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Dropdowns */
html[data-theme="metro"] .dropdown-menu {
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
    padding: 0.5rem 0 !important;
    background-color: #ffffff !important;
}

html[data-theme="metro"] .dropdown-item {
    padding: 0.5rem 1.25rem !important;
    border-bottom: none !important;
    color: var(--text-main) !important;
    font-weight: 400;
}

html[data-theme="metro"] .dropdown-item:hover {
    background-color: rgba(67, 89, 113, 0.04) !important;
    color: var(--primary-color) !important;
}

/* Pagination Overrides - Fixed to Sneat Style */
html[data-theme="metro"] .pagination {
    gap: 0.25rem;
}

html[data-theme="metro"] .pagination .page-item .page-link {
    border: none !important;
    color: var(--text-main) !important;
    background-color: rgba(67, 89, 113, 0.08) !important;
    border-radius: 0.375rem !important;
    margin: 0 0.125rem !important;
    font-weight: 500;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4375rem 0.75rem !important;
    transition: all 0.2s ease;
}

html[data-theme="metro"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(53, 171, 229, 0.4) !important;
}

html[data-theme="metro"] .pagination .page-link:hover:not(.disabled) {
    background-color: rgba(67, 89, 113, 0.16) !important;
    color: var(--accent-dark) !important;
}

html[data-theme="metro"] .pagination .page-item.disabled .page-link {
    opacity: 0.5;
    background-color: rgba(67, 89, 113, 0.04) !important;
    color: #a1acb8 !important;
}

/* Modals */
html[data-theme="metro"] .modal-content {
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
    background-color: var(--surface-color) !important;
}
html[data-theme="metro"] .modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
html[data-theme="metro"] .modal-footer {
    border-top: 1px solid var(--border-color) !important;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Scrollbar */
html[data-theme="metro"] ::-webkit-scrollbar-thumb { 
    background: #c9d0d6 !important; 
    border-radius: 10px !important;
}
html[data-theme="metro"] ::-webkit-scrollbar-thumb:hover { 
    background: #a1acb8 !important; 
}

/* Show correct logo variants */
html[data-theme="metro"] .peaky-logo-light, 
html[data-theme="metro"] .main-logo-light { 
    display: inline-block !important; 
}
html[data-theme="metro"] .peaky-logo-dark, 
html[data-theme="metro"] .main-logo-dark { 
    display: none !important; 
}

/* =========================================
   INDEX DASHBOARD SPECIFIC FIXES
   ========================================= */
/* Correctly aligns the robot image flush to the bottom border */
html[data-theme="metro"] .header-img {
    margin-bottom: 0 !important; 
    display: block !important;
    object-position: bottom center !important;
    transform: translateY(2px) !important; /* Pushes image down specifically to close any 1px gap */
}

/* Welcome Text Adjustments */
html[data-theme="metro"] .header-1 {
    font-size: clamp(1.4rem, 2.5vw, 26px) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 0.5rem !important;
}

html[data-theme="metro"] .header-2 {
    font-size: 1rem !important;
    opacity: 0.85 !important;
    margin-top: 0.25rem !important;
    font-weight: 400 !important;
}