/**
 * Theme Settings & Customization
 * Includes: Theme Colors, Page Width, Font Size, Sidebar, Card Panel, etc.
 */

/* =========================================
   1. Theme Colors
   ========================================= */

/* Red Theme */
body[data-theme-color="red"] {
    --color-blue-50: var(--color-red-50);
    --color-blue-100: var(--color-red-100);
    --color-blue-200: var(--color-red-200);
    --color-blue-300: var(--color-red-300);
    --color-blue-400: var(--color-red-400);
    --color-blue-500: var(--color-red-500);
    --color-blue-600: var(--color-red-600);
    --color-blue-700: var(--color-red-700);
    --color-blue-800: var(--color-red-800);
    --color-blue-900: var(--color-red-900);
}

/* Green Theme */
body[data-theme-color="green"] {
    --color-blue-50: var(--color-green-50);
    --color-blue-100: var(--color-green-100);
    --color-blue-200: var(--color-green-100);
    --color-blue-300: var(--color-green-300);
    --color-blue-400: var(--color-green-400);
    --color-blue-500: var(--color-green-500);
    --color-blue-600: var(--color-green-600);
    --color-blue-700: var(--color-green-700);
    --color-blue-800: var(--color-green-800);
    --color-blue-900: var(--color-green-900);
}

/* Purple Theme */
body[data-theme-color="purple"] {
    --color-blue-50: var(--color-purple-50);
    --color-blue-100: var(--color-purple-100);
    --color-blue-200: var(--color-purple-200);
    --color-blue-300: var(--color-purple-200);
    --color-blue-400: var(--color-purple-400);
    --color-blue-500: var(--color-purple-500);
    --color-blue-600: var(--color-purple-600);
    --color-blue-700: var(--color-purple-600);
    --color-blue-800: var(--color-purple-800);
    --color-blue-900: var(--color-purple-900);
}

/* Orange Theme (Using Yellow/Orange mix) */
body[data-theme-color="orange"] {
    --color-blue-50: var(--color-yellow-50);
    --color-blue-100: var(--color-yellow-100);
    --color-blue-200: var(--color-yellow-200);
    --color-blue-300: var(--color-yellow-300);
    --color-blue-400: var(--color-yellow-400);
    --color-blue-500: var(--color-yellow-500);
    --color-blue-600: var(--color-yellow-600);
    --color-blue-700: var(--color-yellow-600);
    --color-blue-800: var(--color-yellow-800);
    --color-blue-900: var(--color-yellow-900);
}

/* Yellow Theme */
body[data-theme-color="yellow"] {
    --color-blue-50: var(--color-yellow-50);
    --color-blue-100: var(--color-yellow-100);
    --color-blue-200: var(--color-yellow-200);
    --color-blue-300: var(--color-yellow-300);
    --color-blue-400: var(--color-yellow-400);
    --color-blue-500: var(--color-yellow-400);
    --color-blue-600: var(--color-yellow-500);
    --color-blue-700: var(--color-yellow-600);
    --color-blue-800: var(--color-yellow-800);
    --color-blue-900: var(--color-yellow-900);
}

/* Black Theme (Gray) */
body[data-theme-color="black"] {
    --color-blue-50: var(--color-gray-50);
    --color-blue-100: var(--color-gray-100);
    --color-blue-200: var(--color-gray-200);
    --color-blue-300: var(--color-gray-300);
    --color-blue-400: var(--color-gray-400);
    --color-blue-500: var(--color-gray-500);
    --color-blue-600: var(--color-gray-600);
    --color-blue-700: var(--color-gray-700);
    --color-blue-800: var(--color-gray-800);
    --color-blue-900: var(--color-gray-900);
}

/* =========================================
   2. Page Width
   ========================================= */

/* Default */
body.width-default #content { 
    max-width: 100%; 
}

/* XL - Extra Large */
body.width-xl #content { 
    max-width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
}

/* LG - Large */
body.width-lg #content { 
    max-width: 1680px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* MD - Medium */
body.width-md #content { 
    max-width: 1440px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* SM - Small */
body.width-sm #content { 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* Mini - Miniature */
body.width-mini #content { 
    max-width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* =========================================
   3. Font Size
   ========================================= */

html { transition: font-size 0.2s ease; }

/* SM - Small */
body.font-sm {
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    font-size: var(--text-base);
}

/* MD - Medium (Default) */
body.font-md {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    font-size: var(--text-base);
}

/* LG - Large */
body.font-lg {
    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 17px;
    --text-lg: 19px;
    --text-xl: 22px;
    --text-2xl: 26px;
    font-size: var(--text-base);
}

/* XL - Extra Large */
body.font-xl {
    --text-xs: 14px;
    --text-sm: 16px;
    --text-base: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 28px;
    font-size: var(--text-base);
}

/* XXL - Double Extra Large */
body.font-xxl {
    --text-xs: 15px;
    --text-sm: 17px;
    --text-base: 19px;
    --text-lg: 22px;
    --text-xl: 26px;
    --text-2xl: 30px;
    font-size: var(--text-base);
}

/* =========================================
   4. Sidebar Visibility
   ========================================= */

body.sidebar-hidden #hs-pro-sidebar {
    display: none !important;
}

body.sidebar-hidden main {
    padding-inline-start: 0 !important;
}

body.sidebar-hidden #header .sidebar-logo {
    display: none;
}

/* =========================================
   5. Card Panel Mode
   ========================================= */

/* If not shown, remove card styling */
body:not(.card-panel-show) .card-sites .card {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* If shown (optional override/enforcement) */
body.card-panel-show .card-sites .card {
    /* Rely on default theme styles or enforce here */
}

/* =========================================
   6. URL Icon Visibility
   ========================================= */

body.url-icon-hidden .card-sites .rounded-full,
body.url-icon-hidden .card-sites .rounded-xl, 
body.url-icon-hidden .card-sites .rounded-lg { 
    display: none !important; 
}

/* =========================================
   7. URL Description Visibility
   ========================================= */

body.url-description-hidden .card-sites p {
    display: none !important;
}