/* Custom styles to complement Bulma CSS */

/* Ensure consistent font stack */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Ellipsis for long text in table cells */
td.vt-cell-clip {
    max-width: 16rem;

    p {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Navbar spacing fix for fixed navbar */
.has-navbar-fixed-top {
    padding-top: 3.25rem;
}

/* Custom animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Timer pulse animation */
.timer-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Mobile responsive helpers */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
    }

    /* Stack columns on mobile */
    .columns.is-mobile-stacked {
        flex-direction: column;
    }
}

/* Highlight animation for newly created/updated items */
@keyframes highlight-fade {
    0% {
        background-color: #ffe08a;
    }
    100% {
        background-color: transparent;
    }
}

.highlight-item {
    animation: highlight-fade 2s ease-out forwards;
}

/* Print styles */
@media print {
    .no-print,
    .navbar,
    .button {
        display: none !important;
    }

    body {
        color: black !important;
        background: white !important;
    }

    .box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* Loading state */
.is-loading-overlay {
    position: relative;
}

.is-loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stick footer to bottom on pages with small content and stick to end of long pages, using Flexbox option:
 https://developer.mozilla.org/de/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers#alternative_methode */
html,
body {
    height: 100%;
}

.wrapper {
    min-height: 100%;

    display: flex;
    flex-direction: column;
}

.footer {
    flex-grow: 0;
    flex-shrink: 0;
}

.page-body {
    flex-grow: 1;
}

/* Collapsible cards - first use is filter card in report page */
.vt-card-collapsed {
    box-shadow: none;
}

.collapsible-card .card-header-title {
    cursor: pointer;
}

/* dropdown menu for user settings in navbar */
.vt-user-dropdown {
    min-width: 15rem;
}

/* Navbar styling for better visual distinction */
.navbar {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}

.navbar-item.is-active {
    background-color: rgba(72, 95, 199, 0.1) !important;
    border-bottom: 3px solid #485fc7;
    font-weight: 600;
}

.navbar-item:hover:not(.is-active) {
    background-color: rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease;
}

/* Bulma overrides */
:root {
    /* Refine primary colors for light mode */
    --bulma-primary: #3e8ed0;
    --bulma-link: #485fc7;
}

/* Dark mode variables - applied when explicitly set or via system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background colors: Use deeper greys instead of pure black for better depth */
        --bulma-scheme-main: #1a1c23;
        --bulma-scheme-main-bis: #24262d;
        --bulma-scheme-main-ter: #2d2f39;

        /* Text colors: Slightly off-white for better readability */
        --bulma-text: #e2e8f0;
        --bulma-text-strong: #ffffff;

        /* Primary color adjustments for dark background */
        --bulma-primary: #4fc3f7;
        --bulma-primary-light: rgba(79, 195, 247, 0.1);
        --bulma-primary-dark: #0091ea;

        /* Border colors */
        --bulma-border: #3f4451;
        --bulma-border-hover: #4b5262;
    }
}

/* Explicit dark theme */
[data-theme="dark"] {
    /* Background colors: Use deeper greys instead of pure black for better depth */
    --bulma-scheme-main: #1a1c23;
    --bulma-scheme-main-bis: #24262d;
    --bulma-scheme-main-ter: #2d2f39;

    /* Text colors: Slightly off-white for better readability */
    --bulma-text: #e2e8f0;
    --bulma-text-strong: #ffffff;

    /* Primary color adjustments for dark background */
    --bulma-primary: #4fc3f7;
    --bulma-primary-light: rgba(79, 195, 247, 0.1);
    --bulma-primary-dark: #0091ea;

    /* Border colors */
    --bulma-border: #3f4451;
    --bulma-border-hover: #4b5262;
}

