/* ─── Override Bootstrap primary colour → purple ─────────────────── */
:root {
    --bs-primary:          #7C3AED;
    --bs-primary-rgb:      124, 58, 237;
    --bs-link-color:       #7C3AED;
    --bs-link-color-rgb:   124, 58, 237;
    --bs-link-hover-color: #6D28D9;
    /* Override Bootstrap info (teal) → a neutral slate so no stray blue */
    --bs-info:             #6366F1;
    --bs-info-rgb:         99, 102, 241;
}

/* ─── iOS / macOS Design System ─────────────────────────────────── */
:root {
    --ios-blue:       #7C3AED;
    --ios-blue-dark:  #6D28D9;
    --ios-red:        #FF3B30;
    --ios-green:      #34C759;
    --ios-orange:     #FF9500;
    --ios-yellow:     #FFCC00;
    --ios-teal:       #5AC8FA;
    --ios-indigo:     #5856D6;
    --ios-gray:       #8E8E93;
    --ios-gray2:      #AEAEB2;
    --ios-gray3:      #C7C7CC;
    --ios-gray4:      #D1D1D6;
    --ios-gray5:      #E5E5EA;
    --ios-gray6:      #F2F2F7;
    --ios-bg:         #F2F2F7;
    --ios-card:       #FFFFFF;
    --ios-text:       #1C1C1E;
    --ios-text2:      #3C3C43;
    --ios-text3:      #6E6E73;
    --ios-sep:        rgba(60,60,67,.18);
    --ios-radius:     12px;
    --ios-radius-lg:  16px;
    --ios-radius-xl:  20px;
    --ios-shadow:     0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --ios-shadow-lg:  0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    /* traffic-light colours */
    --tl-red:    #FF5F57;
    --tl-yellow: #FFBD2E;
    --tl-green:  #28CA41;
}

/* ─── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    font-family: 'Google Sans', sans-serif;
    background: var(--ios-bg);
    color: var(--ios-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
}

/* ─── Traffic lights ─────────────────────────────────────────────── */
.ios-traffic-lights {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ios-traffic-lights span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: block;
    cursor: default;
    transition: filter .15s;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}
.ios-traffic-lights span:hover { filter: brightness(.82); }
.tl-red    { background: var(--tl-red); }
.tl-yellow { background: var(--tl-yellow); }
.tl-green  { background: var(--tl-green); }

/* ─── App shell ──────────────────────────────────────────────────── */
.ios-app-shell {
    display: flex;
    min-height: 100vh;
}

/* ─── Left sidebar ───────────────────────────────────────────────── */
.ios-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    background: #1a0a38;
    border-right: none;
    display: flex;
    flex-direction: column;
    z-index: 1100;
    overflow-y: auto;
    overflow-x: hidden;
}

.ios-sidebar-brand {
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ios-sidebar-brand-logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
    align-self: flex-start;
}

.ios-sidebar-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.2px;
}

.ios-sidebar-nav {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.ios-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    transition: background .15s;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.ios-nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
}
.ios-nav-link.active {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-weight: 600;
}

.ios-sidebar-footer {
    padding: 10px 8px 14px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.ios-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 10px;
}

.ios-sidebar-user-info { min-width: 0; }

.ios-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Sidebar backdrop (mobile) ──────────────────────────────────── */
.ios-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1099;
    cursor: pointer;
}
.ios-sidebar-backdrop.show { display: block; }

/* ─── Content area ───────────────────────────────────────────────── */
.ios-content-area {
    flex: 1;
    margin-left: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ─── Top bar ────────────────────────────────────────────────────── */
.ios-topbar {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ios-sep);
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 12px;
    flex-shrink: 0;
}

.ios-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hamburger — hidden on desktop */
.ios-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 6px 8px;
    color: var(--ios-blue);
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s;
    align-items: center;
}
.ios-menu-toggle:hover { background: rgba(124,58,237,.08); }

