/* SMV-System Corporate Design CSS
 * This file contains the new corporate design styles for the SMV-System
 * It overrides the default styles from style.css
 */

:root {
    /* Primary color palette */
    --primary-color: #005E7C; /* Deep teal - main brand color */
    --secondary-color: #F39200; /* Orange - accent color */
    --tertiary-color: #8CC63F; /* Green - accent color */
    --dark-color: #2F4858; /* Dark blue-gray - for text and headings */
    --light-color: #F5F7FA; /* Light gray - for backgrounds */

    /* Text colors */
    --text-color: #333333; /* Dark gray for body text */
    --text-light: #6C757D; /* Medium gray for secondary text */

    /* Background colors */
    --bg-light: #F5F7FA; /* Light background */
    --bg-white: #FFFFFF; /* White background */

    /* Status colors */
    --success-color: #28A745; /* Green for success messages */
    --warning-color: #FFC107; /* Yellow for warnings */
    --danger-color: #DC3545; /* Red for errors */
    --info-color: #17A2B8; /* Blue for information */
}

/* General styling */
body {
    font-family: 'Nunito', 'Open Sans', sans-serif;
    background: var(--bg-light);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    color: var(--dark-color);
    font-weight: 600;
}

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

a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

/* Header styling */
.header {
    background-color: var(--bg-white);
    box-shadow: 0px 2px 20px rgba(0, 94, 124, 0.1);
}

.logo span {
    color: var(--primary-color);
    font-weight: 700;
}

.header .toggle-sidebar-btn {
    color: var(--primary-color);
}

.header .search-form input {
    color: var(--dark-color);
    border: 1px solid rgba(0, 94, 124, 0.2);
}

.header .search-form input:focus,
.header .search-form input:hover {
    box-shadow: 0 0 10px 0 rgba(0, 94, 124, 0.15);
    border: 1px solid rgba(0, 94, 124, 0.3);
}

.header .search-form button i {
    color: var(--primary-color);
}

/* Header Nav */
.header-nav .nav-icon {
    color: var(--primary-color);
}

.header-nav .nav-profile {
    color: var(--dark-color);
}

/* Sidebar styling */
.sidebar {
    background-color: var(--bg-white);
    box-shadow: 0px 0px 20px rgba(0, 94, 124, 0.1);
}

.sidebar-nav .nav-link {
    color: var(--primary-color);
    background: var(--bg-light);
}

.sidebar-nav .nav-link i {
    color: var(--primary-color);
}

.sidebar-nav .nav-link.collapsed {
    color: var(--dark-color);
    background: var(--bg-white);
}

.sidebar-nav .nav-link.collapsed i {
    color: var(--text-light);
}

.sidebar-nav .nav-link:hover {
    color: var(--primary-color);
    background: var(--bg-light);
}

.sidebar-nav .nav-link:hover i {
    color: var(--primary-color);
}

.sidebar-nav .nav-content a {
    color: var(--dark-color);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--primary-color);
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--primary-color);
}

/* Card styling */
.card {
    border-radius: 8px;
    box-shadow: 0px 0 30px rgba(0, 94, 124, 0.1);
}

.card-title {
    color: var(--dark-color);
}

/* Button styling */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #00748F;
    border-color: #00748F;
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: #FF9E1A;
    border-color: #FF9E1A;
}

/* Table styling */
.table thead {
    background-color: var(--bg-light);
}

.table thead th {
    color: var(--dark-color);
}

/* Breadcrumb styling */
.breadcrumb a {
    color: var(--text-light);
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb .active {
    color: var(--primary-color);
}

/* Footer styling */
.footer {
    border-top: 1px solid rgba(0, 94, 124, 0.2);
}

.footer .copyright {
    color: var(--dark-color);
}

.footer .credits {
    color: var(--dark-color);
}

/* Back to top button */
.back-to-top {
    background: var(--primary-color);
}

.back-to-top:hover {
    background: var(--secondary-color);
}

/* Tabs styling */
.nav-tabs-bordered .nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

/* Alert styling */
.alert-primary {
    background-color: rgba(0, 94, 124, 0.1);
    border-color: rgba(0, 94, 124, 0.2);
    color: var(--primary-color);
}

.alert-secondary {
    background-color: rgba(243, 146, 0, 0.1);
    border-color: rgba(243, 146, 0, 0.2);
    color: var(--secondary-color);
}

/* Dashboard cards */
.dashboard .info-card h6 {
    color: var(--dark-color);
}

.dashboard .sales-card .card-icon {
    color: var(--primary-color);
    background: rgba(0, 94, 124, 0.1);
}

.dashboard .revenue-card .card-icon {
    color: var(--tertiary-color);
    background: rgba(140, 198, 63, 0.1);
}

.dashboard .customers-card .card-icon {
    color: var(--secondary-color);
    background: rgba(243, 146, 0, 0.1);
}

/* Dark mode overrides */
body.dark-mode {
    background-color: #1A1A1A;
    color: #E0E0E0;
}

body.dark-mode .header,
body.dark-mode .sidebar,
body.dark-mode .card {
    background-color: #2A2A2A;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
    background-color: #2A2A2A;
    border-color: #3A3A3A;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .card-title {
    color: #F5F7FA;
}

body.dark-mode .sidebar-nav .nav-link.collapsed,
body.dark-mode .sidebar-nav .nav-content a {
    color: #E0E0E0;
    background: #2A2A2A;
}

body.dark-mode .sidebar-nav .nav-link {
    background: #3A3A3A;
}

body.dark-mode .table {
    color: #E0E0E0;
}

body.dark-mode .table thead {
    background-color: #3A3A3A;
}

body.dark-mode .footer {
    border-top: 1px solid #3A3A3A;
    color: #E0E0E0;
}