/* common/css/base.css - Underground Theme + Modern Enhancements */



/* === UNDERGROUND MUSIC INSPIRED VARIABLES === */

:root {

    /* Primary Colors - Underground Music Theme */

    --base_primary: rgba(168, 85, 247, 1);         /* Punk purple */

    --base_primary_rgb: 168, 85, 247;

    --base_secondary: rgba(14, 165, 233, 1);       /* Ska blue */

    --base_secondary_rgb: 14, 165, 233;

    --base_accent: rgba(239, 68, 68, 1);           /* Rebellious red */

    --base_accent_rgb: 239, 68, 68;

    

    /* Supporting Colors */

    --base_success: rgba(34, 197, 94, 1);          /* Electric green */

    --base_warning: rgba(251, 146, 60, 1);         /* Warm orange */

    --base_danger: rgba(239, 68, 68, 1);           /* Rebellious red */

    --base_info: rgba(14, 165, 233, 1);            /* Ska blue */

    

    /* Neutral Colors */

    --base_light: rgba(248, 250, 252, 1);          /* Clean white-blue */

    --base_dark: rgba(15, 23, 42, 1);              /* Deep slate */

    --base_dark_rgb: 15, 23, 42;

    

    /* Text colors */

    --base_text_on_light: rgba(15, 23, 42, 1);     /* Deep slate on light */

    --base_text_on_dark: rgba(200, 200, 200, 1);   /* Clean white on dark */

    --base_text_muted: rgba(100, 116, 139, 1);     /* Muted slate */

    

    /* Border colors */

    --base_border_light: rgba(226, 232, 240, 1);   /* Light slate border */

    --base_border_dark: rgba(51, 65, 85, 1);       /* Dark slate border */

    

    /* Button hover states */

    --base_primary_hover: rgba(147, 51, 234, 1);   /* Darker punk purple */

    --base_secondary_hover: rgba(2, 132, 199, 1);  /* Darker ska blue */

    --base_accent_hover: rgba(220, 38, 38, 1);     /* Darker rebellious red */

    

    /* Shadows - Modern and Subtle */

    --base_shadow_sm: 0 1px 3px rgba(0, 0, 0, 0.1);

    --base_shadow_md: 0 4px 6px rgba(0, 0, 0, 0.05);

    --base_shadow_lg: 0 10px 15px rgba(0, 0, 0, 0.08);

    

    /* Border radius - Modern */

    --base_radius_sm: 6px;

    --base_radius_md: 10px;

    --base_radius_lg: 15px;

    

    /* Mobile-Optimized Spacing - Max 15px */

    --base_pad_xs: 2px;

    --base_pad_sm: 4px;

    --base_pad_md: 8px;

    --base_pad_lg: 12px;

    --base_pad_xl: 15px;

    

    --base_gap_xs: 2px;

    --base_gap_sm: 4px;

    --base_gap_md: 8px;

    --base_gap_lg: 12px;

    --base_gap_xl: 15px;

    

    /* Typography Scale - Mobile Optimized */

    --text_xs: 0.75rem;     /* 12px */

    --text_sm: 0.875rem;    /* 14px */

    --text_base: 1rem;      /* 16px - optimal mobile reading */

    --text_lg: 1.125rem;    /* 18px */

    --text_xl: 1.25rem;     /* 20px */

    --text_2xl: 1.5rem;     /* 24px */

    --text_3xl: 1.875rem;   /* 30px */

    

    /* Form & Input Variables */

    --form_bg: var(--base_light);

    --form_header_bg: rgba(241, 245, 249, 1);      /* Slightly darker light */

    --form_body_bg: var(--base_primary);

    --form_text: var(--base_text_on_light);

    --form_label: rgba(248, 250, 252, 0.95);       /* High contrast on primary */

    --form_button_bg: var(--base_secondary);

    --form_button_hover: var(--base_secondary_hover);

    --form_control_bg: var(--base_light);

    --form_control_text: var(--base_text_on_light);

    --form_header_title: var(--base_danger);

    --form_button_text: var(--base_text_on_dark);

    

    /* Input & Button Heights - Better Touch Targets */

    --input_height_sm: 36px;

    --input_height_md: 44px;

    --input_height_lg: 52px;

    

    /* Focus States */

    --focus_ring_color: var(--base_primary);

    --focus_ring_width: 2px;

    --focus_ring_offset: 2px;

    

    /* Slideout Menu Variables */

    --slideout_bg: var(--base_primary);

    --slideout_hover_bg: var(--base_primary_hover);

    --slideout_text: var(--base_text_on_dark);

    --slideout_border: transparent;

}



