/* UpkeepPro app styles, loaded after Bootstrap 5.3.
   Phone first: one column with a bottom tab bar. From 992px up: a top nav and
   two columns. Colors, radii and shadows are the --ukp-* custom properties in
   :root, so a different brand only needs that block changed. */

/*region Variables */

:root {
    --ukp-font: "Inter", system-ui, sans-serif;

    /* Space under the phone tab bar's labels: about half the iPhone's 34px home-indicator area,
       so the bar sits lower but its labels stay clear of the indicator line. 0 on other phones. */
    --ukp-tabbar-gap: max(0px, calc(env(safe-area-inset-bottom) - 18px));

    --ukp-blue: #0b4ea2;
    --ukp-blue-dark: #093f84;
    --ukp-blue-rgb: 11, 78, 162; /* --ukp-blue as r, g, b, for rgba() and Bootstrap's link color */

    --ukp-bg: #e8edf4;
    --ukp-surface: #fff;
    --ukp-surface-2: #f1f4f9;
    --ukp-hover: #f5f8fc;
    --ukp-chip-bg: #eaf0f8;
    --ukp-border: #e4e9f0;
    --ukp-shadow: 0 1px 3px rgba(15, 40, 90, .08), 0 6px 16px rgba(15, 40, 90, .06);
    --ukp-focus: 0 0 0 3px rgba(var(--ukp-blue-rgb), .35);
    --ukp-radius: 16px;
    --ukp-radius-sm: 10px;

    --ukp-text: #1f2a3d;
    --ukp-heading: #0f1d36;
    --ukp-muted: #66748a;

    --ukp-due: #c2410c;
    --ukp-due-bg: #fff1e6;
    --ukp-warn-bg: #fde68a;
    --ukp-warn-text: #6b4300;
    --ukp-good-bg: #d9f5e3;
    --ukp-good-text: #13693a;
    --ukp-bad: #dc2626;
    --ukp-bad-bg: #fde2e1;
    --ukp-bad-text: #a61b1b;
}

/*endregion*/
/*region Base */

/* Bootstrap's variables are set on body so its components use these colors */
body {
    --bs-body-color: var(--ukp-text);
    --bs-body-font-family: var(--ukp-font);
    --bs-border-color: var(--ukp-border);
    --bs-link-color-rgb: var(--ukp-blue-rgb);
    --bs-link-hover-color-rgb: var(--ukp-blue-rgb);
    background: var(--ukp-bg);
    padding-bottom: calc(76px + var(--ukp-tabbar-gap)); /* room for the tab bar */
    -webkit-font-smoothing: antialiased;
}

/* Home screen app: pulling the page down past the top shows more blue, not the grey page color.
   With a background on html, body's grey only covers the page itself, and the area around it is
   blue. min-height keeps short pages grey to the bottom. */
@media (display-mode: standalone) {
    html { background: var(--ukp-blue); }
    body { min-height: 100vh; }
}
a { text-decoration: none; }
h1, h2, h3 { color: var(--ukp-heading); }
a:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ukp-focus); }

/* Windows scrollbars take up width, so centered content sits half a scrollbar
   further left on pages that scroll. 100vw includes the scrollbar and 100%
   doesn't, so this moves the content back by half the difference, and it stays
   in the same place on every page. The difference is 0 with no scrollbar, and
   always on phones. Below 576px the content is full width, with nothing to move.
   overflow-x: clip hides the pixel that can stick out at some window widths. */
@media (min-width: 576px) {
    .container { position: relative; left: calc((100vw - 100%) / 2); }
    body { overflow-x: clip; }
}

/* Page changes cross-fade in browsers that support it, a bit quicker than the 0.25s default */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
}

/*endregion*/
/*region Header and tab bar */

