/* PetSit App Overrides - Keep minimal to preserve Minty theme */

/* Touch-friendly button sizing */
.btn {
    min-height: 44px;
    min-width: 44px;
}

/* Icon sizing to ensure visibility */
.navbar .btn, .action-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

/* Responsive images */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Quick spacing adjustments only */
.quick-actions {
    margin: 2rem 0;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }
}

/* ==========================================
   DASHBOARD REDESIGN (STEP 4) - MOBILE-FIRST
   ========================================== */

/* Dashboard Container */
.dashboard-container {
    padding: 16px 12px;
    min-height: calc(100vh - 56px);
}

.dashboard-section {
    margin-bottom: 20px;
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

/* Section Headers */
.dashboard-section-header {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-body-color);
    margin-bottom: 8px;
    margin-top: 16px;
}

.dashboard-section-header:first-child {
    margin-top: 0;
}

/* Section Divider Line */
.section-divider {
    height: 1px;
    background: var(--bs-border-color);
    margin-bottom: 8px;
}

/* ==========================================
   APPOINTMENT CARDS (Section 1: TODAY)
   ========================================== */

.appointment-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    position: relative;
}

.appointment-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.appointment-card:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Header Row (Owner) */
.appointment-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.owner-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid var(--bs-border-color);
}

.owner-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Pet Photos Row */
.pet-photos-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pet-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
}

.pet-count-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Pet Names */
.pet-names {
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-bottom: 8px;
}

/* Appointment Details */
.appointment-details {
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    gap: 8px;
    align-items: center;
}

.appointment-time {
    font-weight: 600;
}

.appointment-service {
    font-weight: 400;
}

.appointment-duration {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* Chevron Indicator */
.chevron-indicator {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--bs-secondary-color);
    font-weight: 300;
}

/* ==========================================
   ACTION ITEM CARDS (Section 2: NEEDS ATTENTION)
   ========================================== */

.action-item-card {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    position: relative;
}

.action-item-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: var(--bs-body-color);
}

.action-item-card:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.action-item-icon {
    font-size: 24px;
    margin-right: 12px;
    min-width: 32px;
    text-align: center;
}

.action-item-content {
    flex: 1;
}

.action-item-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-danger);
    line-height: 1;
    margin-bottom: 4px;
}

.action-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-body-color);
}

/* ==========================================
   QUICK ACCESS GRID (Section 3)
   ========================================== */

.quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-access-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 16px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    min-height: 60px;
}

.quick-access-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: var(--bs-body-color);
}

.quick-access-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.quick-access-label {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   EMPTY STATES
   ========================================== */

.empty-state {
    text-align: center;
    padding: 20px 10px;
}

.empty-state-icon {
    font-size: 32px;
    color: var(--bs-success);
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
    color: var(--bs-secondary-color);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Tablet and up */
@media (min-width: 768px) {
    .appointment-card,
    .action-item-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .quick-access-grid {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .quick-access-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ------------------------------------------------------------------ */
/* TEXT CONTRAST, 2026-08-11, Jack's catch.                            */
/*                                                                      */
/* He looked at the add-pet form on a phone and said a 65 year old      */
/* outdoors on a dull day would be squinting at it. He was right, and   */
/* it was measurable: the minty theme sets --bs-body-color to #888,     */
/* which is 3.54:1 against white. WCAG 2.1 AA asks for 4.5:1 on normal  */
/* text, so every label, hint and paragraph in the signed-in app was    */
/* below the legibility floor.                                          */
/*                                                                      */
/* Worth saying plainly: the PUBLIC site was always fine (flatly uses   */
/* #212529, 15.43:1). Only the app the paying customer works in all day */
/* was failing, which is the wrong way round.                           */
/*                                                                      */
/* This is a recolour and nothing else. No layout moved, no template    */
/* changed, and it reaches every form in the app at once because        */
/* Bootstrap 5.3 is built on these variables. app.css loads after the   */
/* theme, so these win.                                                 */
/*                                                                      */
/* Held by tests/test_text_contrast_2026_08_11.py, which does the maths */
/* rather than trusting anyone's eye.                                   */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  /* PetSit navy, the colour already used on the landing page. 10.98:1. */
  --bs-body-color: #2c3e50;
  --bs-body-color-rgb: 44, 62, 80;

  /* Secondary text still reads as secondary but clears the bar: 6.42:1.
     Muted is not exempt from the standard; it is just quieter. */
  --bs-secondary-color: #55606b;
  --bs-secondary-color-rgb: 85, 96, 107;
}

/* Bootstrap paints .text-muted and .text-body-secondary from the variable
   above, but the theme hard-codes a colour on some of them, so say it again
   where it counts. */
.text-muted,
.text-body-secondary,
.form-text {
  color: #55606b !important;
}

/* Form labels are the specific thing he was squinting at. They carry the
   question, so they get the full-strength ink and a little more weight. */
.form-label {
  color: #2c3e50;
  font-weight: 500;
}


/* ------------------------------------------------------------------ */
/* LABELS INSIDE THE BOXES, 2026-08-11, Jack's ruling after seeing it   */
/* side by side on his phone. Applies to every form that extends        */
/* base.html, which is every signed-in form except Settings and Add     */
/* Appointment, which he asked to leave alone.                          */
/*                                                                      */
/* This is Bootstrap's form-floating, but deliberately NOT its default  */
/* look, which                                                          */
/* shrinks the label to scale(.85) at 65% opacity: about 13.6px of pale */
/* grey. His buyer averages 54 and reads this outdoors, so:             */
/*                                                                      */
/*   - the floated label is 15px, not 13.6                              */
/*   - it is the brand navy at FULL strength, not 65%                   */
/*   - weight 500, so it separates from the value by WEIGHT rather      */
/*     than by being faint                                              */
/*   - the box grows to 4rem to make room without squashing the value   */
/*                                                                      */
/* I predicted this would cost compactness and I was wrong: measured    */
/* over Add Pet's ten fields it came out 880px against 916px, so the    */
/* tidier version is also slightly SHORTER. Recorded because the        */
/* prediction was confident and mistaken.                               */
/*                                                                      */
/* NOTE: form-floating detects a filled field with :placeholder-shown,  */
/* so every control needs placeholder=" " and any REAL placeholder text */
/* has to move to a .form-text line under the field or it is lost.      */
/* ------------------------------------------------------------------ */
.form-floating { margin-bottom: 0; }

.form-floating > .form-control,
.form-floating > .form-select {
  height: 4rem;
  min-height: 4rem;
  padding-top: 1.85rem;
  padding-bottom: .55rem;
}
.form-floating > textarea.form-control { height: auto; min-height: 6.5rem; }

.form-floating > label {
  padding: 1.05rem .75rem;
  color: #2c3e50;
  font-weight: 500;
  opacity: 1;
}

/* Bootstrap fades and shrinks the label once the field is filled. Undo the
   fade entirely and shrink far less: .94 of 16px is about 15px. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #2c3e50;
  opacity: 1;
  transform: scale(.94) translateY(-.85rem) translateX(.1rem);
}
/* Bootstrap paints a white strip behind the floated label; keep it matching
   the pale blue of the field instead of cutting a white notch in it. */
.form-floating > label::after { background-color: transparent !important; }