/* Dark mode variables overrides */

@media (prefers-color-scheme: dark) {

    :root {

        --base_light: rgba(30, 41, 59, 1);

        --base_dark: rgba(15, 23, 42, 1);

        --base_text_on_light: rgba(200, 200, 200, 1);

        --base_border_light: rgba(51, 65, 85, 1);

        --base_border_dark: rgba(71, 85, 105, 1);

        

        /* Form overrides for dark mode */

        --form_header_bg: rgba(30, 41, 59, 1);

        --form_body_bg: var(--base_dark);

        --form_control_bg: rgba(30, 41, 59, 1);

        --form_control_text: var(--base_text_on_dark);

        

        /* Adjust shadows for dark mode */

        --base_shadow_sm: 0 1px 3px rgba(0, 0, 0, 0.3);

        --base_shadow_md: 0 4px 6px rgba(0, 0, 0, 0.2);

        --base_shadow_lg: 0 10px 15px rgba(0, 0, 0, 0.25);

    }

}



/* Mobile-first responsive adjustments */

@media (max-width: 480px) {

    :root {

        --base_pad_md: 10px;

        --base_pad_lg: 12px;

        --base_gap_md: 12px;

        --base_gap_lg: 16px;

    }

}



@media (min-width: 768px) {

    :root {

        --base_gap_lg: 24px;

    }

}



/* === RESET & MODERN BASICS === */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Modern scrolling and performance */

