@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

/* Booking scheduler: shade a worker's working-hours time cells (applied via
   DxScheduler.HtmlCellDecoration in Narudzba.razor). Global (not scoped) so it
   reaches the scheduler's cell element. Lightest brand teal — matches the admin
   scheduler's working-hour blocks (.scheduler-work-appointment). */
.booking-wh-cell {
    background-color: var(--accent-soft-2);
}

/* Sakrij stupac s brojem tjedna u DxCalendar-u na stranici naručivanja. DevExpress
   nema property za to (samo WeekNumberRule koji bira PRVI tjedan), pa ciljamo interne
   klase koje sadrže "calendar-week-number" (ćelije + zaglavlje). Ograničeno na
   .booking-calendar da ne dira ostale kalendare/date-edit u aplikaciji.
   NAPOMENA (v25.2): ovisi o internim DevExpress klasama — provjeriti vizualno. */
.booking-calendar [class*="calendar-week-number"],
.booking-datenav-dd [class*="calendar-week-number"] {
    display: none !important;
}

/* Sakrij ugrađene „ima termina" točkice u date-navigatoru schedulera: DevExpress nema
   property/template za njih, a označavaju SVE termine (i tuđe). Vlastite dane prikazuje
   lijevi kalendar zelenom točkicom. Točkica je prazan <span> obojan inline preko
   data-dx-style (nema klasu), pa ciljamo upravo to — scope: padajući date-navigator. */
.booking-datenav-dd span[data-dx-style*="background-color"] {
    display: none !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.alert {
    border: 1px solid var(--dxds-color-border-transparent-rest);
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative;
}

.alert-danger {
    background-color: var(--dxds-color-surface-danger-subdued-rest);
    border-color: var(--dxds-color-border-danger-default-rest);
    color: var(--dxds-color-content-danger-default-rest);
}

.alert-warning {
    background-color: var(--dxds-color-surface-warning-subdued-rest);
    border-color: var(--dxds-color-border-warning-default-rest);
    color: var(--dxds-color-content-warning-default-rest);
}

.alert-success {
    background-color: var(--dxds-color-surface-success-subdued-rest);
    border-color: var(--dxds-color-border-success-default-rest);
    color: var(--dxds-color-content-success-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: auto;
    max-width: 100%;
    width: 31.25rem;
}

.or {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 0.3125rem 0;
}

.or .or-line {
    opacity: 0.2;
    width: 100%;
    border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest);
}

.or .or-text {
    padding: 0 0.625rem 0 0.625rem;
    font-size: var(--dxds-font-size-caption-md);
    line-height: var(--dxds-line-height-caption-md);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.links-container {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.links-container .dot {
    border-radius: 50%;
    height: 0.3125rem;
    margin: 0 0.1875rem;
    opacity: 0.7;
    width: 0.3125rem;
    background-color: var(--dxds-color-surface-neutral-default-rest);
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    background: var(--dxds-color-surface-info-subdued-rest);
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    font-size: 1.875rem;
    height: 4.3125rem;
}

.title-content-text-secondary {
    font-size: var(--dxds-font-size-title-md);
    line-height: var(--dxds-line-height-title-md);
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

/* Drži korak s Drawerom (Drawer.razor.css): kad se Drawer skupi u hamburger
   (≤1024px), gornja desktop navigacija (user/odjava) seli u Drawerov NavMenu. */
@media (max-width: 1024px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

/* Brend tipografija — app-wide */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
}

/* NaručiSe brand mark (drawer header etc.) — mirrors the landing .brand look */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}

/* pravi logo (znak "Vrijeme", Graphics/logo) umjesto ranije CSS-nacrtanog placeholdera */
.brand-mark .brand-logo-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    background: url('/images/logo/znak.svg') center / contain no-repeat;
}

.brand-mark .brand-star {
    color: var(--accent);
}

/* brand link in drawer header — strip default link styling */
.navigation-drawer-header a.brand-link {
    text-decoration: none;
}

/* Branded DevExpress grid header row + tinted master rows (admin pages).
   Applied via DxGrid CustomizeElement (HeaderRow / DataRow). Coloring every
   cell in the header row covers the data columns, the +/command column, and
   the detail expand-button column in one go. !important is needed because
   DevExpress theme rules are more specific than a single class. */
.grid-brand-header-row th {
    background-color: var(--accent) !important;
    color: #fff !important;
}

.grid-brand-header-row a,
.grid-brand-header-row span,
.grid-brand-header-row .dxbl-grid-header-caption,
/* keep the +/command buttons in the colored header readable (white icon/text) */
.grid-brand-header-row .dxbl-btn {
    color: #fff !important;
}

/* Cjenik: master (Grupa usluga) rows get a lighter brand tint */
.grid-brand-master-row {
    --dxbl-grid-row-bg: var(--accent-soft);
}

/* Scheduler brand scale (lightest → darkest):
   - toolbar (date navigator + Resources)  : strong teal --accent, white text
   - worker/resource + day/date headers     : soft teal  --accent-soft, dark text
   - working-hour appointments              : lightest   --accent-soft-2 (see template) */

/* Scheduler na stranici naručivanja MORA imati omeđenu visinu da dobije VLASTITI vertikalni
   scroll. DevExpress: "The Scheduler component automatically displays a scrollbar when the view
   area is larger than the specified component size." Bez zadane visine scheduler naraste u punu
   visinu sadržaja pa skrola cijela STRANICA (pogled skače na vrh EKRANA nakon rezervacije), a
   pikselni restore i DxScheduler.ScrollTo rade nad INTERNIM schedulerovim scrollerom koji tada
   ni ne postoji. Omeđena visina taj scroller stvara, pa ScrollTo (dokumentirani API) radi.
   dvh (dinamički viewport) je točniji na mobitelu od vh (koji uključuje adresnu traku). */
.booking-scheduler .brand-scheduler {
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
    min-height: 300px;
}

/* Toolbar — strong teal with white text/icons. */
.brand-scheduler .dxbl-scheduler-toolbar,
.brand-scheduler .dxbl-toolbar {
    background-color: var(--accent) !important;
}

.brand-scheduler .dxbl-scheduler-toolbar,
.brand-scheduler .dxbl-scheduler-toolbar *,
.brand-scheduler .dxbl-toolbar,
.brand-scheduler .dxbl-toolbar * {
    color: #fff !important;
}

/* Keep the toolbar unchanged on hover/focus/active — no white button background
   that would hide the white text. */
.brand-scheduler .dxbl-toolbar .dxbl-btn:hover,
.brand-scheduler .dxbl-toolbar .dxbl-btn:focus,
.brand-scheduler .dxbl-toolbar .dxbl-btn:focus-visible,
.brand-scheduler .dxbl-toolbar .dxbl-btn:active,
.brand-scheduler .dxbl-toolbar .dxbl-btn.dxbl-active,
.brand-scheduler .dxbl-toolbar *:hover,
.brand-scheduler .dxbl-toolbar *:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* Day (date) header cells — soft teal, applied via HtmlCellDecoration. */
.scheduler-brand-header,
.scheduler-brand-header * {
    background-color: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
}

/* Worker (resource) header text colour — chosen for contrast against the worker's
   own colour (set inline via HtmlCellDecoration). */
.scheduler-res-header-dark,
.scheduler-res-header-dark * {
    color: #ffffff !important;
}

.scheduler-res-header-light,
.scheduler-res-header-light * {
    color: #11272b !important;
}

/* Redak radnika u vlastitom "Radnici" popupu (Narudzba.razor): checkbox + boja + ime. */
.booking-worker-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
}

.booking-worker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Kalendar-picker (date navigator) dropdown na telefonu: CENTRIRAN na ekranu,
   širine po sadržaju (DevExpress kalendar je prirodno 312px — s fiksnim rubom
   od 24px na 330px ekranu NIJE stao). Ovdje DropDownCssClass RADI (kalendar se
   otvara izravno iz toolbara, ne kroz "…"), pa selektor smije ostati vezan uz
   .booking-datenav-dd; [style*="pointer-events: auto"] uvjet vrijedi samo dok je
   dropdown otvoren da ne blokira DevExpressovo zatvaranje (inline opacity:0 +
   max-* :0 uz transition). Validirano na DevExpress demou: 330px → centriran,
   odabir datuma normalno zatvara. */
@media (max-width: 600px) {
    dxbl-itemlist-dropdown.booking-datenav-dd[style*="pointer-events: auto"],
    dxbl-itemlist-dropdown[style*="pointer-events: auto"]:has(.booking-datenav-dd) {
        transform: none !important;
        translate: -50% 0 !important;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 10vh !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 8px) !important;
        max-height: 80vh !important;
    }
}

