/**
 * AI Dashboard Enhancements - Stylesheet
 * Version: 2.0.0
 *
 * Matches the look & feel of dashboardesk.com:
 *   - Inter font family (17px base, 1.7 line-height)
 *   - Java orange accent (#E76F00)
 *   - Day mode: white background, dark text
 *   - Night mode: GitHub-dark inspired (#0D1117 bg, #E6EDF3 text)
 *   - Toggle button: 38px circle, rotates -12deg on hover
 *   - Headings: same color as body text, 700 weight, h2 has bottom border
 */

/* =============================================
   ROOT VARIABLES — DAY THEME (default)
   Mirrors dashboardesk.com :root
   ============================================= */
:root {
    /* Brand palette (Java orange) */
    --aie-brand:        #E76F00;
    --aie-brand-dark:   #B8530A;
    --aie-brand-soft:   #FFE7D5;

    /* Day theme colors */
    --aie-bg:           #FFFFFF;
    --aie-bg-soft:      #F7F8FA;
    --aie-bg-elevated:  #FFFFFF;
    --aie-bg-code:      #F4F4F6;
    --aie-bg-code-header: #ECECEF;
    --aie-text:         #1F2328;
    --aie-text-muted:   #57606A;
    --aie-text-soft:    #6E7781;
    --aie-border:       #E1E4E8;
    --aie-border-soft:  #ECEEF1;
    --aie-link:         #B8530A;
    --aie-link-hover:   #7A3706;
    --aie-accent:       #1E6BB8;
    --aie-success:      #1A7F37;
    --aie-warning:      #BF8700;
    --aie-danger:       #CF222E;
    --aie-shadow:       0 1px 3px rgba(31,35,40,.08), 0 4px 12px rgba(31,35,40,.04);
    --aie-shadow-lg:    0 8px 24px rgba(31,35,40,.12);

    /* Typography */
    --aie-fs-base:      17px;
    --aie-fs-sm:        14px;
    --aie-fs-xs:        12.5px;
    --aie-fs-h1:        2.05rem;
    --aie-fs-h2:        1.55rem;
    --aie-fs-h3:        1.22rem;
    --aie-fs-h4:        1.02rem;

    /* Layout */
    --aie-container:    1180px;
    --aie-radius:       8px;
    --aie-radius-sm:    5px;
    --aie-header-h:     64px;

    /* Toggle button */
    --aie-toggle-bg:    var(--aie-bg-soft);
    --aie-toggle-fg:    var(--aie-text);
    --aie-toggle-border: var(--aie-border);
}

/* =============================================
   NIGHT THEME
   Matches restaurantsoriya.ca — warm coffee & cream palette
   Dark coffee background with cream text and gold accents
   ============================================= */
html[data-theme="night"],
.aie-night {
    /* Brand palette (kept consistent with day) */
    --aie-brand:        #c1913c;        /* Soriya gold accent */
    --aie-brand-dark:   #9e2b25;        /* Soriya brand red */
    --aie-brand-soft:   #3a2e1f;        /* Dark warm surface for tags */

    /* Warm coffee/cream night palette (from restaurantsoriya.ca) */
    --aie-bg:           #201811;        /* Dark coffee brown background */
    --aie-bg-soft:      #2d231a;        /* Slightly lighter dark brown for cards */
    --aie-bg-elevated:  #2d231a;        /* Header/footer background */
    --aie-bg-code:      #2d231a;        /* Code block background */
    --aie-bg-code-header: #3a2e1f;      /* Code header strip */
    --aie-text:         #d8cfc2;        /* Warm cream text */
    --aie-text-muted:   #c9bfae;        /* Muted cream */
    --aie-text-soft:    #b8a98f;        /* Softer warm gray */
    --aie-border:       #453728;        /* Dark warm brown border */
    --aie-border-soft:  #3a2e1f;        /* Subtle warm border */
    --aie-link:         #c1913c;        /* Gold links */
    --aie-link-hover:   #ecdfc3;        /* Bright cream on hover */
    --aie-accent:       #c1913c;        /* Gold accent */
    --aie-success:      #8fa86a;        /* Warm sage green */
    --aie-warning:      #c1913c;        /* Gold */
    --aie-danger:       #b85450;        /* Softened red */
    --aie-shadow:       0 1px 3px rgba(0,0,0,.4);
    --aie-shadow-lg:    0 8px 24px rgba(0,0,0,.5);

    --aie-toggle-bg:    var(--aie-bg-soft);
    --aie-toggle-fg:    var(--aie-text);
    --aie-toggle-border: var(--aie-border);
}

/* Support both [data-theme="night"] on <html> (dashboardesk.com style)
   AND .aie-night class as fallback */