html {

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



html, body {

    margin: 0;

    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

    background: linear-gradient(135deg, var(--base_secondary), var(--base_primary), var(--base_accent));

    color: var(--base_text_on_dark);

    height: 100%;

    width: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    position: relative;

    z-index: 1;







/* Modern focus management */

*:focus {

    outline: var(--focus_ring_width) solid var(--focus_ring_color);

    outline-offset: var(--focus_ring_offset);

}



*:focus:not(:focus-visible) {

    outline: none;

}



/* Better touch targets for mobile */

button, input, select, textarea, .btn, .link, [role="button"] {

    min-height: 44px; /* iOS recommended minimum */

    touch-action: manipulation; /* Prevent zoom on double-tap */

}



/* === LAYOUT STRUCTURE === */

.header {

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 var(--base_pad_md);

    border-bottom: solid 2px var(--base_accent);

    flex-shrink: 0;

    z-index: 0;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.logo_link {

    display: flex;

    align-items: center;

    text-decoration: none;

    will-change: transform; /* Animation performance */

}



.logo_img {

    height: 70px;

    width: auto;

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.logo_img:hover {

    transform: scale(1.05);

}



.main_content {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    overflow-y: auto;

    overflow-x: hidden;

    padding: var(--base_pad_sm);

    max-width: 100%;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */

}



.footer {

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: var(--base_text_on_dark);

    border-top: solid 2px var(--base_secondary);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



/* === SLIDEOUT DRAWERS === */

.slideout_drawer_right, .slideout_drawer_left {

    display: none;

    position: fixed;

    top: 82px;

    width: min(250px, 90vw); /* Responsive width */

    padding-top: var(--base_pad_xs);

    z-index: 1005;

    will-change: transform; /* Animation performance */

}



.slideout_drawer_right { right: 0; }

.slideout_drawer_left { left: 0; }





/* === OVERLAY CLOSER === */

.obj_closer {

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(90, 90, 90, 0.5);

    display: none;

    z-index: 404;

    touch-action: none; /* Prevent scrolling behind overlay */

}



/* === FORM WRAPPERS === */

.form_wrapper, .form_wrapper_floating {

    display: block;

    position: fixed;

    top: 10px;

    left: 50%;

    transform: translateX(-50%);

    padding: var(--base_pad_md);

    background-color: var(--form_bg);

    box-shadow: var(--base_shadow_md);

    border-radius: var(--base_radius_lg);

    width: min(700px, 90vw);

    min-width: 300px;

    max-height: calc(100vh - 20px);

    overflow: hidden;

    color: var(--form_text);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.form_wrapper_floating {

    z-index: 1005;

}



.form_wrapper_small, .form_wrapper_small_floating {

    display: block;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: var(--base_pad_md);

    background-color: var(--form_bg);

    box-shadow: var(--base_shadow_md);

    border-radius: var(--base_radius_lg);

    max-width: min(500px, 90vw);

    min-width: min(375px, 90vw);

    max-height: min(600px, 90vh);

    overflow: hidden;

    color: var(--form_text);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.form_wrapper_small_floating {

    z-index: 1005;

}



.form_header {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: var(--form_header_bg);

    padding: var(--base_pad_xs);

    border-bottom: 1px solid var(--base_border_light);

    border-radius: var(--base_radius_lg) var(--base_radius_lg) 0 0;

    height: 40px;

}



.form_header h2 {

    margin: 0;

    font-size: var(--text_lg);

    color: var(--form_header_title);

    font-weight: 600;

}



.form_min_btn, .form_close_btn {

    background: transparent;

    width: 25px;

    height: 25px;

    border: 1px solid var(--base_border_dark);

    font-size: var(--text_lg);

    cursor: pointer;

    color: var(--base_text_muted);

    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    margin: 2px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: var(--base_radius_sm);

    touch-action: manipulation;

}



.form_min_btn:hover, .form_close_btn:hover {

    color: var(--form_text);

    background-color: rgba(var(--base_primary_rgb), 0.1);

}



.form_floating_tab {

    position: fixed;

    top: 10px;

    left: 50%;

    transform: translateX(-50%);

    display: none;

    align-items: center;

    gap: 2px;

    font-size: var(--text_sm);

    padding: 4px 6px;

    border: solid 1px var(--base_border_dark);

    z-index: 1006;

    background-color: var(--form_bg);

    color: var(--form_text);

    border-radius: var(--base_radius_sm);

    box-shadow: var(--base_shadow_md);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    cursor: grab;

    height: 32px;

}

.form_floating_tab .floating-tab-drag {

    font-size: 18px;

    opacity: 0.5;

    pointer-events: none;

    user-select: none;

}



.form_body_small, .form_body {

    display: flex;

    flex-direction: column;

    position: relative;

    overflow-x: auto;

    border-radius: 0 0 var(--base_radius_lg) var(--base_radius_lg);

    background-color: var(--form_body_bg);

    padding: var(--base_pad_xs);

    color: var(--base_text_on_dark);

}



.form_body_small {

    max-height: 360px;

}



.form_body {

    max-height: calc(100vh - 195px);    

}



.form_body label, .form_body_small label {

    margin-top: 2px;

    margin-bottom: 2px;

    color: var(--form_label);

    font-weight: 600;

    font-size: var(--text_sm);

}



.form_body input, .form_body_small input {

    padding: var(--base_pad_xs);

    border: 1px solid var(--base_border_light);

    border-radius: var(--base_radius_sm);

    background-color: var(--form_control_bg);

    color: var(--form_control_text);

    height: var(--input_height_md);

    font-size: var(--text_base);

    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.form_body input:focus, .form_body_small input:focus {

    border-color: var(--base_primary);

    box-shadow: 0 0 0 3px rgba(var(--base_primary_rgb), 0.1);

}



.form_body button[type="submit"], .form_body_small button[type="submit"] {

    margin-top: 3px;

    padding: var(--base_pad_xs);

    background-color: var(--form_button_bg);

    color: var(--form_button_text);

    border: none;

    border-radius: var(--base_radius_sm);

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    height: var(--input_height_md);

    font-size: var(--text_base);

    touch-action: manipulation;

}



.form_body button[type="submit"]:hover, .form_body_small button[type="submit"]:hover {

    background-color: var(--form_button_hover);

}



.form_body input[type="checkbox"], .form_body_small input[type="checkbox"] {

    border: 1px solid var(--base_border_light);

    vertical-align: middle;

}



.form_body input[type="checkbox"]:focus, .form_body_small input[type="checkbox"]:focus {

    border-color: var(--base_primary);

    box-shadow: 0 0 0 3px rgba(var(--base_primary_rgb), 0.1);

}



.form_body textarea, .form_body select,

.form_body_small textarea, .form_body_small select {

    padding: var(--base_pad_xs);

    border: 1px solid var(--base_border_light);

    border-radius: var(--base_radius_md);

    font-size: var(--text_base);

    resize: vertical;

    background-color: var(--form_control_bg);

    color: var(--form_control_text);

    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.form_body textarea:focus, .form_body select:focus,

.form_body_small textarea:focus, .form_body_small select:focus {

    border-color: var(--base_primary);

    box-shadow: 0 0 0 3px rgba(var(--base_primary_rgb), 0.1);

}



.form_body textarea, .form_body_small textarea {

    min-height: 100px;

    line-height: 1.6;

}



.form_group {

    margin-bottom: var(--base_gap_xs);

}



.space_filler {

    flex: 1;

}



/* === MODERN ENHANCEMENTS === */



/* Backdrop blur support */

.backdrop_blur {

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



/* CSS Grid modern syntax */

.grid_modern {

    display: grid;

    gap: var(--base_gap_md);

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

}



/* Modern aspect ratio support */

.aspect_square {

    aspect-ratio: 1 / 1;

}



.aspect_video {

    aspect-ratio: 16 / 9;

}



/* Container queries support (progressive enhancement) */

@supports (container-type: inline-size) {

    .container_responsive {

        container-type: inline-size;

    }

}



/* === TOGGLE SWITCHES === */

.switch {

    position: relative;

    display: inline-block;

    width: 60px;

    height: 34px;

    z-index: 5;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: var(--base_border_light);

    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 34px;

}



.slider:before {

    position: absolute;

    content: "";

    height: 26px;

    width: 26px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border-radius: 50%;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



input:checked + .slider {

    background-color: var(--base_primary);

}



input:focus + .slider {

    box-shadow: 0 0 1px var(--base_primary);

}



input:checked + .slider:before {

    transform: translateX(26px);

}



/* === TYPOGRAPHY === */

h1, h2, h3, h4, h5, h6 {

    margin-bottom: 0.5em;

    font-weight: 600;

    line-height: 1.2;

    color: inherit;

}



h1 { font-size: var(--text_3xl); }

h2 { font-size: var(--text_2xl); }

h3 { font-size: var(--text_xl); }

h4 { font-size: var(--text_lg); }

h5 { font-size: var(--text_base); }

h6 { font-size: var(--text_sm); }



/* === IMAGES === */

img {

    max-width: 100%;

    height: auto;

}



.img_thumbnail {

    padding: 0.25rem;

    background-color: var(--base_light);

    border: 1px solid var(--base_border_light);

    border-radius: var(--base_radius_sm);

}



.img_circle {

    border-radius: 50%;

}



/* === NOTIFICATIONS === */

.notification {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: var(--base_pad_md);

    border-radius: var(--base_radius_md);

    text-align: center;

    z-index: 4200;

    display: none;

    min-width: 300px;

    max-width: min(80vw, 500px);

    font-size: var(--text_lg);

    box-shadow: var(--base_shadow_lg);

    background: linear-gradient(135deg, var(--base_info), rgba(var(--base_secondary_rgb), 0.9));

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    will-change: transform, opacity;

}



.notification p {

    margin: 0;

    text-align: center;

    display: block;

    font-weight: 500;

}



.notification.success {

    background-color: var(--base_success);

    color: var(--base_text_on_dark);

}



.notification.error {

    background-color: var(--base_danger);

    color: var(--base_text_on_dark);

}



.notification.info {

    background-color: var(--base_info);

    color: var(--base_text_on_dark);

}



.notification.warning {

    background-color: var(--base_warning);

    color: var(--base_text_on_light);

}



.notification.show {

    display: block;

    opacity: 1;

}



.warning_obj_text {

    background-color: var(--base_danger);

    color: var(--base_text_on_dark);    

}



/* === UTILITIES === */



/* Text alignment */

.text_center { text-align: center; }

.text_right { text-align: right; }

.text_left { text-align: left; }



/* Margins - Mobile optimized */

.mt_1 { margin-top: var(--base_gap_xs); }

.mt_2 { margin-top: var(--base_gap_sm); }

.mt_3 { margin-top: var(--base_gap_md); }

.mt_4 { margin-top: var(--base_gap_lg); }

.mt_5 { margin-top: var(--base_gap_xl); }



.mb_1 { margin-bottom: var(--base_gap_xs); }

.mb_2 { margin-bottom: var(--base_gap_sm); }

.mb_3 { margin-bottom: var(--base_gap_md); }

.mb_4 { margin-bottom: var(--base_gap_lg); }

.mb_5 { margin-bottom: var(--base_gap_xl); }



/* Padding */

.p_xs { padding: var(--base_pad_xs); }

.p_sm { padding: var(--base_pad_sm); }

.p_md { padding: var(--base_pad_md); }

.p_lg { padding: var(--base_pad_lg); }



/* Flex utilities */

.d_flex { display: flex; }

.flex_wrap { flex-wrap: wrap; }
.flex_column { flex-direction: column; }
.flex_row { flex-direction: row; }

.justify_content_center { justify-content: center; }

.justify_content_between { justify-content: space-between; }

.align_items_center { align-items: center; }



/* Width utilities */

.w_100 { width: 100%; }

.w_75 { width: 75%; }

.w_50 { width: 50%; }

.w_25 { width: 25%; }



/* Z-index utilities */

.z_0 { z-index: 0; }

.z_1 { z-index: 1; }

.z_10 { z-index: 10; }

.z_50 { z-index: 50; }

.z_100 { z-index: 100; }

.z_500 { z-index: 500; }

.z_1000 { z-index: 1000; }



/* Boarder utilities */

.bdr_xs {border: 1px;}

.bdr_sm {border: 2px;}

.bdr_md {border: 3px;}

.bdr_lg {border: 4px;}

.bdr_xl {border: 5px;}

.bdr_s { border-style: solid;}

.bdr_dot { border-style: dotted;}

.bdr_dash { border-style: dashed;}

.bdr_dbl { border-style: double;}

.bdr_grv { border-style: groove;}

.bdr_rdg { border-style: ridge;}

.bdr_in { border-style: inset;}

.bdr_out { border-style: outset;}

.bdr_rds { border-radius: var(--base_radius_sm) var(--base_radius_sm) var(--base_radius_sm) var(--base_radius_sm);}

.bdr_rds_2_l { border-radius: var(--base_radius_sm) 0 0 var(--base_radius_sm);}

.bdr_rds_2_r { border-radius: 0 var(--base_radius_sm) var(--base_radius_sm) 0;}

.bdr_rds_2_t { border-radius: var(--base_radius_sm) var(--base_radius_sm) 0 0;}

.bdr_rds_2_b { border-radius: 0 0 var(--base_radius_sm) var(--base_radius_sm);}



/* Performance utilities */

.will_change_transform { will-change: transform; }

.will_change_opacity { will-change: opacity; }



/* === DARK MODE SUPPORT === */

@media (prefers-color-scheme: dark) {

    .img_thumbnail {

        background-color: var(--base_dark);

        border-color: var(--base_border_dark);

    }

    

    input, select, textarea {

        background-color: var(--form_control_bg);

        color: var(--form_control_text);

        border-color: var(--base_border_dark);

    }

}
/* ── Gap utilities ───────────────────────────────────────────────────────── */
.gap_xs { gap: var(--base_gap_xs); }
.gap_sm { gap: var(--base_gap_sm); }
.gap_md { gap: var(--base_gap_md); }
.gap_lg { gap: var(--base_gap_lg); }

/* ── Flex extras ─────────────────────────────────────────────────────────── */
.flex_shrink_0       { flex-shrink: 0; }
.flex_1              { flex: 1; }
.justify_content_end { justify-content: flex-end; }

/* ── Display ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Text helpers ────────────────────────────────────────────────────────── */
.text_muted { color: #888; }
.text_hint  { color: #aaa; }
.font_mono  { font-family: monospace; }
.font_bold  { font-weight: 600; }

/* ── Resize ──────────────────────────────────────────────────────────────── */
.resize_v { resize: vertical; }

/* ── Icon helpers ────────────────────────────────────────────────────────── */
.icon_label    { vertical-align: middle; font-size: 1rem; }
.icon_sm       { font-size: 1rem; vertical-align: middle; }
.icon_success  { color: #2e7d32; }
.icon_readonly { color: #ccc; }

/* ── Empty state icon ────────────────────────────────────────────────────── */
.empty_state_icon { font-size: 48px; color: #ccc; }

/* ── Additional text/cursor utilities ───────────────────────────────────── */
.text_dark     { color: #333; }
.text_help     { color: #666; font-size: 0.8rem; }
.cursor_pointer { cursor: pointer; }
.ml_1          { margin-left: var(--base_gap_xs); }
.mb_0          { margin-bottom: 0; }
.w_48          { width: 48%; }
.align_items_end { align-items: flex-end; }

/* === Spacing Utilities: Horizontal margin === */
.mx_1 { margin: 0 5px; }
.mx_2 { margin: 0 8px; }

/* === Spacing Utilities: Zero margin/padding === */
.mt_0 { margin-top: 0; }
.mb_0_i { margin-bottom: 0 !important; }

/* === Text Utilities === */
.nowrap { white-space: nowrap; }

/* === Icon Size Utilities (Material Symbols) === */
.icon_xl { font-size: 48px; }