/* ==========================================================================
   GrantDrive - "Impressive & Out-of-the-Box" Theme
   shared-styles.css
   ==========================================================================
   This file complements Tailwind CSS, focusing on unique component styles,
   animations, and visual enhancements using the Grant Thornton palette.
   Designer Enhancements (v2): Focus on refined spacing, padding, and visual rhythm.
*/

/* ==========================================================================
   1. Root Variables & Global Styles - "Impressive" Edition
   ========================================================================== */

:root {
    /* Grant Thornton Color Palette (Unchanged) */
    --core-purple: #4F2683;
    --primary-light-purple: #A47DDB;
    --primary-dark-purple: #2D0F53;
    --secondary-teal: #1ABC9C;
    --secondary-red: #E74C3C;
    --secondary-yellow: #F1C40F;
    --neutral-light-grey: #f0f0f0;
    --neutral-mid-grey: #d1d5db;
    --neutral-white: #FFFFFF;
    --neutral-dark-grey: #6b7280;
    --neutral-text: #374151;
    --neutral-bg: #f9fafb;

    /* Derived colors for consistency */
    --core-purple-transparent-10: rgba(79, 38, 131, 0.1);
    --core-purple-transparent-05: rgba(79, 38, 131, 0.05);
    --primary-light-purple-darker: #8a64c1;
    --secondary-teal-darker: #16a085;
    --secondary-red-darker: #c0392b;
    --secondary-yellow-darker: #d1a100;
    --text-on-yellow: #423305;

    /* UI Element Variables */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    /* Enhanced Line Heights for Readability */
    --line-height-tight: 1.35; /* For headings or compact text */
    --line-height-base: 1.65;  /* For body copy, good for accessibility */
    --line-height-relaxed: 1.8; /* For longer articles or more spacious layouts */

    /* Refined Border Radius Scale (subtler increments for a more "designed" feel) */
    --border-radius-xs: 0.25rem;  /* 4px - For small elements like tags */
    --border-radius-sm: 0.5rem;   /* 8px - Common for buttons, inputs */
    --border-radius-md: 0.75rem;  /* 12px - For cards, larger containers */
    --border-radius-lg: 1rem;     /* 16px - For prominent panels, modals */
    --border-radius-xl: 1.5rem;   /* 24px - For larger, softer-cornered elements */
    --border-radius-pill: 9999px;

    /* Spacing Units (Consider these as base multipliers if not relying solely on Tailwind for everything) */
    /* While Tailwind has its own scale, these can be useful for custom CSS consistency. */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 0.75rem;  /* 12px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 3rem;    /* 48px */

    /* Interactive Shadows & Glows (Retained, good definitions) */
    --shadow-glow-purple: 0 0 15px 2px rgba(164, 125, 219, 0.4);
    --shadow-glow-teal: 0 0 15px 2px rgba(26, 188, 156, 0.4);
    --shadow-card-rest: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.08);
    --shadow-button-rest: 0 3px 8px rgba(79, 38, 131, 0.15);
    --shadow-button-hover: 0 5px 15px rgba(79, 38, 131, 0.25);
    --shadow-focus-ring: 0 0 0 3px var(--core-purple-transparent-10);

    /* Animation & Transition Timing (Retained) */
    --transition-duration-fast: 0.2s;
    --transition-duration-normal: 0.3s;
    --transition-duration-slow: 0.5s;
    --ease-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
}

/* ==========================================================================
   2. Global Enhancements & Subtle Animations
   ========================================================================== */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    font-size: 100%; /* Base font size - typically 16px */
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--neutral-bg);
    color: var(--neutral-text);
    line-height: var(--line-height-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Optional Aurora Background: Retained as is */
}

/* Keyframes for Aurora Background (Retained) */
@keyframes aurora-body { /* ... */ }

/* Custom Scrollbars (Refined for a more subtle, modern feel) */
::-webkit-scrollbar {
    width: 10px;  /* Slightly wider for easier grabbing */
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--neutral-bg); /* Blend with page background */
    border-radius: var(--border-radius-pill);
}
::-webkit-scrollbar-thumb {
    background: var(--neutral-mid-grey);
    border-radius: var(--border-radius-pill);
    border: 2px solid var(--neutral-bg); /* Creates padding around thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-dark-grey);
}




/* ==========================================================================
   3. Component Styling - "Impressive" Details (Spacing Focus)
   ========================================================================== */

/* Header - Sticky, with subtle glassmorphism */
.app-header-desktop {
    background-color: rgba(79, 38, 131, 0.9);
    color: var(--neutral-white);
    /* Tailwind handles padding (e.g., py-4 px-6 or px-8 for more breathability) */
    /* Tailwind handles shadow (e.g., shadow-md) */
    /* Tailwind handles position (sticky top-0 z-50) */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* Designer Note: Ensure Tailwind padding in HTML (e.g. px-6 sm:px-8) provides adequate horizontal space.
       A py-4 (16px) is often good for vertical header padding. */
}

/* Content Wrapper & Sections */
.content-wrapper {
    padding-top: var(--space-lg); /* 24px - Standardized spacing */
    /* If your header height is dynamic, this might need JS adjustment or a fixed header height approach.
       Consider using CSS custom property for header height if fixed. */
    flex-grow: 1; /* Ensures footer is pushed down */
    width: 100%;
    max-width: 1280px; /* Optional: common max-width for content area */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg); /* 24px - consistent side padding */
    padding-right: var(--space-lg); /* 24px */
}