.aie-night body,
html[data-theme="night"] body {
    background: var(--aie-bg) !important;
    color: var(--aie-text) !important;
}

/* =============================================
   GLOBAL TYPOGRAPHY (matches dashboardesk.com body)
   ============================================= */
body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
    font-size: var(--aie-fs-base) !important;
    line-height: 1.7 !important;
    color: var(--aie-text) !important;
    background: var(--aie-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .25s ease, color .25s ease;
}

/* Headings — same as dashboardesk.com */
h1, h2, h3, h4, h5, h6 {
    color: var(--aie-text) !important;
    line-height: 1.3 !important;
    margin: 1.6em 0 .6em !important;
    font-weight: 700 !important;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
    transition: color .25s ease;
}

h1 {
    font-size: var(--aie-fs-h1) !important;
    letter-spacing: -.02em !important;
}

/* H2 has bottom border — signature dashboardesk.com style */
h2 {
    font-size: var(--aie-fs-h2) !important;
    letter-spacing: -.01em !important;
    padding-bottom: .3em !important;
    border-bottom: 1px solid var(--aie-border) !important;
}

h3 { font-size: var(--aie-fs-h3) !important; }
h4 { font-size: var(--aie-fs-h4) !important; }

/* =============================================
   CONTENT AREA
   ============================================= */
.entry-content,
.entry-summary,
.wp-block-post-content,
.post-content,
.article-content {
    font-size: var(--aie-fs-base) !important;
    line-height: 1.7 !important;
    color: var(--aie-text) !important;
}

/* Constrain content width — matches dashboardesk container */
.entry-content > *,
.wp-block-post-content > * {
    max-width: 760px;
}

.entry-content p,
.wp-block-post-content p,
.post-content p {
    margin-top: 0;
    margin-bottom: 1.5em;
}

/* =============================================
   LINKS — Java orange (day) / peach (night)
   ============================================= */
a {
    color: var(--aie-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

a:hover,
a:focus {
    color: var(--aie-link-hover);
}

/* =============================================
   LISTS
   ============================================= */
.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
    margin: 0 0 1.5em 0;
    padding-left: 1.8em;
}

.entry-content li,
.wp-block-post-content li {
    margin-bottom: .6em;
    line-height: 1.7;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

/* =============================================
   BLOCKQUOTES
   ============================================= */
blockquote,
.wp-block-quote {
    border-left: 3px solid var(--aie-brand) !important;
    background: var(--aie-bg-soft) !important;
    padding: 1em 1.4em !important;
    margin: 1.5em 0 !important;
    color: var(--aie-text-muted) !important;
    border-radius: 0 6px 6px 0;
}

blockquote p,
.wp-block-quote p {
    margin-bottom: .5em;
}

/* In night mode (Soriya warm palette), use gold accent for blockquote border */
html[data-theme="night"] blockquote,
.aie-night blockquote,
html[data-theme="night"] .wp-block-quote,
.aie-night .wp-block-quote {
    border-left-color: #c1913c !important;  /* Soriya gold */
    background: #2d231a !important;          /* Soriya dark-2 */
}

/* =============================================
   CODE BLOCKS — JetBrains Mono + dashboardesk palette
   ============================================= */
code,
pre,
.wp-block-code {
    background: var(--aie-bg-code) !important;
    border-radius: var(--aie-radius-sm);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
    font-size: .92em;
}

pre,
.wp-block-code {
    padding: 1em !important;
    overflow-x: auto;
    border: 1px solid var(--aie-border) !important;
}

code {
    padding: .15em .4em;
}

/* Inline code in paragraphs */
.entry-content p code,
.entry-content li code,
.wp-block-post-content p code,
.wp-block-post-content li code {
    background: var(--aie-bg-code) !important;
    color: var(--aie-text) !important;
    padding: .15em .35em;
    border-radius: 4px;
    font-size: .9em;
}

/* =============================================
   SEPARATOR / HR
   ============================================= */
hr,
.wp-block-separator {
    border: none !important;
    border-top: 1px solid var(--aie-border) !important;
    margin: 2.5em 0 !important;
}

/* =============================================
   THEME TOGGLE BUTTON
   Exact replica of dashboardesk.com .theme-toggle
   ============================================= */
.aie-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--aie-toggle-border);
    background: var(--aie-toggle-bg);
    color: var(--aie-toggle-fg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--aie-shadow-lg);
    transition: background .15s ease, transform .15s ease, color .15s ease, border-color .25s ease;
    padding: 0;
}

.aie-toggle:hover {
    background: var(--aie-bg-code);
    transform: rotate(-12deg);
}

.aie-toggle:active {
    transform: scale(.95);
}

.aie-toggle:focus-visible {
    outline: 2px solid var(--aie-accent);
    outline-offset: 2px;
}

.aie-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease, transform .2s ease;
}

