/* ==========================================================================
   AuditFlow - Main Stylesheet
   ========================================================================== */

/* --- 1. Variables & Basic Setup --- */
:root {
    --af-primary: #065f46;      /* Deep Emerald Green (from your logo) */
    --af-accent: #D4AF37;       /* Gold (from your logo) */
    --af-bg-light: #FFFFFF;      /* White background */
    --af-bg-alt: #F9FAFB;       /* Off-white for alternate sections */
    --af-text-dark: #1F2937;    /* Dark gray for headings */
    --af-text-light: #4B5563;   /* Lighter gray for paragraphs */
    --af-border: #E5E7EB;       /* Light border color */
    --af-secondary-bg: #ECFDF5; /* Very light green for highlights */
    --sidebar-width: 250px;
    --navbar-height: 60px;
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--af-bg-main);
    color: var(--af-text-light);
    line-height: 1.6;
    padding-top: var(--navbar-height); /* Space for fixed-top navbar */
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi-bold for a modern look */
    color: var(--af-text-dark);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1.h2, .h2 { /* Standard page title */
    font-size: 1.5rem;
    font-weight: 700;
}
h2.h6, .h6 { /* Standard card header title */
    font-size: 0.9rem;
}

/* --- 2. Navbar --- */
.navbar.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--af-primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: var(--navbar-height);
    display: flex;
    align-items: center;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff !important;
    margin-right: auto;
}
.navbar-brand i { color: #A7F3D0; } /* Light green icon */

.navbar .nav-link { color: rgba(255,255,255,0.8); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; }

.navbar #sidebarToggle {
    color: rgba(255,255,255,0.8);
    border: none;
    background: none;
    font-size: 1.25rem;
    padding: 0.5rem;
    margin-right: 0.5rem;
}
.navbar #sidebarToggle:hover { color: #fff; }


/* --- 3. Sidebar (Collapsible) --- */
.sidebar {
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    left: 0;
    z-index: 1020;
    padding: 0;
    width: var(--sidebar-width);
    background-color: var(--af-bg-light);
    border-right: 1px solid var(--af-border);
    transition: transform .3s ease-in-out;
}
.sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-width))); }

.sidebar .sidebar-nav { padding-top: 1rem; }

.sidebar .nav-link {
    font-weight: 500;
    color: #495057;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar .nav-link .bi {
    font-size: 1.1rem;
    margin-right: 0.8rem;
    color: #6c757d;
    transition: color 0.2s ease;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover {
    color: var(--af-primary);
    background-color: var(--af-secondary-bg);
}
.sidebar .nav-link.active { border-left-color: var(--af-primary); font-weight: 600; }
.sidebar .nav-link.active .bi, .sidebar .nav-link:hover .bi { color: var(--af-primary); }

.sidebar .nav-link.nav-section-header { font-weight: 600; color: #343a40; }
.sidebar .nav-link .bi-chevron-down-toggle { transition: transform 0.25s ease-in-out; font-size: 0.8em; }
.sidebar .nav-link:not(.collapsed) .bi-chevron-down-toggle { transform: rotate(-180deg); }

.sub-menu {
    padding-left: 1.5rem;
    border-left: 1px solid #e9ecef;
    margin-left: calc(0.55em + 0.8rem); /* Aligns with main icon */
    margin-bottom: 0.5rem !important;
}
.sub-menu .nav-link { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.85rem; border-left: 0; }
.sub-menu .nav-link.active { background-color: transparent; font-weight: 700; }
.sub-menu .nav-link .bi { font-size: 0.9rem; margin-right: 0.6rem; }


/* --- 4. Main Content Area & Cards --- */
main {
    padding: 1.5rem 2rem;
    padding-left: calc(var(--sidebar-width) + 2rem);
    transition: padding-left .3s ease-in-out;
}
body.sidebar-collapsed main { padding-left: 2rem; }

.card {
    border: 0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.055) !important;
}
.card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef;
}
.card-footer.bg-light {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e9ecef;
}