.content-section {
    border-radius: var(--border-radius-lg); /* 16px - Consistent with larger radius scale */
    box-shadow: var(--shadow-card-rest);
    padding: var(--space-xl); /* 32px - Generous padding for primary content blocks */
    margin-top: var(--space-xl); /* 32px - Increased spacing between sections */
    margin-bottom: var(--space-xl); /* 32px */
    transition: box-shadow var(--transition-duration-normal) var(--ease-out-quad);
    background-color: var(--neutral-white); /* Ensure background for sections */
}
.content-section:hover {
    box-shadow: var(--shadow-card-hover);
}
/* First content section might not need top margin if .content-wrapper already provides it */
.content-wrapper > .content-section:first-child {
    margin-top: 0; 
}


/* Login/Register page specific "GD" logo enhancement (Retained, primarily animation) */
.gd-logo-container { max-width: 360px; /* Reduced from 480px */
    padding: var(--space-6) var(--space-6); /* Smaller padding (was space-8/10) */}
.auth-page-container {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* Cards - Interactive Tilt & Glow */
.card {
    border-radius: var(--border-radius-md); /* 12px - Consistent medium radius */
    box-shadow: var(--shadow-card-rest);
    border: 1px solid var(--neutral-light-grey);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-duration-normal) var(--ease-out-quad),
                box-shadow var(--transition-duration-normal) var(--ease-out-quad);
    background-color: var(--neutral-white);
    /* Designer Note: Apply consistent padding using Tailwind (e.g., p-6 for 24px) or define here: */
    /* padding: var(--space-lg); /* 24px - Example if not using Tailwind for this card's padding */
    margin-bottom: var(--space-lg); /* 24px - Consistent spacing below cards */
}
.card:last-child {
    margin-bottom: 0; /* Prevent double margin if card is the last element in a container */
}

.card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-purple);
}

.card.border-primary-light-purple:hover { box-shadow: var(--shadow-card-hover), var(--shadow-glow-purple); }
.card.border-core-purple:hover { box-shadow: var(--shadow-card-hover), var(--shadow-glow-purple); }
.card.border-secondary-teal:hover { box-shadow: var(--shadow-card-hover), var(--shadow-glow-teal); }
.card.border-yellow-400:hover {
    box-shadow: var(--shadow-card-hover), 0 0 15px 2px rgba(250, 204, 21, 0.5);
}


/* Buttons - Refined Padding and Consistent Sizing */
.button-primary, .button-secondary, .button-admin-cancel, .button-context-teal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* Tailwind: font-semibold */
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent; /* Base, overridden by specific styles */
    transition: all var(--transition-duration-fast) var(--ease-out-quad);
    user-select: none;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-sm); /* 8px - Default button rounding */
    line-height: var(--line-height-tight); /* Ensure text sits well within button */


}
/* If icons are used inside buttons, add margin to the icon */
.button-primary svg, .button-secondary svg, .button-admin-cancel svg, .button-context-teal svg {
    margin-right: var(--space-xs); /* 8px - Space between icon and text */
}
.button-primary svg:only-child, .button-secondary svg:only-child, 
.button-admin-cancel svg:only-child, .button-context-teal svg:only-child {
    margin-right: 0; /* No margin if icon is the only content */
}


.button-primary:focus-visible, .button-secondary:focus-visible,
.button-admin-cancel:focus-visible, .button-context-teal:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.button-primary {
    background: linear-gradient(145deg, var(--core-purple), var(--primary-dark-purple));
    color: var(--neutral-white);
    box-shadow: var(--shadow-button-rest);
    transform: translateY(0);
    /* Example padding if using Tailwind: class="py-3 px-6 text-base" (adjust as needed for desired size) */
    padding: var(--space-sm) var(--space-lg); /* 12px 24px - A good default for primary buttons */
}
.button-primary:hover {
    background: linear-gradient(145deg, var(--primary-light-purple), var(--core-purple));
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px);
}
.button-primary:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), var(--shadow-button-rest);
}

