:root {
    /* Light theme (default) - based on Flutter light theme */
    --primary: #227DD5;
    --on-primary: #FFFFFF;
    --secondary: #ECF1F5;
    --on-secondary: #DAE8F5;
    --surface: #FFFFFF;
    --on-surface: #000000;
    --error: #FF5252;
    --on-error: #FFFFFF;
    --tertiary: #919191;
    --background: #F3F4F6;
    --border-color: #E5E7EB;

    /* Tailwind equivalents for easier theme switching */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --topbar-height: 3.5rem;
    --panel-width: 0px;
    /* Default closed state */

    /* Sidebar width variables - prevent horizontal overflow */
    --sidebar-width: 16rem;
    /* 256px - expanded state */
    --sidebar-collapsed-width: 4rem;
    /* 64px - collapsed state */

    /* h-14 */

}

/* Page editor styles */
.page-editor .row-container {
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

.page-editor .row-container.dragging {
    opacity: 0.6;
    border: 2px dashed var(--primary) !important;
}

.page-editor .row-container.drop-target {
    border: 2px dashed var(--primary) !important;
    background-color: rgba(34, 125, 213, 0.05);
}

.page-editor .row-container.drop-success {
    animation: drop-success-animation 0.5s ease-in-out;
}

@keyframes drop-success-animation {
    0% {
        background-color: rgba(34, 125, 213, 0.05);
        border-color: var(--primary);
    }

    50% {
        background-color: rgba(34, 125, 213, 0.2);
        border-color: var(--primary);
    }

    100% {
        background-color: transparent;
        border-color: var(--border-color);
    }
}

.page-editor .drag-handle {
    cursor: move;
    padding: 0 8px;
    color: var(--gray-500);
    display: inline-block;
    margin-right: 8px;
    font-size: 18px;
    user-select: none;
}

.page-editor .drag-handle:hover {
    color: var(--primary);
}

.page-editor .column-content {
    position: relative;
    transition: width 0.1s ease-out;
    display: inline-block;
    margin-right: 4px;
    user-select: none;
    /* Prevent text selection during resize */
    -webkit-user-drag: none;
    /* Prevent dragging in Safari */
    -moz-user-select: none;
    -ms-user-select: none;
}

.page-editor .resize-handle {
    width: 10px;
    /* Slightly wider for easier interaction */
    background-color: var(--gray-300);
    /* Darker by default for better visibility */
    cursor: col-resize;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5px;
    z-index: 30;
    /* Higher z-index to ensure it's on top */
    transition: background-color 0.2s;
    touch-action: none;
    height: 100%;
    display: block;
}

.page-editor .resize-handle:hover,
.page-editor .resize-handle.active {
    background-color: var(--primary);
}

.page-editor .column-content.save-pending {
    transition: background-color 0.3s;
    background-color: rgba(34, 125, 213, 0.05);
    /* Light blue flash */
}

.page-editor .column-content.save-success {
    transition: background-color 0.5s;
    background-color: rgba(34, 197, 94, 0.1);
    /* Light green flash */
}


body {
    padding-top: var(--topbar-height);
}


/* HTML Rendering Box Styles */
.html-rendering-box {
    border: 1px solid #ccc;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.html-rendering-box h1,
.html-rendering-box h2,
.html-rendering-box h3,
.html-rendering-box h4,
.html-rendering-box h5,
.html-rendering-box h6 {
    margin-top: 0;
}

.html-rendering-box p {
    margin-bottom: 1em;
}

html.dark {
    /* Dark theme - based on Flutter dark theme */
    --primary: #227DD5;
    --on-primary: #FFFFFF;
    --secondary: #26292C;
    --on-secondary: #32404D;
    --surface: #1F2937;
    /* gray-800 */
    --on-surface: #FFFFFF;
    --error: #FF5252;
    --on-error: #000000;
    --tertiary: #808080;
    --background: #111827;
    /* gray-900 */
    --border-color: #374151;
    /* gray-700 */

    /* Tailwind equivalents for easier theme switching */
    --gray-50: #374151;
    /* Inverted from light theme */
    --gray-100: #1F2937;
    --gray-200: #374151;
    --gray-300: #4B5563;
    --gray-400: #6B7280;
    --gray-500: #9CA3AF;
    --gray-600: #D1D5DB;
    --gray-700: #E5E7EB;
    --gray-800: #F3F4F6;
    --gray-900: #F9FAFB;
}

.icons8 {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.timill-icon {
    display: inline-block;
    font-size: 28px;
    aspect-ratio: 1;
    vertical-align: middle;
}


.sidebar-text {
    transition: opacity 0.3s ease;
}

/* Make sure icons stay centered when sidebar is collapsed */
/*.icons8,*/
.group-name-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/*.icons8-home {
    background-image: url('https://img.icons8.com/dusk/64/home.png');
}

.icons8-activity {
    background-image: url('https://img.icons8.com/?size=100&id=42777&format=png&color=000000');
}

.icons8-goals {
    background-image: url('https://img.icons8.com/?size=100&id=49297&format=png&color=000000');
}

.icons8-tasks {
    background-image: url('https://img.icons8.com/?size=100&id=50w7m2YsTNaR&format=png&color=000000');
}

.icons8-planner {
    background-image: url('https://img.icons8.com/?size=100&id=ydAyr6J5GIdS&format=png&color=000000');
}

.icons8-calendar {
    background-image: url('https://img.icons8.com/dusk/64/calendar--v1.png');
}

.icons8-search {
    background-image: url('https://img.icons8.com/dusk/64/search.png');
    width: 20px;
    height: 20px;
}

.icons8-help {
    background-image: url('https://img.icons8.com/?size=100&id=42813&format=png&color=000000');
}

.icons8-settings {
    background-image: url('https://img.icons8.com/?size=100&id=115336&format=png&color=000000');
}*/

th {
    color: #6b7280;
    font-weight: normal;
    text-align: left;
    padding: 8px 16px;
}

td {
    padding: 8px 16px;
}

.sort-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.sort-button:hover {
    color: black;
}

.sort-button.asc::after {
    content: '↑';
    margin-left: 4px;
}

.sort-button.desc::after {
    content: '↓';
    margin-left: 4px;
}

.sort-button.default::after {
    content: '↕';
    margin-left: 4px;
    opacity: 0.5;
}

.flex {
    display: flex;
}

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

.items-center {
    align-items: center;
}

.warning-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    color: #f87171;
}

.warning-icon svg {
    width: 100%;
    height: 100%;
}

.avanto-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: #0ea5e9;
    border-radius: 4px;
    position: relative;
}

/*.avanto-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"/></svg>');
    background-size: contain;
}*/

.group-name-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #0ea5e9;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    margin-right: 0;
}

