/**
 * BRAND THEME
 * Colors extracted directly from the product logo (a red/maroon "A" mark,
 * AutoCAD-style) via pixel sampling, not guessed: #E51051 (crimson,
 * dominant face), #770728 (dark maroon, the darker facet + wordmark band),
 * #E75882 (pink, the lighter left facet). Applied by overriding Bootstrap
 * 5.3's CSS custom properties plus the specific utility classes this app
 * actually uses (bg-dark/navbar-dark for chrome, btn-primary for actions),
 * so re-theming happens here once rather than by hand-editing every view.
 */
:root {
    --brand-primary: #E51051;
    --brand-primary-hover: #c40e46;
    --brand-dark: #770728;
    --brand-dark-darker: #5a051e;
    --brand-accent: #E75882;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 229, 16, 81;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 229, 16, 81;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
}

/* Dark chrome (navbar, editor topbar) uses the dark maroon facet rather
   than Bootstrap's neutral gray-black — this is the single biggest visual
   cue that makes the app feel like it belongs to the brand rather than a
   generic Bootstrap admin template. */
.bg-dark, .navbar-dark {
    background-color: var(--brand-dark) !important;
}
.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,0.35);
}
.btn-outline-light:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.badge.bg-secondary {
    background-color: #6b5560 !important; /* a muted plum, harmonizes with the maroon instead of clashing gray */
}

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-hover); }

.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.25rem rgba(229, 16, 81, 0.15);
}


 *
 * TABLE -> CARD RESPONSIVE PATTERN
 * Every list screen (Customers, Projects, Team, Device Search) uses plain
 * Bootstrap <table> markup, which just forces horizontal scrolling on a
 * phone — not "responsive" in any real sense. Below ~700px, this collapses
 * each row into a stacked card instead: the header row hides, and each
 * cell becomes its own labeled block using a data-label attribute the
 * table's JS already sets on every <td> (see customers/index.php,
 * projects/index.php, users/index.php, devices/search.php).
 *
 * TOUCH TARGETS
 * Buttons/links inside responsive tables get a minimum 44px tap height —
 * the same guideline the canvas editor's floating toolbar already follows
 * (Phase 4) and the navbar toggle now follows too (see layouts/nav.php).
 */

@media (max-width: 700px) {
    table.responsive-table thead {
        display: none;
    }

    table.responsive-table, table.responsive-table tbody, table.responsive-table tr, table.responsive-table td {
        display: block;
        width: 100%;
    }

    table.responsive-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    table.responsive-table td {
        text-align: right;
        padding-left: 46%;
        position: relative;
        min-height: 2.25rem;
        border: none;
        border-bottom: 1px solid #f1f3f5;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    table.responsive-table td:last-child {
        border-bottom: none;
    }

    table.responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 42%;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        color: #6c757d;
    }

    /* A cell with no meaningful label (an action-only column, e.g. the
       favorite-star or delete-button column) shouldn't show an empty
       label block — mark it with data-label="" and this collapses it. */
    table.responsive-table td[data-label=""] {
        padding-left: 12px;
        justify-content: flex-start;
    }
    table.responsive-table td[data-label=""]::before {
        content: none;
    }
}

/* Minimum touch target size wherever a person taps on a phone/tablet —
   applies everywhere, not just inside tables, since small icon-only
   buttons (layer visibility/lock toggles in the editor, etc.) are exactly
   the kind of control that's easy to mis-tap at default Bootstrap sizing. */
@media (max-width: 991px) {
    .btn, .form-select, .form-control, .nav-link, a.btn {
        min-height: 40px;
    }
    .btn-sm {
        min-height: 36px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
}