.button-secondary {
    background-color: var(--neutral-white);
    color: var(--core-purple);
    border: 1.5px solid var(--core-purple);
    /* Example padding: class="py-[calc(0.75rem-1.5px)] px-[calc(1.5rem-1.5px)]" to maintain same inner space as primary if border is visual */
    /* Or, a slightly smaller padding if visually distinct */
    padding: calc(var(--space-sm) - 1.5px) calc(var(--space-lg) - 1.5px); /* Adjust based on border thickness */
}
.button-secondary:hover {
    background-color: var(--core-purple-transparent-05);
    border-color: var(--primary-dark-purple);
    color: var(--primary-dark-purple);
    transform: translateY(-1px);
}
.button-secondary:active {
    transform: translateY(0px);
    background-color: var(--core-purple-transparent-10);
}

.button-context-teal {
    background: linear-gradient(145deg, var(--secondary-teal), var(--secondary-teal-darker));
    color: var(--neutral-white);
    border-radius: var(--border-radius-xs); /* 4px - Smaller radius for compact/contextual buttons */
    box-shadow: 0 2px 5px rgba(26, 188, 156, 0.2);
    /* Example padding for smaller button: class="py-2 px-4 text-sm" */
    padding: var(--space-xs) var(--space-md); /* 8px 16px */
}
.button-context-teal:hover {
    background: linear-gradient(145deg, var(--secondary-teal-darker), var(--secondary-teal));
    box-shadow: 0 4px 10px rgba(26, 188, 156, 0.3);
    transform: translateY(-1px);
}
.button-context-teal:active { transform: translateY(0px); }

.button-admin-cancel {
    color: var(--secondary-red);
    border-color: var(--secondary-red);
    background-color: transparent;
    /* Example padding for smaller button: class="py-2 px-4 text-sm" */
    padding: calc(var(--space-xs) - 1px) calc(var(--space-md) - 1px); /* Adjust for border */
    border-radius: var(--border-radius-xs); /* 4px */
}
.button-admin-cancel:hover {
    background-color: rgba(231, 76, 60, 0.05);
    border-color: var(--secondary-red-darker);
    color: var(--secondary-red-darker);
    transform: translateY(-1px);
}


/* Forms - Refined Padding and Margins */
.form-label {
    display: block;
    /* Tailwind handles font-size, weight. Consider 'mb-2' (8px) or 'mb-1.5' (6px) for space below label */
    /* E.g., font-semibold text-sm text-neutral-dark-grey mb-2 */
    margin-bottom: var(--space-xs); /* 8px - Standard space below labels */
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    border: 1px solid var(--neutral-mid-grey);
    border-radius: var(--border-radius-sm); /* 8px - Consistent with buttons */
    background-color: var(--neutral-white);
    color: var(--neutral-text);
    transition: border-color var(--transition-duration-fast) var(--ease-out-quad),
                box-shadow var(--transition-duration-fast) var(--ease-out-quad),
                background-color var(--transition-duration-fast) var(--ease-out-quad);
    appearance: none;
    /* === Designer Note: Consistent Input Padding === */
    /* Use Tailwind classes like "py-2.5 px-4" or "py-3 px-4" for a comfortable height.
       A common height is 40-44px. */
    padding: var(--space-sm) var(--space-md); /* 12px 16px - Balanced padding */
    font-size: 1rem; /* Ensure base font size for readability */
    line-height: var(--line-height-base); /* Ensure text is vertically centered well */
}
/* Adjust padding for select due to arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280' width='20px' height='20px'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center; /* 16px from right */
    background-size: 1.25em 1.25em;
    padding-right: calc(var(--space-md) + 1.25em + var(--space-xs)); /* Original padding-right + icon width + space for icon */
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--core-purple);
    box-shadow: 0 0 0 3px var(--core-purple-transparent-10), 0 2px 5px rgba(0,0,0,0.05);
    background-color: #fcfaff; /* Slightly lighter focus background */
}

.form-textarea {
    min-height: 120px; /* Increased min-height for better usability */
    resize: vertical;
    line-height: var(--line-height-base); /* Ensure consistent line height for multi-line text */
}

/* Grouping form elements, e.g., a label + input */
.form-group {
    margin-bottom: var(--space-lg); /* 24px - Consistent spacing between form groups */
}
.form-group:last-child {
    margin-bottom: 0;
}