/* Theme toggle button styles */
#theme-toggle-icon-light {
    display: none;
}

#theme-toggle-text-light {
    display: none;
}

html.dark #theme-toggle-icon-dark {
    display: none;
}

html.dark #theme-toggle-icon-light {
    display: block;
}

html.dark #theme-toggle-text-dark {
    display: none;
}

html.dark #theme-toggle-text-light {
    display: block;
}


.htmx-swapping {
    opacity: 1 !important;
    transition: opacity 300ms ease-out !important;
}

.htmx-settling {
    opacity: 0 !important;
    transition: opacity 300ms ease-in !important;
}

.htmx-settled {
    opacity: 1 !important;
}

/* Legacy side panel container styles (kept for backward compatibility) */
#side-panel-container {
    transition: width 0.15s ease-in-out;
    width: var(--panel-width);
    flex-shrink: 0;
    min-width: 0;
    background-color: var(--surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
}

/* New overlay side panel styles */
#side-panel {
    /* Overlay positioning */
    position: fixed;
    top: var(--topbar-height);
    /* Below the top bar */
    right: 0;
    bottom: 0;
    z-index: 40;
    /* Above main content, below modals (which are typically z-50+) */

    /* Visual styling */
    background-color: var(--surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);

    /* Smooth transitions */
    transition: transform 0.3s ease-in-out, width 0.15s ease-in-out;

    /* Ensure proper scrolling */
    overflow: hidden;
}

/* Dark mode shadow adjustment */
html.dark #side-panel {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

/* Ensure main content uses margin instead of width changes */
#main-content {
    width: 100% !important;
    /* Allow margin transitions but prevent width transitions */
    transition: margin-right 0.3s ease-in-out !important;
    /* Start with no margin on page load */
    margin-right: 0px;
}

/* Ensure widgets always render at full width initially */
.widget-container,
.kanban-widget,
.flex.w-full {
    /* Force full width rendering regardless of container state */
    width: 100% !important;
    max-width: none !important;
}

/* Prevent widgets from inheriting constrained widths */
#main-content>* {
    /* Ensure direct children of main content use full available width */
    width: 100% !important;
}

/* Legacy separator styles (may not be needed with overlay approach) */
#separator {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease-in-out, background-color 0.2s ease, width 0.2s ease;
    cursor: col-resize !important;
    height: 100%;
    width: 8px;
    background-color: var(--border-color);
    z-index: 100;
    position: relative;
}

#separator:hover {
    background-color: var(--primary);
    width: 12px;
}

#separator:active {
    background-color: var(--primary);
    width: 12px;
}

/* When panel is open, show the separator */
#side-panel-container:not([style*="width: 0px"])~#separator,
#side-panel-container:not([style*="width:0px"])~#separator,
#separator:has(+ #side-panel-container:not([style*="width: 0px"])),
#separator:has(+ #side-panel-container:not([style*="width:0px"])) {
    opacity: 1;
}