/* ─── Main content ───────────────────────────────────────────────── */
main.ios-main {
    padding: 28px 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ─── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ios-sidebar {
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .ios-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--ios-shadow-lg);
    }
    .ios-content-area { margin-left: 0; }
    .ios-menu-toggle { display: flex; }
    main.ios-main { padding: 20px 16px; }

    /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */
    .form-control,
    .form-select,
    input,
    select,
    textarea { font-size: 16px !important; }

    /* ── Responsive list table: card rows on mobile ── */
    .table-responsive:has(.ios-list-table) {
        overflow: visible;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .ios-list-table,
    .ios-list-table tbody { display: block; }
    .ios-list-table {
        background: transparent !important;
        border: none !important;
        --bs-table-bg: transparent;
        --bs-table-hover-bg: transparent;
        --bs-table-striped-bg: transparent;
        --bs-table-active-bg: transparent;
        --bs-table-border-color: transparent;
        --bs-table-hover-color: inherit;
    }
    /* Force all td cells fully transparent — Bootstrap uses inset box-shadow for hover tint */
    .ios-list-table tbody td,
    .ios-list-table tbody td:hover,
    .ios-list-table tbody td:active,
    .ios-list-table tbody td:focus {
        background-color: transparent !important;
        box-shadow: none !important;
        --bs-table-bg-state: transparent !important;
        --bs-table-color-state: inherit !important;
    }
    .ios-list-table tbody tr,
    .ios-list-table tbody tr:hover,
    .ios-list-table tbody tr:active {
        background: var(--ios-card) !important;
        -webkit-tap-highlight-color: transparent;
    }
    .ios-list-table thead { display: none; }
    .ios-list-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--ios-card);
        border-radius: var(--ios-radius);
        box-shadow: var(--ios-shadow);
        padding: 14px 16px;
        margin-bottom: 10px;
        border: none !important;
    }
    /* All cells: hidden by default, shown selectively below */
    .ios-list-table tbody tr td {
        display: none;
        border: none !important;
        padding: 0;
        background: transparent !important;
    }
    /* Name cell — full-width first line */
    .ios-list-table tbody tr td.ios-list-name {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        font-weight: 600;
        font-size: 15px;
        color: var(--ios-text);
        margin-bottom: 8px;
    }
    /* Info cells — second line, left side */
    .ios-list-table tbody tr td.ios-list-info {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: var(--ios-text3);
        white-space: nowrap;
        margin-right: 10px;
    }
    /* Actions cell — pushed to far right of second line */
    .ios-list-table tbody tr td.ios-list-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
    /* Decorative-only cells hidden on mobile */
    .ios-list-table tbody tr td.ios-list-hide-mobile { display: none !important; }
    /* Show colour dot inside name cell on mobile (hidden on desktop) */
    .ios-list-table tbody tr td.ios-list-name span[aria-hidden] { display: inline-block !important; }
}

/* ─── Cards ──────────────────────────────────────────────────────── */
.card, .ios-card {
    background: var(--ios-card) !important;
    border: none !important;
    border-radius: var(--ios-radius-lg) !important;
    box-shadow: var(--ios-shadow) !important;
    overflow: hidden;
}

.card-header {
    background: var(--ios-card) !important;
    border-bottom: 1px solid var(--ios-sep) !important;
    font-weight: 600;
    font-size: 14px;
    color: var(--ios-text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 16px !important;
}

/* ─── Grouped list (iOS-style table) ─────────────────────────────── */
.ios-list {
    background: var(--ios-card);
    border-radius: var(--ios-radius-lg);
    box-shadow: var(--ios-shadow);
    overflow: hidden;
}
.ios-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ios-sep);
}
.ios-list-row:last-child { border-bottom: none; }
.ios-list-row:hover { background: rgba(0,0,0,.025); }

/* ─── Tables ─────────────────────────────────────────────────────── */
.table {
    font-size: 14.5px;
    color: var(--ios-text);
}
.table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ios-text3);
    border-bottom: 1px solid var(--ios-sep) !important;
    background: transparent !important;
    padding: 10px 16px !important;
}
.table tbody td {
    border-bottom: 1px solid var(--ios-sep) !important;
    padding: 13px 16px !important;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover td { background: rgba(124,58,237,.04) !important; }
.table-responsive { border-radius: var(--ios-radius-lg); overflow: hidden; box-shadow: var(--ios-shadow); }

/* ─── Inputs & Selects ───────────────────────────────────────────── */
.form-control, .form-select {
    display: block !important;
    width: 100% !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--ios-gray4) !important;
    background: var(--ios-card) !important;
    color: var(--ios-text) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    padding: 11px 14px !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.5 !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ios-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3.5px rgba(124,58,237,.18) !important;
}
.form-control::placeholder { color: var(--ios-gray3) !important; }

/* Re-add the chevron for selects */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e6e73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

.form-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ios-text3) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-bottom: 7px !important;
}
.mb-3 { margin-bottom: 18px !important; }

textarea.form-control { min-height: 88px; resize: vertical; }

/* Color input */
.form-control-color {
    padding: 4px 6px !important;
    height: 44px !important;
    width: 60px !important;
    cursor: pointer;
    border-radius: 10px !important;
}

/* ─── iOS Toggle Switch ──────────────────────────────────────────── */
.form-check { display: flex !important; align-items: center !important; padding-left: 0 !important; gap: 12px; }

.form-check.form-switch {
    padding-left: 0 !important;
    min-height: 36px;
    gap: 12px;
    margin-bottom: 0;
}

/* The actual toggle track */
.form-check.form-switch .form-check-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 51px !important;
    height: 31px !important;
    min-width: 51px !important;
    border-radius: 31px !important;
    border: none !important;
    background-color: var(--ios-gray4) !important;
    background-image: none !important;
    cursor: pointer;
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background-color .25s ease !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
    float: none !important;
}