/* Dashboard summary cards - Light mode */
.dashboard-card-hours {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dashboard-card-hours .heading,
.dashboard-card-hours .title {
    color: #ffffff !important;
}

.dashboard-card-projects {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.dashboard-card-projects .heading,
.dashboard-card-projects .title {
    color: #ffffff !important;
}

.dashboard-card-activity {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    color: #0a0a0a !important;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.dashboard-card-activity .heading {
    color: rgba(0, 0, 0, 0.7) !important;
    font-weight: 600;
}

.dashboard-card-activity .title {
    color: #0a0a0a !important;
}

.dashboard-card-activity.is-running {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}

.dashboard-card-activity.is-idle {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%) !important;
}

/* Dark mode navbar */
[data-theme="dark"] .navbar,

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar {
        background-color: #24262d;
        border-bottom: 2px solid rgba(79, 195, 247, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    :root:not([data-theme="light"]) .navbar-item.is-active {
        background-color: rgba(79, 195, 247, 0.15) !important;
        border-bottom: 3px solid #4fc3f7;
    }

    :root:not([data-theme="light"]) .navbar-item:hover:not(.is-active) {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar {
        background-color: #24262d;
        border-bottom: 2px solid rgba(79, 195, 247, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    :root:not([data-theme="light"]) .navbar-item.is-active {
        background-color: rgba(79, 195, 247, 0.15) !important;
        border-bottom: 3px solid #4fc3f7;
    }

    :root:not([data-theme="light"]) .navbar-item:hover:not(.is-active) {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

/* Dashboard cards - Dark mode with better contrast */
[data-theme="dark"] .dashboard-card-hours,

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-hours {
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
    }
}

[data-theme="dark"] .dashboard-card-projects,

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-projects {
        background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
        box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
    }
}

[data-theme="dark"] .dashboard-card-activity,

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-activity {
        background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    }

    :root:not([data-theme="light"]) .dashboard-card-activity .heading {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity .title {
        color: #ffffff !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity.is-running {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity.is-idle {
        background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%) !important;
    }
}

/* Dashboard summary cards - Light mode */
.dashboard-card-hours {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dashboard-card-hours .heading,
.dashboard-card-hours .title {
    color: #ffffff !important;
}

.dashboard-card-projects {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.dashboard-card-projects .heading,
.dashboard-card-projects .title {
    color: #ffffff !important;
}

.dashboard-card-activity {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    color: #0a0a0a !important;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.dashboard-card-activity .heading {
    color: rgba(0, 0, 0, 0.7) !important;
    font-weight: 600;
}

.dashboard-card-activity .title {
    color: #0a0a0a !important;
}

.dashboard-card-activity.is-running {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}

.dashboard-card-activity.is-idle {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%) !important;
}


/* Dark mode navbar */
[data-theme="dark"] .navbar {
    background-color: #24262d;
    border-bottom: 2px solid rgba(79, 195, 247, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .navbar-item.is-active {
    background-color: rgba(79, 195, 247, 0.15) !important;
    border-bottom: 3px solid #4fc3f7;
}

[data-theme="dark"] .navbar-item:hover:not(.is-active) {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .navbar-dropdown {
    background-color: #2d2f39;
    border-color: #3f4451;
}

[data-theme="dark"] .navbar-divider {
    background-color: #3f4451;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar {
        background-color: #24262d;
        border-bottom: 2px solid rgba(79, 195, 247, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    :root:not([data-theme="light"]) .navbar-item.is-active {
        background-color: rgba(79, 195, 247, 0.15) !important;
        border-bottom: 3px solid #4fc3f7;
    }

    :root:not([data-theme="light"]) .navbar-item:hover:not(.is-active) {
        background-color: rgba(255, 255, 255, 0.05);
    }

    :root:not([data-theme="light"]) .navbar-dropdown {
        background-color: hsl(var(--bulma-navbar-dropdown-item-h), var(--bulma-navbar-dropdown-item-s), calc(var(--bulma-navbar-dropdown-item-background-l) + var(--bulma-navbar-item-background-l-delta)));
        border-color: #3f4451;
    }

    :root:not([data-theme="light"]) .navbar-divider {
        background-color: #3f4451;
    }
}

/* Dashboard cards - Dark mode with better contrast */
/*[data-theme="dark"] .dashboard-card-hours,*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-hours {
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
    }
}

/*[data-theme="dark"] .dashboard-card-projects,*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-projects {
        background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
        box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
    }
}

/*[data-theme="dark"] .dashboard-card-activity,*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-card-activity {
        background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    }

    :root:not([data-theme="light"]) .dashboard-card-activity .heading {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity .title {
        color: #ffffff !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity .subtitle {
        color: #000000 !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity.is-running {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    }

    :root:not([data-theme="light"]) .dashboard-card-activity.is-idle {
        background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%) !important;
    }
}