/*
 * Site-level overrides.
 *
 * app.css carries the full design system (tokens, layout, components). This file is
 * loaded last so project-specific tweaks and the dark-mode colour-scheme hint can be
 * added here without editing the generated stylesheet.
 */

:root {
    color-scheme: light;
}

html[data-bs-theme='dark'] {
    color-scheme: dark;
}

/* ---- Branding (System settings) and logo tile ---------------------------------- */

/* An uploaded logo replaces the coloured stopwatch tile and keeps its own artwork. */
/* The tile grows in width for wide wordmark logos (e.g. MAVEN) instead of squeezing them into a square. */
.brand-mark.has-logo { background: transparent !important; padding: 0; overflow: hidden; width: auto; max-width: 9rem; height: 2.5rem; border-radius: 0; }
.brand-mark.has-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.sidebar-brand .brand-link:has(.brand-mark.has-logo) { gap: .5rem; min-width: 0; }
.login-panel .brand-mark.has-logo, .login-mobile-brand .brand-mark.has-logo { height: 3rem; max-width: 12rem; }

.brand-color-row { display: flex; gap: .6rem; align-items: center; }
.brand-color-row .form-control-color { width: 3.25rem; height: 2.5rem; padding: .25rem; flex: 0 0 auto; }
.brand-color-row .form-control[type='text'] { max-width: 11rem; font-variant-numeric: tabular-nums; }

.brand-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 .5rem; }
.brand-swatch {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.brand-swatch:hover { transform: scale(1.08); }
.brand-swatch.is-active { box-shadow: 0 0 0 2px #17232b; }
.brand-swatch:focus-visible { outline: 2px solid #17232b; outline-offset: 2px; }

.brand-preview {
    display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
    padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg);
}
.brand-preview-tile {
    width: 2.25rem; height: 2.25rem; border-radius: .45rem; display: inline-grid; place-items: center; background: #0b7a75; color: #fff;
}
.brand-preview-btn { display: inline-block; padding: .4rem .9rem; border-radius: .4rem; font-weight: 500; font-size: .875rem; background: #0b7a75; color: #fff; }
.brand-preview-link { font-weight: 500; font-size: .875rem; color: #0b7a75; text-decoration: underline; }

.brand-logo-box {
    display: inline-flex; align-items: center; justify-content: center; min-height: 4.5rem; min-width: 4.5rem; max-width: 100%;
    padding: .6rem; border: 1px dashed var(--bs-border-color); border-radius: .5rem;
}
.brand-logo-box img { max-width: 9rem; max-height: 4.5rem; object-fit: contain; display: block; }
.brand-favicon-box img { width: 4rem; height: 4rem; max-width: none; max-height: none; border-radius: .35rem; }/*
 * Site-level overrides.
 *
 * app.css carries the full design system (tokens, layout, components). This file is
 * loaded last so project-specific tweaks and the dark-mode colour-scheme hint can be
 * added here without editing the generated stylesheet.
 */

:root {
    color-scheme: light;
}

html[data-bs-theme='dark'] {
    color-scheme: dark;
}

/* ---- Branding (System settings) and logo tile ---------------------------------- */

/* An uploaded logo replaces the coloured stopwatch tile and keeps its own artwork. */
/* The tile grows in width for wide wordmark logos (e.g. MAVEN) instead of squeezing them into a square. */
.brand-mark.has-logo { background: transparent !important; padding: 0; overflow: hidden; width: auto; max-width: 9rem; height: 2.5rem; border-radius: 0; }
.brand-mark.has-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.sidebar-brand .brand-link:has(.brand-mark.has-logo) { gap: .5rem; min-width: 0; }
.login-aside .brand-mark.has-logo, .login-mobile-brand .brand-mark.has-logo { height: 3rem; max-width: 12rem; }
/* Sign-in page, dark left panel: the app name must be white (the Clockify-style .brand-link rule in app.css makes it dark). */
.login-aside .brand-link, .login-aside .brand-link:hover, .login-aside .brand-name { color: #fff; }

.brand-color-row { display: flex; gap: .6rem; align-items: center; }
.brand-color-row .form-control-color { width: 3.25rem; height: 2.5rem; padding: .25rem; flex: 0 0 auto; }
.brand-color-row .form-control[type='text'] { max-width: 11rem; font-variant-numeric: tabular-nums; }

.brand-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 .5rem; }
.brand-swatch {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.brand-swatch:hover { transform: scale(1.08); }
.brand-swatch.is-active { box-shadow: 0 0 0 2px #17232b; }
.brand-swatch:focus-visible { outline: 2px solid #17232b; outline-offset: 2px; }

.brand-preview {
    display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
    padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg);
}
.brand-preview-tile {
    width: 2.25rem; height: 2.25rem; border-radius: .45rem; display: inline-grid; place-items: center; background: #0b7a75; color: #fff;
}
.brand-preview-btn { display: inline-block; padding: .4rem .9rem; border-radius: .4rem; font-weight: 500; font-size: .875rem; background: #0b7a75; color: #fff; }
.brand-preview-link { font-weight: 500; font-size: .875rem; color: #0b7a75; text-decoration: underline; }

.brand-logo-box {
    display: inline-flex; align-items: center; justify-content: center; min-height: 4.5rem; min-width: 4.5rem; max-width: 100%;
    padding: .6rem; border: 1px dashed var(--bs-border-color); border-radius: .5rem;
}
.brand-logo-box img { max-width: 9rem; max-height: 4.5rem; object-fit: contain; display: block; }
.brand-favicon-box img { width: 4rem; height: 4rem; max-width: none; max-height: none; border-radius: .35rem; }