/* Custom application styles */
[x-cloak] { display: none !important; }

/* The hidden attribute always hides. A Tailwind flex, grid or block class otherwise wins over
   the browser's own rule, and a closed window such as the chat stays on screen as an empty
   white box. */
[hidden] { display: none !important; }

/* Pictures from our own sprite (static/img/hk-icons.svg) size and colour like text. */
.hk-icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }

/* Cards and tables: a solid outline in the page's text colour, so every edge is as plain
   as the writing. Inside anything dark the outline turns white, and on the side panel it
   takes the panel's own text colour, which every theme keeps readable against the panel.

   The selectors are deliberately more specific than a Tailwind border colour class, so
   they win without !important and a template needs no extra class. */
:root { --card-border: #0F172A; }

.bg-slate-800, .bg-slate-900, .bg-slate-950, .bg-gray-800, .bg-gray-900, .bg-gray-950,
.bg-zinc-800, .bg-zinc-900, .bg-neutral-800, .bg-neutral-900, .bg-stone-800, .bg-stone-900,
.bg-black { --card-border: #FFFFFF; }

#app-sidebar { --card-border: var(--sidebar-text); }

:is(div, section, form, article, aside, details, fieldset, li).border:is(.bg-white, .bg-slate-800,
    .bg-slate-900, .bg-slate-950, .bg-gray-800, .bg-gray-900, .bg-gray-950, .bg-black),
a.bg-white.border.rounded-2xl {
    border-color: var(--card-border);
}

/* Menus and pop-overs are outlined with a ring rather than a border. */
.bg-white.ring-1 { --tw-ring-color: var(--card-border); }

/* Every thinner line: between rows and columns, under headings, round inputs and buttons.
   Tailwind's light greys (slate-100 is 1.1:1 on white) vanish on a bright screen or a
   dim one, so they are all drawn in one grey that clears 3:1, the WCAG level for lines
   and shapes a person needs to see, on white and on every theme's page background.
   :root lifts these above Tailwind's own rule while still letting a hover or focus
   colour take over. */
:root { --divider: #7F8EA3; }

:root :is(.border-slate-50, .border-slate-100, .border-slate-200, .border-slate-200\/60,
          .border-slate-300, .border-gray-200, .border-gray-300) {
    border-color: var(--divider);
}

:root :is(.divide-slate-100, .divide-gray-100, .divide-gray-200) > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--divider);
}

:root :is(.ring-slate-50, .ring-slate-200, .ring-slate-200\/80) { --tw-ring-color: var(--divider); }

/* Section tabs. Hovering one has to be obvious at a glance: a tint of the theme's colour
   behind it, a half-strength line under it and darker text. The open tab keeps the solid
   line, so the two never look alike. */
.tab-link { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.tab-link:not(.is-active):hover {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    border-bottom-color: color-mix(in srgb, var(--primary) 55%, transparent);
    color: #0F172A;
}

/* The big buttons on an app's front page. Hovering or tabbing to one lifts it and rings
   it in the theme's colour, so the one under the pointer is never in doubt. */
.launch-tile { transition: box-shadow .15s, transform .15s; }
.launch-tile:hover, .launch-tile:focus-visible, .launch-tile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent), 0 12px 24px rgba(15, 23, 42, .12);
}
.launch-tile:focus-visible, .launch-tile:has(:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Rows that open something, such as a notification. Hovering shows a bar in the theme's
   colour down the left edge; the background only goes as far as slate-50, which keeps the
   grey secondary text above 7:1. */
.row-link { transition: background-color .15s, box-shadow .15s; }
.row-link:hover { background-color: #F8FAFC; box-shadow: inset 3px 0 0 var(--primary); }

/* Charts. A mark lightens under the pointer so the reader sees it respond; the tooltip
   leads with the value, the label beneath it. */
.chart-mark { transition: opacity .15s; }
.chart-mark:hover { opacity: .78; }
.chart-tip {
    position: fixed; z-index: 60; pointer-events: none;
    display: flex; flex-direction: column; gap: .125rem;
    padding: .375rem .625rem; border-radius: .5rem;
    background: #0F172A; color: #FFFFFF; font-size: .75rem; line-height: 1.25;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { font-size: .9375rem; }
.chart-tip span { color: #CBD5E1; }

/* Placeholder text is a hint, so it stays lighter than what is typed, but no lighter than
   AA (4.5:1). Tailwind's own default, gray-400, is 2.5:1. */
html input::placeholder, html textarea::placeholder { color: #64748B; opacity: 1; }

/* The scheduling board: a job being dragged, and the cell it would land in. */
.schedule-card.is-dragging { opacity: .45; }
.schedule-cell.is-drop-target {
    outline: 2px dashed var(--primary);
    outline-offset: -3px;
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}
.schedule-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* A picture opened over the page (static/js/lightbox.js): white on near-black, buttons a
   finger wide, and the picture as large as the screen allows without cropping it. */
.lightbox {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column;
    background: rgba(2, 6, 23, .96); color: #FFFFFF;
}
.lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.lightbox-caption { flex: 1; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lightbox-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: none;
    min-height: 44px; min-width: 44px; padding: 0 1rem; border: 0; border-radius: .75rem;
    background: #FFFFFF; color: #0F172A; font-weight: 600; text-decoration: none; cursor: pointer;
}
.lightbox-button:hover { background: #E2E8F0; }
.lightbox-button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.lightbox-close { padding: 0; font-size: 1.25rem; }
.lightbox-figure {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 1rem 1rem;
}
.lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; background: #FFFFFF; }
.lightbox-image[hidden], .lightbox-problem[hidden] { display: none; }
.lightbox-problem { max-width: 28rem; text-align: center; font-size: 1.125rem; }
/* A phone: the buttons stay top right and the words go under them, full width. */
@media (max-width: 480px) {
    .lightbox-bar { flex-wrap: wrap; justify-content: flex-end; }
    .lightbox-caption { order: 1; flex-basis: 100%; }
}

/* Printing a page (one-click Print): the page itself, without the menus around it. */
@media print {
    #app-sidebar, #app-content > header, nav[aria-label="Maintenance modules"], .no-print { display: none !important; }
    #app-content { margin-left: 0 !important; }
    main { padding: 0 !important; max-width: none !important; }
    a { text-decoration: none; }
}


/* Pictures on coloured tiles (hk_tile): each group of supplies or problems has its own
   colour, so a housekeeper tells a towel from a soap at a glance. A photo the hotel
   uploaded fills the tile instead. */
.hk-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
           border-radius: 1rem; background: var(--tone-bg, #e2e8f0); color: var(--tone-fg, #334155);
           overflow: hidden; }
.hk-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hk-tone-bathroom { --tone-bg: #dbeafe; --tone-fg: #1d4ed8; }
.hk-tone-linen { --tone-bg: #ede9fe; --tone-fg: #6d28d9; }
.hk-tone-drinks { --tone-bg: #fef3c7; --tone-fg: #b45309; }
.hk-tone-room { --tone-bg: #e0e7ff; --tone-fg: #4338ca; }
.hk-tone-cleaning { --tone-bg: #d1fae5; --tone-fg: #047857; }
.hk-tone-other { --tone-bg: #e2e8f0; --tone-fg: #334155; }
.hk-tone-bedroom { --tone-bg: #e0e7ff; --tone-fg: #4338ca; }
.hk-tone-appliances { --tone-bg: #fef9c3; --tone-fg: #a16207; }
.hk-tone-climate { --tone-bg: #cffafe; --tone-fg: #0e7490; }
.hk-tone-tech { --tone-bg: #e0f2fe; --tone-fg: #0369a1; }
.hk-tone-doors { --tone-bg: #f5f5f4; --tone-fg: #57534e; }
.hk-tone-surfaces { --tone-bg: #ffedd5; --tone-fg: #c2410c; }
.hk-tone-cleanliness { --tone-bg: #ffe4e6; --tone-fg: #be123c; }
.hk-tone-pests { --tone-bg: #ecfccb; --tone-fg: #4d7c0f; }
.hk-tone-safety { --tone-bg: #fee2e2; --tone-fg: #b91c1c; }
.hk-tone-guest { --tone-bg: #fae8ff; --tone-fg: #a21caf; }

/* Room cards drag with one finger: sideways moves the card, up and down still scrolls. */
.hk-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hk-card select, .hk-card input, .hk-card textarea { -webkit-user-select: text; user-select: text; }
.hk-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: 0.92; margin: 0;
            transform: rotate(2deg) scale(1.02); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3); cursor: grabbing; }
body.hk-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* A room that just changed under a housekeeper (checked out, do not disturb) blinks until
   they touch the screen. */
@keyframes hk-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.55); } }
.hk-blink { animation: hk-blink 1s ease-in-out infinite; }

/* The board and the front desk swap themselves whole after a click. The clicked button has focus,
   and Chrome anchors the scroll to it: once it is replaced, the page jumped to its bottom. */
#board, #front-desk { overflow-anchor: none; }