/* Status Badges - Refined Padding */
.status-badge {
    border: 1px solid transparent;
    /* === Designer Note: Consistent Badge Padding === */
    /* Tailwind e.g., "px-2.5 py-0.5 text-xs rounded-full" or "px-3 py-1 text-sm rounded-md"
       Choose based on desired prominence and size. */
    padding: var(--space-xxs) var(--space-xs); /* 4px 8px - Small and neat for badges */
    font-size: 0.875rem; /* 14px */
    line-height: var(--line-height-tight);
    border-radius: var(--border-radius-xs); /* 4px - or --border-radius-pill for fully rounded */
    font-weight: 500; /* medium */
    display: inline-flex;
    align-items: center;
}



/* Modals - Refined Padding and Spacing */
#confirmModal {
    transition: opacity var(--transition-duration-normal) var(--ease-out-quad), visibility var(--transition-duration-normal) steps(1, end);
    visibility: hidden;
    opacity: 0;
    /* Tailwind handles flex centering. Ensure `p-4` or `p-6` on the modal container for small screens. */
}
#confirmModal.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
#confirmModal > div { /* The actual modal content box */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque for better readability */
    -webkit-backdrop-filter: blur(12px) saturate(180%); /* Adjusted blur/saturate */
    backdrop-filter: blur(12px) saturate(180%);
    border-radius: var(--border-radius-lg); /* 16px - Standard large radius */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Softer, larger shadow */
    border: 1px solid rgba(255,255,255,0.25);
    transform: scale(0.95);
    opacity: 0;
    transition: transform var(--transition-duration-normal) var(--ease-in-out-circ),
                opacity var(--transition-duration-normal) var(--ease-in-out-circ);
    width: 90%; /* Max width for responsiveness */
    max-width: 500px; /* Sensible max width */
    /* === Designer Note: Modal Internal Padding === */
    /* Tailwind "p-6 sm:p-8" for content area. */
    /* This is the container, actual content padding will be inside (e.g. modal header, body, footer) */
    /* Add padding here if this div directly contains text/elements without further nesting */
    /* padding: var(--space-xl); /* 32px */
}
#confirmModal.is-open > div {
    transform: scale(1);
    opacity: 1;
}
/* Spacing within the modal content (if you have distinct header/body/footer sections) */
.modal-header {
    padding: var(--space-lg) var(--space-xl); /* 24px 32px */
    border-bottom: 1px solid var(--neutral-light-grey);
    /* Tailwind: text-xl font-semibold for title */
}
.modal-body {
    padding: var(--space-lg) var(--space-xl); /* 24px 32px */
    /* Tailwind: text-sm or text-base for modal text */
    line-height: var(--line-height-base);
}
.modal-footer {
    padding: var(--space-lg) var(--space-xl); /* 24px 32px */
    background-color: var(--neutral-bg); /* Slight differentiation */
    border-top: 1px solid var(--neutral-light-grey);
    border-bottom-left-radius: var(--border-radius-lg); /* Match parent rounding */
    border-bottom-right-radius: var(--border-radius-lg);
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: var(--space-sm); /* 12px - Space between buttons */
}


/* Section Titles - Refined Spacing */
.section-title {
    border-bottom: 1px solid var(--neutral-mid-grey);
    position: relative;
    /* Tailwind: text-2xl font-bold text-neutral-text pb-3 mb-6 */
    /* Ensure sufficient padding-bottom and margin-bottom via Tailwind for spacing */
    /* E.g., pb-3 (12px) or pb-4 (16px) */
    /* E.g., mb-6 (24px) or mb-8 (32px) for space after title before content */
    padding-bottom: var(--space-sm); /* 12px - Space above the border */
    margin-bottom: var(--space-xl); /* 32px - Space after the title/border before content */
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px; /* Slightly wider accent */
    height: 2.5px; /* Slightly thicker accent */
    background-color: var(--core-purple);
    border-radius: 1px;
}

/* Footer */
.app-footer-main {
    background-color: var(--neutral-bg);
    /* Tailwind: text-center text-neutral-dark-grey text-sm border-t */
    /* padding: var(--space-xl) var(--space-lg); /* 32px vertical, 24px horizontal */
    /* Use Tailwind py-8 or py-12 for good vertical spacing */
}


#confirmModal {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration-normal) var(--ease-out-quad),
                visibility var(--transition-duration-normal) steps(1, end);
}

#confirmModal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

#confirmModal > div {
    transform: scale(0.95);
    opacity: 0;
    transition: transform var(--transition-duration-normal) var(--ease-in-out-circ),
                opacity var(--transition-duration-normal) var(--ease-in-out-circ);
}

#confirmModal.is-open > div {
    transform: scale(1);
    opacity: 1;
}