/*
================================================================
  Unified Stylesheet with Google Home Inspired Enhancements
================================================================
*/

/* :root -> Defines the core color palette using CSS variables */
:root {
    /* Primary & Accents (Inspired by Google's Blue) */
    --color-primary: #1a73e8;
    --color-on-primary: #ffffff;
    --color-primary-container: #d2e3fc;
    --color-on-primary-container: #0b325e;
    
    /* Background & Surfaces */
    --color-background: #f8f9fa; 
    --color-on-background: #1f1f1f;
    --color-surface: #ffffff;
    --color-on-surface: #1f1f1f;
    --color-surface-variant: #eef1f5;
    --color-on-surface-variant: #44474a;
    
    /* Borders & Outlines */
    --color-border: #e0e0e0;
    --color-outline: #cdd1d6;

    /* States */
    --color-danger: #d93025;
    --color-danger-hover: #b0261c;

    /* Typography Scale (Based on Google's Material Design) */
    --font-size-base: 16px; /* Base font size */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
}

/* General Body & Typography */
body {
    font-family: 'Google Sans Text', sans-serif;
    color: var(--color-on-background);
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
    /* This correctly makes space for the 64px fixed header */
    padding-top: 64px; 

    /* New Scrolling Gradient Background */
    background: linear-gradient(180deg, #FFFFFF 20%, #f0f4f8 50%, #e6f0ff 100%);
    background-size: 100% 200%; /* Make it twice as tall to allow for scrolling */
    background-position: 0% 0%; /* Start at the top */
    transition: background-position 0.2s ease-out; /* Smooth the transition */
}

h1, .text-5xl { font-size: var(--font-size-5xl); line-height: 1.2; font-weight: 700; }
h2, .text-4xl { font-size: var(--font-size-4xl); line-height: 1.2; font-weight: 700; }
h3, .text-3xl { font-size: var(--font-size-3xl); line-height: 1.3; font-weight: 700; }
h4, .text-2xl { font-size: var(--font-size-2xl); line-height: 1.4; font-weight: 600; }
h5, .text-xl { font-size: var(--font-size-xl); line-height: 1.5; font-weight: 600; }

.section-title {
    color: var(--color-on-background);
    font-weight: 700;
}

/* Card Styles */
.card, .card-static {
    background-color: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 1.5rem;
}

.card:hover, .card-static:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-link {
    text-decoration: none;
    color: inherit;
}

/* Button Styles (Google Inspired) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.btn-primary { /* Filled */
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.btn-primary:hover {
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15);
    background-color: #1868d1;
}

.btn-secondary { /* Outlined */
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-outline);
}
.btn-secondary:hover {
    background-color: var(--color-primary-container);
}

/* Main Navigation Bar Styles */
.main-nav {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    /* This correctly matches the Google Home header height */
    height: 64px; 
}

.main-nav .container {
    height: 100%;
}

.main-nav a {
    color: var(--color-on-surface-variant);
    transition: color 0.2s, background-color 0.2s;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.main-nav a:hover, .main-nav .dropdown:hover .dropdown-toggle {
    background-color: var(--color-surface-variant);
    color: var(--color-on-surface);
}

.main-nav a.active {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container) !important;
    font-weight: 700;
    border-bottom: 3px solid var(--color-on-primary-container); /* Navy blue */
}

/* High-contrast style for active items when the nav is scrolled */
nav.main-nav.scrolled a.active {
    border-bottom-color: var(--color-on-primary); /* White */
}

/* High-contrast style for active items when the nav is scrolled */
nav.main-nav.scrolled a.active,
nav.main-nav.scrolled .dropdown-toggle.active-category {
    background-color: rgba(255, 255, 255, 0.15); /* A subtle, translucent white */
    color: #ffffff !important; /* Ensure text is white */
    box-shadow: none;
}

.main-nav .dropdown-toggle.active-category {
    background-color: var(--color-surface-variant);
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 3px solid var(--color-primary);
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: var(--color-surface-variant);
}

/* Fade-in Animation */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/*
================================================================
  New Styles for Scrolling Effects & UI Enhancements
================================================================
*/

/* 2. Header Scroll Effect */
nav.main-nav {
    /* Add transition for smooth color changes */
    transition: background-color 0.4s ease, color 0.4s ease;
}

nav.main-nav.scrolled {
    background-color: #1f2937; /* Tailwind's gray-800, a modern "navy" */
    color: #ffffff; /* White text */
}

/* Ensure links and dropdowns in the main bar (but not mobile menu) change color */
nav.main-nav.scrolled > .container a,
nav.main-nav.scrolled > .container span {
    color: #ffffff;
}

/* Override hover effects for the scrolled state in the main bar */
nav.main-nav.scrolled > .container a:hover,
nav.main-nav.scrolled > .container .dropdown:hover .dropdown-toggle {
    background-color: #374151; /* gray-700 */
    color: #ffffff;
}