/* Side panel content styling */
#side-panel-content {
    height: 100%;
    position: relative;
    overflow-y: auto;
    /* Allow vertical scrolling within panel */
}

/* Apply theme colors to common Tailwind classes */
body {
    background-color: var(--background);
    color: var(--on-surface);
}

.bg-white {
    background-color: var(--surface);
}

.dark .bg-white {
    background-color: var(--surface);
}

.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
    color: var(--on-surface);
}

.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900 {
    color: var(--on-surface);
}

.border,
.border-gray-200,
.border-gray-300 {
    border-color: var(--border-color);
}

.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color);
}

/* Disable transitions for the side panel during resize */
.no-transition {
    transition: none !important;
}

/* Ensure the side panel close button is visible in both light and dark modes */
#side-panel-container .absolute.top-2.right-4,
#side-panel .absolute.top-2.right-4 {
    z-index: 50;
}

/* Ensure the side panel has proper scrolling */
#side-panel-container {
    overflow: hidden;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    #side-panel {
        /* On mobile, take full width minus small margin */
        width: calc(100vw - 2rem) !important;
        max-width: none !important;
    }
}

@media (max-width: 480px) {
    #side-panel {
        /* On very small screens, take almost full width */
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
    }
}

/* Prevent body scroll when side panel is open on mobile */
@media (max-width: 768px) {
    body:has(#side-panel[x-show="panelOpen"]) {
        overflow: hidden;
    }
}

/* Modal scroll lock - prevent background scrolling when modals are open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Alpine.js x-cloak directive - hide elements until Alpine.js is loaded */
[x-cloak] {
    display: none !important;
}

/* HTML content dark mode styles */
html.dark .html-content,
html.dark .prose,
html.dark .prose-sm,
html.dark .prose-invert {
    color: #FFFFFF !important;
}

/* Target all elements inside the HTML content in dark mode */
html.dark .html-content *,
html.dark .prose *,
html.dark .prose-sm *,
html.dark .prose-invert * {
    color: #FFFFFF !important;
}

/* Ensure links have appropriate styling in dark mode */
html.dark .html-content a,
html.dark .prose a,
html.dark .prose-sm a,
html.dark .prose-invert a {
    color: #3B82F6 !important;
    /* blue-500 */
    text-decoration: underline;
}

/* Ensure code blocks have appropriate styling in dark mode */
html.dark .html-content pre,
html.dark .prose pre,
html.dark .prose-sm pre,
html.dark .prose-invert pre,
html.dark .html-content code,
html.dark .prose code,
html.dark .prose-sm code,
html.dark .prose-invert code {
    background-color: #111827 !important;
    /* dark-gray-900 */
    color: #E5E7EB !important;
    /* dark-gray-200 */
}

/* ========================================
   MAIN CONTENT WRAPPER - PREVENT HORIZONTAL OVERFLOW
   ======================================== */

/* Dynamic main content wrapper - prevents horizontal overflow */
#main-content-wrapper {
    margin-left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* When sidebar is collapsed, adjust main content wrapper */
#sidebar.collapsed~#main-content-wrapper,
#admin-sidebar.collapsed~#main-content-wrapper,
body:has(#sidebar.collapsed) #main-content-wrapper,
body:has(#admin-sidebar.collapsed) #main-content-wrapper {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100vw - var(--sidebar-collapsed-width));
    max-width: calc(100vw - var(--sidebar-collapsed-width));
}

/* Ensure main content within wrapper uses full available width */
#main-content-wrapper #main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Override any Tailwind classes that might cause overflow */
.ml-64 {
    margin-left: var(--sidebar-width) !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    #main-content-wrapper {
        width: calc(100vw - var(--sidebar-collapsed-width));
        max-width: calc(100vw - var(--sidebar-collapsed-width));
        margin-left: var(--sidebar-collapsed-width);
    }
}

@media (max-width: 768px) {
    #main-content-wrapper {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
    }
}

/* ========================================
   ADAPTIVE ARTICLE LAYOUT - HEIGHT-BASED FLEX
   ======================================== */

/* Base h-flex class for adaptive articles */
.h-flex {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Short content: Article fills viewport, footer sticks to bottom */
.content-short {
    height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.content-short .article-content {
    flex: 1;
    overflow-y: auto;
}

.content-short .article-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Long content: Normal scroll behavior */
.content-long {
    height: auto;
    min-height: calc(100vh - 3.5rem);
}

.content-long .article-content {
    flex: 1;
}

.content-long .article-footer {
    flex-shrink: 0;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .content-short {
        height: calc(100vh - 3.5rem - env(safe-area-inset-bottom));
    }

    .content-long {
        min-height: calc(100vh - 3.5rem - env(safe-area-inset-bottom));
    }
}

/* Ensure proper scrolling within article content */
.article-content {
    position: relative;
}

/* Smooth transitions for layout changes */
.h-flex {
    transition: height 0.2s ease-in-out;
}