/* The white thumb via pseudo-element */
.form-check.form-switch .form-check-input::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.3) !important;
    transition: transform .22s cubic-bezier(.4,0,.2,1) !important;
}

.form-check.form-switch .form-check-input:checked {
    background-color: var(--ios-green) !important;
    box-shadow: none !important;
}
.form-check.form-switch .form-check-input:checked::before {
    transform: translateX(20px) !important;
}
.form-check.form-switch .form-check-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(52,199,89,.25) !important;
}

.form-check-label {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--ios-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Non-switch checkboxes */
.form-check:not(.form-switch) .form-check-input {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--ios-gray3) !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    margin: 0 !important;
    accent-color: var(--ios-blue);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    border: none !important;
    transition: opacity .15s, transform .1s !important;
    letter-spacing: -.1px;
}
.btn:active { transform: scale(.97) !important; }

.btn-primary {
    background: var(--ios-blue) !important;
    color: #fff !important;
}
.btn-primary:hover { background: var(--ios-blue-dark) !important; color: #fff !important; }

.btn-danger {
    background: var(--ios-red) !important;
    color: #fff !important;
}
.btn-danger:hover { opacity: .85 !important; }

.btn-success {
    background: var(--ios-green) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    background: var(--ios-gray5) !important;
    color: var(--ios-text) !important;
    border: none !important;
}
.btn-outline-secondary:hover { background: var(--ios-gray4) !important; color: var(--ios-text) !important; }

.btn-outline-primary {
    background: rgba(124,58,237,.1) !important;
    color: var(--ios-blue) !important;
    border: none !important;
}
.btn-outline-primary:hover { background: rgba(124,58,237,.18) !important; }

.btn-outline-danger {
    background: rgba(255,59,48,.1) !important;
    color: var(--ios-red) !important;
    border: none !important;
}
.btn-outline-danger:hover { background: rgba(255,59,48,.18) !important; }

.btn-outline-light {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.35) !important;
}
.btn-outline-light:hover { background: rgba(255,255,255,.28) !important; color: #fff !important; }

.btn-sm {
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: 10px 0 0 10px !important; }
.btn-group .btn:last-child  { border-radius: 0 10px 10px 0 !important; }
.btn-group-sm .btn { padding: 5px 11px !important; font-size: 12px !important; }

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    letter-spacing: .2px;
}

/* ─── Alerts ─────────────────────────────────────────────────────── */
.alert {
    border: none !important;
    border-radius: var(--ios-radius) !important;
    font-size: 14px;
    padding: 14px 16px !important;
}
.alert-success  { background: rgba(52,199,89,.12)  !important; color: #1a5c2a !important; }
.alert-info     { background: rgba(124,58,237,.1)   !important; color: #4c1d95 !important; }
.alert-warning  { background: rgba(255,204,0,.18)  !important; color: #7a5500 !important; }
.alert-danger   { background: rgba(255,59,48,.12)  !important; color: #7a1a14 !important; }

/* ─── Page header ────────────────────────────────────────────────── */
.ios-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ios-page-title {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Google Sans Display', sans-serif;
    letter-spacing: -.5px;
    color: var(--ios-text);
    margin: 0;
}
.ios-page-subtitle {
    font-size: 13px;
    color: var(--ios-text3);
    margin-top: 2px;
}

/* ─── Section header (above a list/card group) ───────────────────── */
.ios-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ios-text3);
    padding: 0 4px;
    margin: 24px 0 8px;
}

/* ─── Stats / KPI row ────────────────────────────────────────────── */
.ios-stat {
    background: var(--ios-card);
    border-radius: var(--ios-radius-lg);
    box-shadow: var(--ios-shadow);
    padding: 20px;
    text-align: center;
}
.ios-stat-value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}
.ios-stat-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ios-text3);
    margin-top: 4px;
}

/* ─── Scrollbar (WebKit) ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ios-gray4); border-radius: 3px; }

/* ─── Utility tweaks ─────────────────────────────────────────────── */
.fw-semibold { font-weight: 600 !important; }
.text-muted  { color: var(--ios-text3) !important; }
hr { border-color: var(--ios-sep) !important; opacity: 1 !important; }
.font-monospace { font-family: 'SF Mono', SFMono-Regular, ui-monospace, monospace !important; }
.vstack { display: flex; flex-direction: column; }
.vstack.gap-3 { gap: 16px !important; }