/* When the nav is scrolled, force the dropdown menu links back to a dark color */
nav.main-nav.scrolled .dropdown-menu a {
    color: var(--color-on-surface);
}

/*
================================================================
  Back to Top Button (Material 3 Inspired FAB)
================================================================
*/
#back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
    border: none;
    border-radius: 16px; /* Material 3 uses slightly squared-off circles */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    visibility: hidden;
}

#back-to-top-btn.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

#back-to-top-btn:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

/*
================================================================
  Navigation UI/UX Enhancements
================================================================
*/

/* 1. Chevron Icon Styling */
.nav-chevron {
    font-size: 0.7rem;
    margin-left: 0.5rem;
    color: var(--color-on-surface-variant);
    transition: transform 0.3s ease;
}

/* Rotate chevron when the dropdown is open */
.dropdown.open .nav-chevron,
.mobile-menu-category.open .nav-chevron {
    transform: rotate(180deg);
}

/* Ensure chevron color changes in scrolled header */
nav.main-nav.scrolled .nav-chevron {
    color: #ffffff;
}
nav.main-nav.scrolled #hamburger-btn {
    color: #ffffff;
}


/* 2. Desktop Dropdown Menu Styling & Animation */
.dropdown-menu {
    /* Base Styles */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 50;
    padding: 0.5rem 0;

    /* Animation: Initial State (Hidden) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown.open > .dropdown-menu {
    /* Animation: Final State (Visible) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* 3. Mobile Sub-menu Animation */
.mobile-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
}

.mobile-submenu.open {
    max-height: 500px; /* Adjust as needed, should be > max content height */
    opacity: 1;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
}

/* 4. Active Category Styling for Mobile */
#mobile-menu .mobile-menu-category h3.active-category {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-weight: 700;
}

#mobile-menu .mobile-menu-category h3.active-category .nav-chevron {
    color: var(--color-on-primary-container);
}

/*
================================================================
  NEW Styles for Google Home Style Mobile Menu
================================================================
*/

/* Prevents scrolling on the body when the menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Styling for the slide-in menu when it's active */
#mobile-menu.is-open {
    right: 0; /* Slides the menu into view */
}

/* Styling for the background overlay when active */
#mobile-menu-overlay.is-open {
    display: block;
    opacity: 1;
}

/* Hamburger Icon Animation (3 lines to X) */
#hamburger-btn.is-open #icon-open {
    display: none;
}
#hamburger-btn.is-open #icon-close {
    display: block;
}

/*
================================================================
  Audit Trail Table Specific Styles
================================================================
*/

/* Ensure audit tables are properly displayed */
.audit-table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: auto;
}

.audit-table th,
.audit-table td {
    padding: 8px !important;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.audit-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #d1d5db;
}

/* Document Name column wrapping styles */
/* For both audit-trail and risk-analyzer pages: Document Name is 2nd column */
.audit-table th:nth-child(2),
.audit-table td:nth-child(2),
.audit-table th.document-name-col,
.audit-table td.document-name-col {
    max-width: 150px !important;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Signing Reason column styles for better readability */
/* For audit-trail page: Signing Reason is 5th column */
.audit-table th:nth-child(5),
.audit-table td:nth-child(5) {
    min-width: 200px !important;
    max-width: 300px !important;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Specifically ensure Record ID column is visible and styled */
/* For audit-trail page: Record ID is 4th column */
.audit-table th:nth-child(4),
.audit-table td:nth-child(4) {
    min-width: 120px !important;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* For risk-analyzer page: Record ID is 3rd column */
/* This selector is more specific and will override above when Record ID is in 3rd position */
.audit-table th:nth-child(3):contains("Record ID"),
.audit-table th:nth-child(3)[title*="Record ID"],
.audit-table th:nth-child(3) + th + th:not(:nth-child(4)), /* 3rd column when there's no 4th record id */
.audit-table td:nth-child(3):nth-last-child(4) /* 3rd column in 6-column table */ {
    min-width: 120px !important;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* Alternative approach: Handle both cases with attribute selectors */
.audit-table th[style*="Record ID"],
.audit-table td[style*="background-color: #f8f9fa"] {
    min-width: 120px !important;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* Make Record ID column stand out slightly */
.audit-table td:nth-child(4),
.audit-table td:nth-child(3):nth-last-child(4) {
    background-color: #f8f9fa !important;
    border-left: 2px solid #1a73e8;
}

/* Responsive table wrapper */
.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Ensure table doesn't break on small screens */
@media (max-width: 768px) {
    .audit-table {
        font-size: 12px;
    }
    
    .audit-table th,
    .audit-table td {
        padding: 4px !important;
    }
    
    /* Keep Record ID column visible even on mobile */
    .audit-table th:nth-child(4),
    .audit-table td:nth-child(4),
    .audit-table th:nth-child(3):nth-last-child(4),
    .audit-table td:nth-child(3):nth-last-child(4) {
        min-width: 100px !important;
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: #f8f9fa !important;
    }
}