@import './general/animations.css';
@import './general/buttons.css';
@import './general/dynamicTable.css';
@import './general/footer.css';
@import './general/header.css';
@import './general/input.css';
@import './general/modal.css';
@import './general/navbar.css';
@import './general/notifications.css';
@import './general/select.css';

:root {
    /* Padding */
    --padding-large: 20px;
    --padding-medium: 15px;
    --padding-small: 10px;
    --padding-tiny: 5px;

    /* Border Radius */
    --radius-small: 5px;
    --radius-medium: 8px;
    --radius-large: 12px;

    /* Colors */
    --color-accent: #a46cc7;
    --color-accent-hover: #d67eff;
    --color-background: linear-gradient(135deg, #322f45, #2c2a3b);
    --color-dropdown-bg: #333333;
    --color-dropdown-hover-bg: #444444;
    --color-dropdown-text: #d5d5d5;
    --color-error: #f44336;
    --color-info: #2196f3;
    --color-muted: #bdbdbd;
    --color-primary: #8e24aa;
    --color-secondary: #2b2b2d;
    --color-primary-hover: #ab47bc;
    --color-secondary-hover: #3c3c3e;
    --color-success: #4caf50;
    --color-text: #e0e0e0;
    --color-warning: #ffa807;

    /* Dimensions */
    --dropdown-min-width: 100px;

    /* Font Settings */
    --font-family: 'Roboto', sans-serif;
    --font-size-base: 1em;
    --font-size-heading: 1.8em;
    --font-size-large: 1.2em;
    --font-size-medium: 1.1em;
    --font-size-small: 0.9em;
    --font-size-tiny: 0.8em;

    /* Opacities */
    --opacity-dropdown-hover: 0.8;

    /* Shadows */
    --box-shadow-heavy: 0 4px 10px rgba(0, 0, 0, 0.3);
    --box-shadow-light: 0 2px 5px rgba(0, 0, 0, 0.2);
    --shadow-btn-hover: 0 4px 12px rgba(159, 66, 187, 0.5);
    --shadow-dropdown: 0 4px 10px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --spacing-large: 20px;
    --spacing-medium: 15px;
    --spacing-small: 10px;

    /* Table Colors */
    --table-accent-color: #4c315c;
    --table-bg: rgba(32, 30, 46, 0.9);;
    --table-border-color: #444;
    --table-header-bg: #2b2b2d;
    --table-muted-color: var(--color-muted);
    --table-text-color: var(--color-text);
    --table-hover-bg: rgba(48, 46, 68, 0.85);

    /* Table Dimensions */
    --table-padding: 12px 20px;

    /* Table Fonts */
    --table-header-font-weight: 600;

    /* Table Icon Sizes */
    --arrow-icon-size: 12px;
    --checkbox-scale: 1.1;

    /* Table Shadows */
    --table-hover-shadow: 0 2px 10px rgba(142, 36, 170, 0.4);

    /* Transforms */
    --transform-hover: translateY(-2px);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Footer Colors */
    --footer-bg: rgba(32, 30, 46, 0.9);
    --footer-text-color: var(--color-muted);
    --footer-link-color: var(--color-accent);
    --footer-link-hover-color: var(--color-accent-hover);
    --footer-separator-color: var(--color-muted);

    /* Footer Dimensions */
    --footer-font-size: 0.9em;

    /* Footer Spacing */
    --footer-padding: var(--spacing-large);
    --footer-link-margin: var(--spacing-small);

    /* Header Colors */
    --header-bg: #212121;
    --header-text-color: #e5e5e5;

    /* Header Spacing */
    --header-padding-vertical: var(--spacing-medium);
    --header-padding-horizontal: var(--spacing-large);
    --header-logo-gap: var(--spacing-small);

    /* Header Dimensions */
    --header-logo-width: 150px;
    --header-section-width: 33.3%;

    /* Header Font Sizes */
    --header-font-size: var(--font-size-base);
    --header-title-font-size: var(--font-size-large);

    /* Header Shadows */
    --header-box-shadow: var(--box-shadow-heavy);

      /* Input Colors */
      --input-bg: rgba(255, 255, 255, 0.1);
      --input-border-color: rgba(255, 255, 255, 0.3);
      --input-focus-border-color: var(--color-accent);
      --input-focus-shadow-color: rgba(164, 108, 199, 0.5);
      --input-text-color: #e5e5e5;
      --input-autofill-bg: rgba(255, 255, 255, 0.1);
      --input-autofill-text-color: #333;
  
      /* Input Dimensions */
      --input-padding: var(--spacing-small);
      --input-radius: var(--radius-medium);
      --input-max-width: 500px;
  
      /* Input Transitions */
      --input-transition: border-color var(--transition-medium), background-color var(--transition-medium);

      /* Modal Colors */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: rgba(48, 46, 68, 0.9);
    --modal-head-color: #ffffff;
    --modal-input-bg: rgba(255, 255, 255, 0.1);
    --modal-input-border: rgba(255, 255, 255, 0.3);
    --modal-input-focus-border: #a46cc7;
    --modal-input-focus-shadow: rgba(164, 108, 199, 0.5);
    --modal-label-color: #d5d5d5;
    --modal-close-hover-color: #ff3b3b;

    /* Modal Dimensions */
    --modal-width: 90%;
    --modal-max-width: 500px;
    --modal-note-min-height: 400px;

    /* Modal Spacing */
    --modal-padding: var(--spacing-large);
    --modal-head-margin-bottom: var(--spacing-large);
    --modal-body-padding: var(--spacing-medium);
    --modal-footer-padding: var(--spacing-medium);
    --modal-label-margin: 10px 0 5px;
    --modal-input-padding: 10px;
    --modal-note-margin-top: 15px;

    /* Modal Transitions */
    --modal-transition: opacity var(--transition-slow), visibility var(--transition-slow);
    --modal-btn-transition: background-color var(--transition-medium), transform var(--transition-fast);

    /* Modal Box Shadows */
    --modal-btn-hover-shadow: 0 4px 12px rgba(171, 71, 188, 0.5);
    --modal-input-box-shadow: 0 0 10px var(--modal-input-focus-shadow);

    /* Modal Font Sizes */
    --modal-head-font-size: 1.5em;
    --modal-label-font-size: 1em;
    --modal-note-font-size: 1em;

     /* Navbar Colors */
     --navbar-bg-disabled: #555;
     --navbar-link-color: #d5d5d5;
     --navbar-link-hover-color: var(--color-accent);
     --navbar-dropdown-bg: #333;
     --navbar-dropdown-hover-bg: #444;
     --navbar-dropdown-active-color: #a46cc7;
 
     /* Navbar Dimensions */
     --navbar-width: 33.3%;
     --navbar-dropdown-min-width: 140px;
     --navbar-icon-size: 24px;
 
     /* Navbar Transitions */
     --navbar-transition: background-color var(--transition-medium), color var(--transition-medium);

      /* Notification and Alert Colors */
    --notification-bg: #333;
    --notification-text-color: #fff;
    --notification-success-bg: var(--color-success);
    --notification-error-bg: var(--color-error);
    --notification-info-bg: var(--color-info);
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-error-bg: #f8d7da;
    --alert-error-text: #721c24;
    --alert-error-border: #f5c6cb;
    --alert-info-bg: var(--color-accent);
    --alert-info-text: #ffffff;
    --alert-info-border: var(--color-accent);
    --alert-warning-bg: var(--color-warning);
    --alert-warning-text: #5e3e03;
    --alert-warning-border: #ffa807;

    /* Notification and Alert Dimensions */
    --notification-width: 300px;
    --alert-container-right: 60px;

    /* Notification and Alert Spacing */
    --notification-gap: var(--spacing-small);
    --alert-margin-bottom: var(--spacing-small);

    /* Notification and Alert Animation */
    --notification-animation: slideIn 0.5s ease-in-out;
    --alert-animation: fadeIn var(--transition-medium);

    /* Notification and Alert Opacity */
    --alert-opacity: 0.9;

    /* Close Button */
    --close-btn-font-size: 1.2em;

     /* Select Colors */
     --select-bg: #1e1e1e;
     --select-text-color: #d5d5d5;
     --select-border-color: rgba(126, 126, 126, 0.3);
     --select-hover-border-color: var(--color-primary);
     --select-hover-shadow: 0 5px 70px rgba(142, 36, 170, 0.8);
     --select-scrollbar-thumb-bg: var(--color-primary);
     --select-scrollbar-thumb-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
     --select-option-hover-bg: #2b2b2d;
     --select-option-checked-bg: #2b2b2d;
 
     /* Select Dimensions */
     --select-padding: var(--spacing-small);
     --select-scrollbar-width: 8px;
 
     /* Select Transitions */
     --select-hover-transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
    }

/* General Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    font-family: var(--font-family);
    background: var(--color-background);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    height: 100%;
    zoom: .9;
}

.hidden {
    display: none !important;
}

.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Container */
.container {
    max-width: 100%;
    margin: var(--spacing-large);
    margin-top: 100px;
    padding: var(--spacing-large);
    border-radius: var(--radius-large);
    background: rgba(48, 46, 68, 0.85);
    box-shadow: 0 0 70px 10px rgba(0, 0, 0, 0.3);
}

.heading {
    font-size: var(--font-size-heading);
    color: #ffffff;
    margin: var(--spacing-large) 0;
    text-align: center;
}

.subheading {
    font-size: var(--font-size-large);
    font-weight: 400;
    color: var(--color-muted);
    margin-bottom: var(--spacing-medium);
    text-align: center;
}

/* Search Input */
.search-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-large);
}

/* Actions Bar */
.actions-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-large);
}