/* ─── Sign-in page ───────────────────────────────────────────────── */
.ios-signin-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-bg);
    padding: 24px;
}
.ios-signin-card {
    background: var(--ios-card);
    border-radius: var(--ios-radius-xl);
    box-shadow: var(--ios-shadow-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.ios-signin-icon {
    width: 72px;
    height: 72px;
    background: var(--ios-blue);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 30px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.ios-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-gray4) !important;
    border-radius: 12px !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ios-text) !important;
    width: 100%;
    transition: background .15s, box-shadow .15s !important;
    text-decoration: none;
}
.ios-google-btn:hover {
    background: var(--ios-gray6) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
    color: var(--ios-text) !important;
}
.ios-google-btn img { width: 20px; height: 20px; }

/* ─── View-mode toggle (list / grid segmented control) ──────────── */
.view-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--ios-gray5);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}
.view-toggle-btn {
    width: 30px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ios-text3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.view-toggle-btn:hover { color: var(--ios-text); }
.view-toggle-btn.active {
    background: var(--ios-card);
    color: var(--ios-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Hide inactive view pane — JS sets display via applyMode() */
.view-grid-content { display: none; }

/* Card grid layout for grid mode */
.ios-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* ─── Row Action Buttons (iOS-style borderless icon buttons) ─────── */
.ios-row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.ios-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    color: var(--ios-text3);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}
.ios-action-btn:hover {
    background: var(--ios-gray5);
    color: var(--ios-text);
    text-decoration: none;
}
.ios-action-btn.ios-action-danger { color: var(--ios-red); }
.ios-action-btn.ios-action-danger:hover {
    background: rgba(255,59,48,.1);
    color: var(--ios-red);
}
.ios-action-btn.ios-action-primary { color: var(--ios-blue); }
.ios-action-btn.ios-action-primary:hover {
    background: rgba(124,58,237,.1);
    color: var(--ios-blue);
}

/* Text-label variant (e.g. "Members" button) */
.ios-action-btn-label {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ios-text3);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.ios-action-btn-label:hover {
    background: var(--ios-gray5);
    color: var(--ios-text);
    text-decoration: none;
}
.ios-action-btn-label.ios-action-primary { color: var(--ios-blue); }
.ios-action-btn-label.ios-action-primary:hover {
    background: rgba(124,58,237,.1);
    color: var(--ios-blue);
}

/* ─── Tree Picker ────────────────────────────────────────────────── */
.tree-picker { position: relative; }

.tree-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    background: var(--ios-card);
    border: 1.5px solid var(--ios-gray4);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    color: var(--ios-text);
    transition: border-color .2s, box-shadow .2s;
    user-select: none;
}
.tree-picker-trigger:focus { outline: none; }
.tree-picker.open .tree-picker-trigger,
.tree-picker-trigger:focus-visible {
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3.5px rgba(124,58,237,.18);
    outline: none;
}
.tree-picker-chevron {
    color: var(--ios-text3);
    font-size: 12px;
    transition: transform .2s;
    flex-shrink: 0;
}
.tree-picker.open .tree-picker-chevron { transform: rotate(180deg); }

.tree-picker-panel {
    display: none;
    position: fixed; /* fixed escapes overflow:hidden on card ancestors */
    background: var(--ios-card);
    border: 1px solid var(--ios-sep);
    border-radius: 12px;
    box-shadow: 0 -4px 32px rgba(0,0,0,.14);
    z-index: 9000;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    /* left / bottom / width set by JS on open */
}
.tree-picker.open .tree-picker-panel { display: block; }

.tree-picker-item {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    font-size: 14px;
    color: var(--ios-text);
    gap: 0;
}
.tree-picker-item:hover  { background: rgba(124,58,237,.07); }
.tree-picker-item.active {
    background: rgba(124,58,237,.1);
    color: var(--ios-blue);
    font-weight: 600;
}

/* Spacer for non-last depth columns (keeps alignment) */
.tree-item-spacer {
    display: inline-flex;
    width: 20px;
    height: 22px;
    flex-shrink: 0;
    position: relative;
}

/* L-shaped branch connector for the deepest column */
.tree-item-branch {
    display: inline-flex;
    width: 20px;
    height: 22px;
    flex-shrink: 0;
    position: relative;
    margin-right: 2px;
}
.tree-item-branch::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 10px;
    width: 9px;
    border-left: 1.5px solid var(--ios-gray4);
    border-bottom: 1.5px solid var(--ios-gray4);
    border-bottom-left-radius: 3px;
}

.tree-item-icon {
    font-size: 13px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    margin-right: 7px;
    color: var(--ios-blue);
}
.tree-item-icon.muted { color: var(--ios-gray3); }

.tree-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-item-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}
.tree-badge-building { background: rgba(124,58,237,.12); color: var(--ios-blue); }
.tree-badge-floor    { background: rgba(52,199,89,.14);  color: #1a5c2a; }
.tree-badge-room     { background: rgba(255,149,0,.14);  color: #7a4500; }
.tree-badge-area     { background: rgba(90,200,250,.2);  color: #004d6e; }