/* DAY mode: show moon (click to switch to night) */
.aie-toggle .aie-icon-moon { display: flex; }
.aie-toggle .aie-icon-sun  { display: none; }

/* NIGHT mode: show sun (click to switch to day) */
html[data-theme="night"] .aie-toggle .aie-icon-moon,
.aie-night .aie-toggle .aie-icon-moon { display: none; }
html[data-theme="night"] .aie-toggle .aie-icon-sun,
.aie-night .aie-toggle .aie-icon-sun { display: flex; }

/* =============================================
   SITE HEADER / FOOTER COLOR ADAPTATION
   ============================================= */
.site-header,
header.site-header,
header,
.header,
.site-footer,
footer {
    background-color: var(--aie-bg-elevated) !important;
    color: var(--aie-text) !important;
    border-color: var(--aie-border) !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Sidebar widgets */
.sidebar .widget,
.widget-area .widget {
    background-color: var(--aie-bg-soft) !important;
    color: var(--aie-text-muted) !important;
    border-color: var(--aie-border) !important;
}

/* Main content area background */
.site-main,
#primary,
#content {
    background-color: var(--aie-bg) !important;
    color: var(--aie-text) !important;
}

/* Cards / entries */
.entry,
article.post,
article.page {
    background-color: var(--aie-bg) !important;
    color: var(--aie-text) !important;
}

/* Entry title */
.entry-title,
.post-title,
.page-title {
    color: var(--aie-text) !important;
}

/* Entry meta (date, author) */
.entry-meta,
.entry-footer {
    color: var(--aie-text-muted) !important;
}

/* Buttons — dashboardesk.com style */
.btn-primary,
.wp-block-button__link,
button.button,
input[type="submit"],
input[type="button"] {
    background: var(--aie-brand) !important;
    color: #fff !important;
    border: 1px solid var(--aie-brand-dark) !important;
    border-radius: var(--aie-radius-sm) !important;
    font-weight: 600 !important;
    transition: background .15s ease;
}

.btn-primary:hover,
.wp-block-button__link:hover,
button.button:hover,
input[type="submit"]:hover {
    background: var(--aie-brand-dark) !important;
}

/* Pills / tags */
.tag,
.post-tags a,
.entry-tags a {
    display: inline-block;
    padding: 2px 10px;
    background: var(--aie-brand-soft);
    color: var(--aie-brand-dark);
    border-radius: 12px;
    font-size: var(--aie-fs-xs);
    font-weight: 600;
    text-decoration: none;
}

/* In night mode (Soriya palette), use gold tag colors */
html[data-theme="night"] .tag,
.aie-night .tag,
html[data-theme="night"] .post-tags a,
.aie-night .post-tags a,
html[data-theme="night"] .entry-tags a,
.aie-night .entry-tags a {
    background: #3a2e1f !important;   /* Soriya dark warm surface */
    color: #c1913c !important;         /* Soriya gold */
}

/* In night mode, primary button uses Soriya gold */
html[data-theme="night"] .btn-primary,
.aie-night .btn-primary,
html[data-theme="night"] .wp-block-button__link,
.aie-night .wp-block-button__link,
html[data-theme="night"] button.button,
.aie-night button.button,
html[data-theme="night"] input[type="submit"],
.aie-night input[type="submit"] {
    background: #c1913c !important;       /* Soriya gold */
    border-color: #9e2b25 !important;     /* Soriya brand red */
    color: #201811 !important;            /* Dark coffee text on gold */
}

html[data-theme="night"] .btn-primary:hover,
.aie-night .btn-primary:hover,
html[data-theme="night"] .wp-block-button__link:hover,
.aie-night .wp-block-button__link:hover,
html[data-theme="night"] button.button:hover,
.aie-night button.button:hover,
html[data-theme="night"] input[type="submit"]:hover,
.aie-night input[type="submit"]:hover {
    background: #ecdfc3 !important;       /* Bright cream on hover */
    color: #201811 !important;
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */
@media (max-width: 900px) {
    :root {
        --aie-fs-base: 16.5px;
        --aie-fs-h1: 1.85rem;
        --aie-fs-h2: 1.4rem;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16.5px !important;
    }

    .aie-toggle {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px !important;
    }

    .entry-content,
    .wp-block-post-content,
    .post-content {
        font-size: 16px !important;
    }

    .aie-toggle {
        width: 38px;
        height: 38px;
    }
}

/* =============================================
   ACCESSIBILITY: respect reduced motion preference
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================
   PRINT STYLES (always day for ink efficiency)
   ============================================= */
@media print {
    body,
    .site-header,
    .site-footer {
        background: #ffffff !important;
        color: #1F2328 !important;
    }

    .aie-toggle {
        display: none !important;
    }
}