.app-header { background: var(--ukp-blue); color: #fff; padding-top: env(safe-area-inset-top); }

/* iPhone and iPad home screen app: a solid blue strip at the top edge. Without a fixed, solid bar
   there, iOS 26+ blurs the page into the area behind the clock as you scroll, and once it starts
   it doesn't stop for that page. With one, WebKit fills that area with the strip's color instead.
   WebKit ignores bars 10px or shorter, so it's at least 12px. Don't add the
   apple-mobile-web-app-status-bar-style meta tag: its black-translucent value brings the blur back. */
.status-bar-fill { display: none; }
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .status-bar-fill { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: max(12px, env(safe-area-inset-top)); background: var(--ukp-blue); pointer-events: none; }
    }
}
.app-header-bar { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.app-brand { margin-right: auto; color: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.app-brand:hover { color: inherit; }
.app-brand b { font-weight: 800; opacity: .75; }

.app-nav { gap: .25rem; }
.app-nav a { color: rgba(255, 255, 255, .8); padding: .5rem .85rem; border-radius: var(--ukp-radius-sm); font-weight: 500; }
.app-nav a:hover { color: #fff; }
.app-nav a.active { color: #fff; background: rgba(255, 255, 255, .16); }
.app-nav i { margin-right: .3rem; font-size: .9em; }

.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: inherit; font-size: 1.2rem; }
.icon-btn-count { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ukp-bad); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }

/* Below 992px the brand is centered between the back arrow (or an empty spot
   the same size) and the bell */
.header-side { flex: none; width: 40px; }
@media (max-width: 991.98px) {
    .app-brand { margin: 0 auto; }
}

/* Bottom tab bar, below 992px */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff; border-top: 1px solid var(--ukp-border); padding-bottom: var(--ukp-tabbar-gap); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem 0 .5rem; color: #7b8699; font-size: .7rem; font-weight: 500; }
.tabbar a i { font-size: 1.15rem; }
.tabbar a.active { color: var(--ukp-blue); }

/*endregion*/
/*region Saved note */

/* Shows after a form saves, above the tab bar, then fades out */
.saved-note { position: fixed; left: 50%; bottom: calc(84px + var(--ukp-tabbar-gap)); z-index: 1040; transform: translateX(-50%); margin: 0; padding: .7rem 1.1rem; border-radius: 999px; background: var(--ukp-heading); color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 24px rgba(15, 40, 90, .25); animation: saved-note 4s ease forwards; }
.saved-note i { color: #7ee2a8; margin-right: .3rem; }
@keyframes saved-note { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .saved-note { animation-duration: 6s; } }
@media (min-width: 992px) { .saved-note { bottom: 1.5rem; } }

/*endregion*/
/*region Page layout */

/* Phones: one column, with blocks in the order of their order-* classes.
   992px and up: a main column and a side column. */
.app-main { padding-top: 1rem; padding-bottom: .5rem; }
.app-main-narrow { max-width: 680px; }
.app-main-wide { max-width: 820px; } /* forms with labels beside the fields (.labels-left) */
.layout { display: flex; flex-direction: column; gap: 1rem; }
.layout-main, .layout-side { display: contents; }
@media (min-width: 992px) {
    body { padding-bottom: 1.5rem; }
    .app-main { padding-top: 1.5rem; }
    .layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
    .layout-main, .layout-side { display: flex; flex-direction: column; gap: 1.5rem; }
}

/* Title row at the top of tab pages and forms */
.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-title h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.page-title-actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* two or more buttons; on phones they drop under the title */
.page-intro { margin: -.5rem 0 1rem; color: var(--ukp-muted); }
@media (min-width: 992px) { .page-title { margin-bottom: 1.5rem; } .page-title h1 { font-size: 2rem; } }

.app-footer { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: var(--ukp-muted); }

/*endregion*/
/*region Cards */

.ukp-card { background: var(--ukp-surface); border-radius: var(--ukp-radius); box-shadow: var(--ukp-shadow); padding: 1rem; }
a.ukp-card:hover { color: inherit; box-shadow: var(--ukp-shadow), 0 0 0 2px var(--ukp-blue); }
.card-alert { box-shadow: var(--ukp-shadow), inset 4px 0 0 var(--ukp-bad); } /* red bar down the left edge */
.row-alert { box-shadow: inset 4px 0 0 var(--ukp-bad); } /* the same bar on one row */
.ukp-card-head, .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.ukp-card-head a, .section-head a { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.ukp-card-title { margin: 0 0 .75rem; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ukp-card-head .ukp-card-title, .section-head .ukp-card-title { margin: 0; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem -1rem 0; padding: .75rem 1rem 0; border-top: 1px solid var(--ukp-border); } /* after a .row-list, which runs to the card's edges and pulls up the card's bottom padding */
@media (min-width: 992px) { .card-foot { justify-content: flex-end; } } /* centered on phones, under the row arrows on desktop */
.empty-note { margin: 0; color: var(--ukp-muted); }

/*endregion*/
/*region Lists */

/* List rows: thumbnail or date chip, text, then a chevron or status. The rows
   run to the card's edges, or stay inside its padding with .row-list-flush.
   Lists here have no bullets, so each <ul>/<ol> needs role="list": without it,
   Safari stops telling screen readers it's a list ("list, 3 items"). */
.row-list { list-style: none; margin: 0 -1rem -1rem; padding: 0; }
.row-item { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; color: inherit; border-top: 1px solid var(--ukp-border); }
.row-item:hover { background: var(--ukp-hover); color: inherit; }
.row-list:not(:has(~ .card-foot)) li:last-child .row-item { border-bottom-left-radius: var(--ukp-radius); border-bottom-right-radius: var(--ukp-radius); } /* the card's bottom corners, unless a footer comes after the list */
.row-list-top { margin-top: -1rem; } /* a list with no card title above it, flush to the card's top edge */
.row-list-top > li:first-child .row-item { border-top: 0; border-top-right-radius: var(--ukp-radius); }
.row-list-flush { margin: 0; }
.row-list-flush .row-item { padding-left: 0; padding-right: 0; border-top: 0; }
.row-list-flush li + li .row-item { border-top: 1px solid var(--ukp-border); }
.row-list-flush .row-item:hover { background: none; }
/* Items listed under the row above, indented one step per level (components/item-row.php caps it at 4) */
.row-depth-1 { padding-left: 2.75rem; }
.row-depth-2 { padding-left: 4.5rem; }
.row-depth-3 { padding-left: 6.25rem; }
.row-depth-4 { padding-left: 8rem; }
/* Where an item is listed, "Cloquet > House": the chevrons between the names (itemPathHtml()) */
.path-sep { margin: 0 .2em; font-size: .7em; opacity: .6; }
.row-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .1rem; } /* title with its badge, so the lines under it get the full width */
.row-title { font-weight: 600; color: var(--ukp-heading); }
.row-sub { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: .8rem; color: var(--ukp-muted); }
.row-overdue { color: var(--ukp-bad-text); font-weight: 600; }
.row-chev { color: var(--ukp-muted); font-size: .8rem; }

/* Dots between the non-empty parts of a line: <span>A</span><span></span><span>B</span> shows "A · B" */
:is(.row-sub, .row-meta, .hero-sub, .log-when) > span:empty { display: none; }
:is(.row-sub, .row-meta, .hero-sub, .log-when) > :not(:empty) ~ span::before { content: "\00B7"; margin: 0 .4em; }

.thumb { flex: none; width: 52px; height: 52px; border-radius: var(--ukp-radius-sm); overflow: hidden; background: var(--ukp-surface-2); display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-icon { color: var(--ukp-blue); font-size: 1.3rem; }

.date-chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--ukp-radius-sm); background: var(--ukp-chip-bg); line-height: 1; }
.date-chip-month { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ukp-blue); }
.date-chip-day { font-size: 1.35rem; font-weight: 800; color: var(--ukp-heading); margin-top: 2px; }
.date-chip-overdue { background: var(--ukp-bad-bg); }
.date-chip-overdue .date-chip-month { color: var(--ukp-bad-text); }

.status { flex: none; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.status-warn { background: var(--ukp-warn-bg); color: var(--ukp-warn-text); }
.status-good { background: var(--ukp-good-bg); color: var(--ukp-good-text); }
.status-expired { background: var(--ukp-surface-2); color: var(--ukp-muted); }
.status-bad { background: var(--ukp-bad-bg); color: var(--ukp-bad-text); }
.status-later { background: var(--ukp-chip-bg); color: var(--ukp-blue); } /* planned, but not due soon */

.chip { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--ukp-chip-bg); }
.chip-due { background: var(--ukp-warn-bg); color: var(--ukp-warn-text); }

/* Label and value pairs, two across */
.details { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: 0; }
.details dt { font-size: .75rem; font-weight: 600; color: var(--ukp-muted); }
.details dd { margin: 0; font-weight: 500; color: var(--ukp-heading); overflow-wrap: anywhere; }
.details-wide { grid-column: 1 / -1; }
/* Spec sheet rows: label on the left, the value on the right. The label column is as wide as the longest label. */
.spec-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.25rem; margin: 0; }
.spec-rows > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: .55rem 0; border-top: 1px solid var(--ukp-border); }
.spec-rows > div:first-child { padding-top: 0; border-top: 0; }
.spec-rows > div:last-child { padding-bottom: 0; }
.spec-rows dt { font-size: .85rem; font-weight: 600; color: var(--ukp-muted); }
.spec-rows dd { margin: 0; font-weight: 500; color: var(--ukp-heading); overflow-wrap: anywhere; }