/* Worker "Boja" color picker — compact swatch shown in the DropDownBox edit box. */
.color-edit-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.color-swatch {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.color-dropdown-body {
    padding: 10px;
}

/* Admin/SuperAdmin grid toolbar: action button on the left, search on the right.
   The flex row also stops a bare DxButton from being stretched to the full page
   width by the column-flex page container. */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grid-toolbar-search {
    margin-left: auto;
    width: 100%;
    max-width: 360px;
}

/* Extra breathing room between the toolbar and the grid. */
.grid-spaced {
    margin-top: 1rem;
}

/* Olovka u akcijskoj koloni admin gridova (npr. Korisnici) — DxButton s IconCssClass
   sprite ikonom ("icon icon-settings") nije se vidjela (sprite je bijel, za tamne
   pozadine), pa je zamijenjena inline SVG olovkom bojenom brand tealom preko
   stroke="currentColor". Flex + vertikalno centriranje jer je ćelija grida niska. */
.grid-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    cursor: pointer;
}

.grid-edit-link:hover {
    color: var(--accent-deep);
}

/* Kartica korisnika: neupadljiv link "← Svi korisnici" iznad naslova — obična siva
   boja, podcrta se tek na hover da se ne natječe s h3 naslovom ispod. */
.back-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    text-decoration: underline;
}

/* Centrirana potvrda spremanja (forma korisnika + grid komentara na kartici korisnika)
   — zamjenjuje dosadašnju inline zelenu poruku, nestaje fadeoutom nakon ~2s. */
.save-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(13, 138, 150, 0.95);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    z-index: 2000;
    pointer-events: none;
    animation: save-overlay-fade 2s ease forwards;
}

@keyframes save-overlay-fade {
    0% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}

/* Tenant login: centered login card (mirrors the SuperAdmin login), with the
   company logo above the title. The logo lives in a column flexbox (.title), so
   align-self:flex-start keeps it from being stretched to the card width; the
   max-* caps hold it to a normal logo size while preserving aspect ratio. */
.tenant-login-logo {
    align-self: flex-start;
    width: auto;
    height: auto;
    max-height: 56px;
    max-width: 220px;
    margin-bottom: 0.25rem;
}

.tenant-login-register {
    text-align: center;
    margin: 0;
}

/* Working-hour appointment blocks — the lightest teal (VerticalAppointmentTemplate). */
.scheduler-work-appointment {
    height: 100%;
    box-sizing: border-box;
    background-color: var(--accent-soft-2);
    color: var(--accent-ink);
    border: 1px solid var(--accent-soft);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
}