/* --- 5. Tables (Odoo-like List View) --- */
.table { margin-bottom: 0; }
.table thead th {
    background-color: #f8f9fa;
    border-top: 0;
    border-bottom: 2px solid #dee2e6;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.75rem;
    text-align: left;
}
.table tbody td {
    padding: 0.9rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #f1f3f5;
}
.table-hover tbody tr:hover { background-color: #f8f9fa; }


/* --- 6. Specific Components & Helpers --- */

/* For Accordion in Plan List */
.odoo-accordion .accordion-item { border: 1px solid var(--af-border); margin-bottom: 0.5rem; }
.odoo-accordion .accordion-button { background-color: var(--af-bg-light); color: var(--af-text-dark); box-shadow: none !important; }
.odoo-accordion .accordion-button:not(.collapsed) { background-color: var(--af-secondary-bg); color: var(--af-primary); }
.odoo-accordion .accordion-button::after { display: none; } /* Hide default chevron */

/* For Status Dots */
.status-dot, .risk-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.dot-bg-primary { background-color: var(--bs-primary); }
.dot-bg-secondary { background-color: var(--bs-secondary); }
.dot-bg-success { background-color: var(--bs-success); }
.dot-bg-danger { background-color: var(--bs-danger); }
.dot-bg-warning { background-color: var(--bs-warning); }
.dot-bg-info { background-color: var(--bs-info); }
.dot-bg-light { background-color: var(--bs-light); border: 1px solid #ddd; }
.dot-bg-dark { background-color: var(--bs-dark); }


/* For Subtle Badges (if using Bootstrap < 5.3) */
.badge.bg-primary-subtle { background-color: #cfe2ff !important; color: #052c65 !important; }
.badge.bg-success-subtle { background-color: #d1e7dd !important; color: #0a3622 !important; }
.badge.bg-warning-subtle { background-color: #fff3cd !important; color: #664d03 !important; }
.badge.bg-danger-subtle { background-color: #f8d7da !important; color: #58151c !important; }
.badge.bg-info-subtle { background-color: #cff4fc !important; color: #055160 !important; }
.badge.bg-secondary-subtle { background-color: #e2e3e5 !important; color: #41464b !important; }

/* static/css/main.css - For the new Dashboard Design */

/* Style for light KPI cards */
.kpi-card-light {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.kpi-card-light:hover {
    border-left: 4px solid var(--bs-primary) !important;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.075) !important;
}

/* Container for the icon in KPI cards */
.kpi-icon-container {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Make it circular */
}

/* Styles for Quick Action buttons */
.card .btn-light {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease;
}
.card .btn-light:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-2px);
}

/* static/css/main.css */

/* --- Remove underline from links within KPI cards --- */
.kpi-card-link {
    text-decoration: none; /* Removes underline from all text inside the link */
}

/* Optional: Add a subtle underline only on the small comparison text on hover */
.kpi-card-light:hover .small {
    text-decoration: underline;
}

/* Enhanced professional look for cards and tables */
.card-header {
    background-color: #f8f9fa; /* A very light grey for headers */
    border-bottom: 1px solid #dee2e6;
}

/* Style for the risk list items */
.risk-item.active {
    background-color: var(--af-secondary-bg) !important;
    border-right: 3px solid var(--af-primary) !important;
    font-weight: 600;
}
.risk-item .fw-medium {
    color: #343a40;
}
.risk-item.active .fw-medium {
    color: var(--af-primary);
}

/* Subtle hover effect for the risk list */
.risk-item:not(.active):hover {
    background-color: #f8f9fa;
}

/* Smaller buttons for actions */
.btn-xs {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
}

.badge.badge-text-only {
    background-color: transparent !important;
    border: 1px solid currentColor; /* Use text color for the border */
    font-weight: 600;
}

.hero-section {
    background: var(--af-primary); /* Solid Green Background */
    color: white;
    padding: 8rem 0 6rem 0; /* Adjust padding */
}
.hero-logo img {
    filter: brightness(0) invert(1); /* This turns your logo white */
}
.btn-accent {
    background-color: var(--af-accent);
    border-color: var(--af-accent);
    color: var(--af-text-dark) !important; /* Dark text on gold button */
}
.btn-accent:hover {
    background-color: #b8860b; 
    border-color: #a0740a;
}


.feature-icon {
    font-size: 2.5rem;
    color: var(--af-accent); /* Make feature icons GOLD */
    margin-bottom: 1.5rem;
    display: inline-block;
    background-color: var(--af-secondary-bg); /* Add a light green circle behind */
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
}


.cta-section {
    background: var(--af-primary); /* Use solid green */
    color: white;
    /* ... (بقية التنسيقات) ... */
}
.cta-section h2::after {
    background: var(--af-accent); /* Make the underline gold */
}