/*endregion*/
/*region Buttons */

.btn-ukp, .btn-ukp-outline, .btn-ukp-danger, .btn-ukp-danger-outline { --bs-btn-padding-y: .7rem; --bs-btn-font-weight: 700; border-radius: 999px; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.btn-ukp { --bs-btn-bg: var(--ukp-blue); --bs-btn-border-color: var(--ukp-blue); --bs-btn-color: #fff;
           --bs-btn-hover-bg: var(--ukp-blue-dark); --bs-btn-hover-border-color: var(--ukp-blue-dark); --bs-btn-hover-color: #fff;
           --bs-btn-active-bg: var(--ukp-blue-dark); --bs-btn-active-border-color: var(--ukp-blue-dark); --bs-btn-active-color: #fff; }
.btn-ukp-outline { --bs-btn-color: var(--ukp-blue); --bs-btn-border-color: var(--ukp-blue);
                   --bs-btn-hover-bg: var(--ukp-blue); --bs-btn-hover-border-color: var(--ukp-blue); --bs-btn-hover-color: #fff;
                   --bs-btn-active-bg: var(--ukp-blue-dark); --bs-btn-active-border-color: var(--ukp-blue-dark); --bs-btn-active-color: #fff; }
.btn-ukp-danger { --bs-btn-bg: var(--ukp-bad); --bs-btn-border-color: var(--ukp-bad); --bs-btn-color: #fff;
                  --bs-btn-hover-bg: var(--ukp-bad-text); --bs-btn-hover-border-color: var(--ukp-bad-text); --bs-btn-hover-color: #fff;
                  --bs-btn-active-bg: var(--ukp-bad-text); --bs-btn-active-border-color: var(--ukp-bad-text); --bs-btn-active-color: #fff; }
.btn-ukp-danger-outline { --bs-btn-color: var(--ukp-bad); --bs-btn-border-color: var(--ukp-bad);
                          --bs-btn-hover-bg: var(--ukp-bad); --bs-btn-hover-border-color: var(--ukp-bad); --bs-btn-hover-color: #fff;
                          --bs-btn-active-bg: var(--ukp-bad-text); --bs-btn-active-border-color: var(--ukp-bad-text); --bs-btn-active-color: #fff; }
.btn-sm-ukp, .contact-actions .btn { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; font-size: .78rem; }
.btn-sm-ukp { white-space: nowrap; }
.btn i { margin-right: .35rem; }
.action-list { display: grid; gap: .6rem; }

/*endregion*/
/*region Home */

/* The owner's name under the header */
.app-hero-band { background: linear-gradient(180deg, var(--ukp-blue), var(--ukp-blue-dark)); color: #fff; }
.app-hero { display: flex; align-items: center; gap: .9rem; padding-top: .75rem; padding-bottom: 1.5rem; }
.app-hero-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: inherit; line-height: 1.2; }
.app-hero-sub { margin: .15rem 0 0; color: rgba(255, 255, 255, .8); }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ukp-blue); font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }

/* Home page cards for the top-level items, under a heading for each section (Properties, Pets…) */
.section-head .ukp-card-title i { margin-right: .35rem; color: var(--ukp-blue); }
.property-grid { display: grid; gap: .75rem; }
@media (min-width: 768px) { .property-grid { grid-template-columns: 1fr 1fr; } }
.property-card { display: flex; align-items: center; gap: .9rem; padding: .6rem; color: inherit; }
.property-photo { flex: none; width: 104px; height: 80px; object-fit: cover; border-radius: var(--ukp-radius-sm); }
.property-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.property-name { font-weight: 700; font-size: 1.05rem; color: var(--ukp-heading); }
.property-address { font-size: .85rem; color: var(--ukp-muted); }
.property-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.property-card-add .property-name { color: var(--ukp-blue); } /* the last card: where a new item goes */

/* Stock check */
.stock-question { margin: 0 0 .75rem; }
.stock-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.stock-levels button { padding: .55rem 0; border: 1px solid var(--ukp-border); border-radius: var(--ukp-radius-sm); background: var(--ukp-surface-2); color: var(--ukp-text); font-weight: 600; font-size: .875rem; }
.stock-levels button:hover { border-color: var(--ukp-blue); }
.stock-levels button.active { background: var(--ukp-blue); border-color: var(--ukp-blue); color: #fff; }
.stock-note { margin: .6rem 0 0; font-size: .8rem; color: var(--ukp-muted); }

/* Sample cards for features that aren't built yet, so testers don't expect them to do anything */
.mockup-tag { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 0; padding: .3rem .6rem; border: 1px dashed #b9c5d6; border-radius: var(--ukp-radius-sm); background: var(--ukp-surface-2); font-size: .75rem; font-weight: 600; color: var(--ukp-muted); }

/*endregion*/
/*region Offers and plans */

.offer-sponsor { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.offer-sponsor img { height: 30px; width: auto; border-radius: 4px; }
.offer-sponsor span { font-size: .75rem; font-weight: 600; color: var(--ukp-muted); }
.offer-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .35rem; }
.offer-text { font-size: .9rem; margin: 0 0 .9rem; }
.offer + .offer { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ukp-border); }
.offer .offer-title { font-size: 1rem; }
.offer .offer-text { margin-bottom: 0; }
#offers .btn { margin-top: 1rem; }

/*endregion*/
/*region Items and properties */

/* Home page item cards with no photo */
.property-photo-empty { display: flex; align-items: center; justify-content: center; background: var(--ukp-chip-bg); color: var(--ukp-blue); font-size: 2rem; }

/* Items tab: a filter box (.list-filter, shared with Warranties), tiles, then one card per group (grid gap, so hidden cards leave no space) */
.list-filter { margin-bottom: 1rem; }
.location-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.location-tile { display: flex; align-items: center; gap: .6rem; padding: .4rem; border: 2px solid transparent; border-radius: var(--ukp-radius-sm); background: var(--ukp-surface); box-shadow: var(--ukp-shadow); color: var(--ukp-text); text-align: left; font-size: .85rem; }
.location-tile:hover { border-color: #cfd8e4; }
.location-tile[aria-pressed="true"] { border-color: var(--ukp-blue); }
.location-tile-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.location-tile-icon { display: flex; align-items: center; justify-content: center; background: var(--ukp-chip-bg); color: var(--ukp-blue); }
.location-tile-text { display: flex; flex-direction: column; min-width: 0; }
.location-tile-name { overflow-wrap: anywhere; font-weight: 700; line-height: 1.2; color: var(--ukp-heading); } /* on phones, long names wrap and the tile grows taller */
@media (min-width: 768px) { /* tiles as wide as their name, so a long one stays on one line */
    .location-tiles { display: flex; flex-wrap: wrap; }
    .location-tile { min-width: 150px; max-width: 100%; }
    .location-tile-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.location-tile-count { font-size: .75rem; color: var(--ukp-muted); }
.item-groups { display: grid; gap: 1rem; }
.item-group .ukp-card-title a { color: inherit; }
/* Top of the card: photo, name and address, item count, over a thick line that runs to the card's edges.
   Same gap as the item rows so the names line up */
.item-group-head { align-items: center; gap: .85rem; margin: -1rem -1rem 0; padding: .75rem 1rem; border-bottom: 2px solid #cfd8e4; }
.item-group-head + .row-list > li:first-child > .row-item { border-top: 0; } /* the header's line replaces the first row's divider */
.item-group-name { flex: 1; min-width: 0; }
.item-group-head .ukp-card-title { font-size: 1.125rem; font-weight: 700; text-transform: none; letter-spacing: 0; } /* a step down from the page title, a step up from the item names */
.item-group-head .ukp-card-title a { font-size: inherit; font-weight: inherit; white-space: normal; } /* undo the .ukp-card-head a link style, which is for small "+ Add" links */
.item-group-head .property-address { margin: .15rem 0 0; }
.item-group-count { font-size: .85rem; color: var(--ukp-muted); white-space: nowrap; }

/* Maintenance tab: folder tabs joined to the top of the first card in the open panel */
.tab-stack { display: flex; flex-direction: column; gap: 1rem; } /* the same gaps as .layout */
@media (min-width: 992px) { .tab-stack { gap: 1.5rem; } }
.folder-tabs { display: flex; gap: .25rem; margin-bottom: -1rem; } /* the negative margin cancels the stack's gap */
@media (min-width: 992px) { .folder-tabs { margin-bottom: -1.5rem; } }
.folder-tabs button { display: flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border: 0; border-radius: var(--ukp-radius-sm) var(--ukp-radius-sm) 0 0; background: #dfe6f0; color: var(--ukp-muted); font-size: .95rem; font-weight: 700; white-space: nowrap; }
.folder-tabs button:hover { color: var(--ukp-blue); }
.folder-tabs button[aria-selected="true"] { background: var(--ukp-surface); color: var(--ukp-blue); }
.folder-tabs button:focus-visible { outline: none; box-shadow: var(--ukp-focus); }
.tab-count { padding: .05rem .45rem; border-radius: 999px; background: var(--ukp-chip-bg); color: var(--ukp-blue); font-size: .72rem; font-weight: 700; }
.tab-panel { display: contents; } /* its cards act as children of the column; [hidden] still hides it */
.tab-panel > :nth-child(1 of :not([hidden])) { border-top-left-radius: 0; } /* under the first tab, even when a search hides the card above */

/*endregion*/
/*region Item and property pages */

/* The photo at the top. On phones it runs edge to edge from the top of the
   screen (the header bar is hidden there), with the next card over its bottom
   edge. Swipe or scroll sideways for more photos. */
.item-hero { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 62vh; margin: -1rem calc(var(--bs-gutter-x) * -.5) 0; background: var(--ukp-heading); color: #fff; }
.hero-photos { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-photos::-webkit-scrollbar { display: none; }
.hero-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.item-hero.no-photo { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--ukp-blue), var(--ukp-blue-dark)); }
.hero-icon { font-size: 5.5rem; color: rgba(255, 255, 255, .22); margin-bottom: 2.5rem; }
.hero-caption { position: absolute; inset: auto 0 0; padding: 4rem 1rem 2.6rem; background: linear-gradient(rgba(8, 20, 40, 0), rgba(8, 20, 40, .85)); pointer-events: none; }
.hero-title { margin: 0; color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.hero-sub { margin: .35rem 0 0; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.hero-back, .hero-count { position: absolute; top: calc(env(safe-area-inset-top) + .75rem); display: flex; align-items: center; gap: .35rem; color: #fff; background: rgba(8, 20, 40, .5); backdrop-filter: blur(6px); }
.hero-back { left: .75rem; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }
.hero-back:hover { color: #fff; background: rgba(8, 20, 40, .7); }
.hero-count { right: .75rem; padding: .3rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
@media (max-width: 991.98px) { .hero-alone .hero-caption { padding-bottom: 1rem; } } /* no card over the bottom edge to leave room for */
.hero-caption-row { display: flex; align-items: flex-end; gap: 1rem; }
.hero-caption-row > :first-child { flex: 1; min-width: 0; }
.hero-edit { flex: none; display: flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; color: #fff; background: rgba(8, 20, 40, .5); backdrop-filter: blur(6px); font-size: .85rem; font-weight: 600; pointer-events: auto; } /* the caption ignores taps so the photos can be swiped */
.hero-edit:hover { color: #fff; background: rgba(8, 20, 40, .7); }

@media (min-width: 992px) {
    .item-hero { width: 100%; margin: 0; aspect-ratio: 16 / 9; max-height: 440px; border-radius: var(--ukp-radius); box-shadow: var(--ukp-shadow); } /* without the width, max-height also shrinks the width to keep 16:9 */
    .hero-caption { padding: 5rem 1.5rem 1.25rem; }
    .hero-title { font-size: 2.4rem; }
}

/* The photo with a card joined to its bottom edge, as one block: full width on phones, one rounded box on desktop */
.hero-group > .ukp-card { margin: 0 calc(var(--bs-gutter-x) * -.5); border-radius: 0; }
@media (min-width: 992px) {
    .hero-group { overflow: hidden; border-radius: var(--ukp-radius); box-shadow: var(--ukp-shadow); }
    .hero-group > .item-hero, .hero-group > .ukp-card { margin: 0; border-radius: 0; box-shadow: none; }
}

/*endregion*/
/*region Maintenance log */

/* Newest first, one dot per entry on a line */
.log { list-style: none; margin: 0; padding: 0; }
.log-entry { position: relative; display: flex; gap: .85rem; padding-bottom: 1.25rem; }
.log-entry:last-child { padding-bottom: 0; }
.log-entry:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--ukp-border); }
.log-dot { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: .8rem; background: var(--ukp-chip-bg); color: var(--ukp-blue); }
.log-repair .log-dot { background: var(--ukp-due-bg); color: var(--ukp-due); }
.log-note .log-dot { background: var(--ukp-surface-2); color: var(--ukp-muted); }
.log-body { min-width: 0; padding-top: .35rem; }
.log-when { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ukp-heading); }
.log-when span { font-weight: 500; color: var(--ukp-muted); }
.log-item { display: inline-block; margin-top: .1rem; font-weight: 600; } /* logs that cover several items name the item under the date */
.log-what { margin: .15rem 0 0; }
.log-body .row-meta { margin: .1rem 0 0; }
.log-edit { flex: none; margin-left: auto; padding: .3rem .5rem; color: var(--ukp-muted); font-size: .85rem; }
.log-edit:hover { color: var(--ukp-blue); }

/*endregion*/
/*region Who to call */

/* A company's logo (or first letter), name and contact buttons */
.contact + .contact { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ukp-border); }
.contact-head { display: flex; align-items: center; gap: .85rem; color: inherit; }
.contact-head:hover { color: inherit; }
.contact-head:hover .contact-name { color: var(--ukp-blue); }
.contact-logo, .company-logo { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--ukp-border); border-radius: var(--ukp-radius-sm); background: #fff; }
.contact-logo { width: 52px; height: 52px; padding: 4px; font-size: 1.35rem; }
.company-logo { width: 72px; height: 72px; padding: 6px; font-size: 1.8rem; }
:is(.contact-logo, .company-logo) img { max-width: 100%; max-height: 100%; object-fit: contain; }
.contact-initial { border: 0; background: var(--ukp-chip-bg); color: var(--ukp-blue); font-weight: 800; }
.contact-role { font-size: .75rem; font-weight: 600; color: var(--ukp-muted); }
.contact-note { margin-top: .15rem; font-size: .85rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }

/* Get service: one row per company. Phones: logo, text and arrow, with the buttons
   under them. 768px and up: the buttons move between the text and the arrow. */
.company-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "logo body chev" "acts acts acts"; align-items: center; column-gap: .85rem; padding: .75rem 1rem; border-top: 1px solid var(--ukp-border); }
.company-row:hover { background: var(--ukp-hover); }
.row-list-top > .company-row:first-child { border-top: 0; }
.company-row-logo { grid-area: logo; }
.company-row-body { grid-area: body; }
.company-row-chev { grid-area: chev; }
.company-row .contact-actions { grid-area: acts; position: relative; z-index: 1; } /* above the row link, so the buttons get their own clicks */
.company-row-link { color: inherit; }
.company-row-link::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the company */
.company-row:hover .company-row-link { color: var(--ukp-blue); }
@media (min-width: 768px) {
    .company-row { grid-template-columns: 52px minmax(0, 1fr) auto auto; grid-template-areas: "logo body acts chev"; }
    .company-row .contact-actions { flex-wrap: nowrap; min-width: 17.5rem; margin-top: 0; } /* room for Call, Email and Website, so the Call buttons line up down the list */
    .company-row .contact-actions .btn { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; font-size: .72rem; }
}

/*endregion*/
/*region Install the app (home screen) */

/* The prompt on Home */
.install-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ukp-blue); color: #fff; font-size: 1.1rem; }
.install-bar { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .75rem 1rem; border-radius: var(--ukp-radius); background: var(--ukp-surface); box-shadow: var(--ukp-shadow); color: var(--ukp-heading); }
@media (min-width: 992px) { .install-bar { margin-bottom: 1.5rem; } } /* the same gaps as .layout */
.install-bar:hover { background: var(--ukp-hover); color: var(--ukp-heading); }
.install-bar-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.install-bar-text span { font-size: .85rem; color: var(--ukp-muted); }
.install-bar-link { flex: none; font-size: .875rem; font-weight: 700; color: var(--ukp-blue); white-space: nowrap; }
@media (max-width: 575.98px) { .install-bar-link-text { display: none; } } /* just the arrow on phones */
@media (hover: hover) and (pointer: fine), (display-mode: standalone) { .install-bar { display: none; } } /* not on computers with a mouse, or once opened from the home screen */

/* The instructions page: numbered steps, each with the icon to look for on the phone */
.install-steps { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.install-steps li { display: flex; align-items: center; gap: .85rem; counter-increment: step; }
.install-steps li::before { content: counter(step); flex: none; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ukp-blue); color: #fff; font-size: .8rem; font-weight: 700; }
.install-step-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ukp-radius-sm); background: var(--ukp-surface-2); color: var(--ukp-heading); font-size: 1.1rem; }
.install-done { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ukp-border); color: var(--ukp-muted); }

/*endregion*/
/*region Company and account pages */

.company-head { display: flex; align-items: center; gap: 1rem; }
.company-name { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.company-card .contact-actions { margin-top: 1rem; }

.profile-card { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; text-align: center; }
.avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; background: var(--ukp-blue); color: #fff; box-shadow: none; }
.profile-name { margin: .75rem 0 .1rem; font-size: 1.4rem; font-weight: 800; }

/*endregion*/
/*region Forms */

.ukp-form { padding: 1.25rem; }
.ukp-form .form-label { font-size: .875rem; font-weight: 600; color: var(--ukp-heading); }
.form-optional { font-weight: 400; color: var(--ukp-muted); }
.password-toggle { display: block; margin-top: .35rem; padding: 0; border: 0; background: none; color: var(--ukp-blue); font-size: .85rem; font-weight: 600; } /* added under each password field by assets/js/app.js */
.ukp-form .form-control, .ukp-form .form-select { padding: .65rem .8rem; border-color: #d3dce8; border-radius: var(--ukp-radius-sm); }
.ukp-form .input-group-text { border-color: #d3dce8; border-radius: var(--ukp-radius-sm) 0 0 var(--ukp-radius-sm); background: var(--ukp-surface-2); }
.ukp-form .input-group .form-control { border-radius: 0 var(--ukp-radius-sm) var(--ukp-radius-sm) 0; }
.ukp-form .form-control:focus, .ukp-form .form-select:focus { border-color: var(--ukp-blue); box-shadow: var(--ukp-focus); }
.ukp-form .form-check-input:checked { background-color: var(--ukp-blue); border-color: var(--ukp-blue); }
.ukp-form fieldset .invalid-feedback { display: block; } /* Bootstrap only shows it right after an .is-invalid input */
.form-section { margin: 1.5rem 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ukp-border); }
.form-section-title { margin-bottom: .75rem; font-size: 1rem; font-weight: 700; color: var(--ukp-heading); }

/* Labels beside the fields: a .field-row holds a label and its field (and error or help text after it).
   Phones get the label above the field, like the other forms. */
.field-row { margin-bottom: 1rem; }
.field-pair { display: flex; gap: .75rem; }
.field-pair > .form-control { flex: 1; min-width: 0; }
@media (min-width: 576px) {
    .labels-left .field-row,
    .labels-left .upload-field { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; }
    .labels-left .field-row > :not(.form-label),
    .labels-left .upload-field > :not(.form-label) { grid-column: 2; }
    .labels-left .field-row > .form-label,
    .labels-left .upload-field > .form-label { margin-bottom: 0; padding-top: .8rem; } /* lines the label up with the text in the field */
    .labels-left .form-optional { display: block; font-size: .8rem; }
}
/* Buttons at the right, Save last: [Delete]  ...  [Cancel] [Save] */
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.form-actions .btn { min-width: 9rem; }
.form-actions .form-delete { margin-right: auto; }

/* Phones: all three on one line, Delete as just its icon (the label stays for screen readers) */
@media (max-width: 575.98px) {
    .form-actions .btn { flex: 1; min-width: 0; --bs-btn-padding-x: .75rem; white-space: nowrap; }
    .form-actions .form-delete { flex: none; }
    .form-delete .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Modal dialogs, e.g. components/delete-dialog.php */
.ukp-dialog { width: min(28rem, calc(100% - 2rem)); padding: 1.5rem; border: 0; border-radius: var(--ukp-radius); box-shadow: var(--ukp-shadow); }
.ukp-dialog::backdrop { background: rgba(8, 20, 40, .5); }
.ukp-dialog-title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 800; }
.ukp-dialog .form-actions { margin-top: 1.25rem; }

/* Three or four choices as one row of buttons (radio inputs underneath) */
.segmented { display: flex; padding: 3px; border-radius: 999px; background: var(--ukp-surface-2); }
.segmented label { flex: 1; padding: .5rem .75rem; border-radius: 999px; text-align: center; font-size: .875rem; font-weight: 600; color: var(--ukp-muted); cursor: pointer; }
.segmented .btn-check:checked + label { background: #fff; color: var(--ukp-blue); box-shadow: 0 1px 3px rgba(15, 40, 90, .15); }
.segmented .btn-check:focus-visible + label { box-shadow: var(--ukp-focus); }

/*endregion*/
/*region Uploads */

/* Photos and documents on the edit forms (components/upload-field.php): square tiles, about four
   across on a phone, each with a × in its top-right corner, then a dashed Add tile */
.upload-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .upload-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.upload-tile, .upload-add { position: relative; aspect-ratio: 1; border-radius: var(--ukp-radius-sm); overflow: hidden; }
.upload-tile { background: var(--ukp-surface-2); }
.upload-tile > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; height: 100%; padding: .5rem; color: var(--ukp-bad); font-size: 1.75rem; }
.upload-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-filename { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--ukp-text); }
.upload-remove { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 29, 54, .65); color: #fff; font-size: .85rem; }
.upload-remove:hover { background: var(--ukp-bad); }
.upload-remove:focus-visible { outline: none; box-shadow: var(--ukp-focus); }

/* Uploading or deleting: the photo dims under a spinner, with no × */
.upload-pending img { opacity: .45; }
.upload-pending .spinner-border { position: absolute; inset: 0; margin: auto; width: 1.75rem; height: 1.75rem; color: var(--ukp-blue); }
.upload-pending .upload-remove { display: none; }

.upload-add-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; height: 100%; padding: .25rem; border: 2px dashed #b9c6d8; border-radius: inherit; color: var(--ukp-blue); font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.upload-add-label i { font-size: 1.3rem; }
.upload-add-label:hover, .upload-dragover .upload-add-label { border-color: var(--ukp-blue); background: var(--ukp-chip-bg); }
.upload-add-label:focus-within { box-shadow: var(--ukp-focus); }
.upload-error { margin: .5rem 0 0; font-size: .875rem; color: var(--ukp-bad-text); white-space: pre-line; } /* one line per message */

/*endregion*/
/*region Empty pages */

/* Not found, and "You're all caught up" on Alerts */
.empty-state { max-width: 32rem; margin: 2rem auto; padding: 2.5rem 1.25rem; text-align: center; }
.empty-state-title { font-size: 1.35rem; font-weight: 800; }
.empty-state-icon { font-size: 2.5rem; color: var(--ukp-good-text); margin-bottom: .75rem; }

/*endregion*/