/* ============================================================
   Blue Planet Connect — Modern UI theme (global, product surfaces)
   Inter typography · 12px rounded corners · soft shadows.
   Mobile-first: hover & scale effects are gated to fine-pointer
   devices so they never interfere with touch. Tap targets are
   enlarged on phones. Loaded after Bootstrap, before each
   layout's bespoke <style> (layout-specific rules still win).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --bs-border-radius:     .75rem;   /* 12px — standard */
    --bs-border-radius-sm:  .5rem;    /* 8px  */
    --bs-border-radius-lg:  1rem;     /* 16px */
    --bs-border-radius-xl:  1.25rem;  /* 20px */
    --bs-border-radius-2xl: 1.5rem;

    --bp-accent: #1a8fe3;
}

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn    { border-radius: var(--bs-border-radius); font-weight: 500; }
.btn-sm { border-radius: var(--bs-border-radius-sm); }
.btn-lg { border-radius: var(--bs-border-radius-lg); }

/* ── Cards / boxes — rounded, soft shadow, gentle hover lift ─ */
.card {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}

/* Hover lift only where a real pointer exists — never on touch. */
@media (hover: hover) and (pointer: fine) {
    .card, .stat-card, .list-group-item-action {
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .10); }
    a.card:hover, .card-hover:hover, .stat-card:hover, .list-group-item-action:hover {
        transform: scale(1.01);
    }
}

/* ── Forms — wider, modern, clear focus ──────────────────── */
.form-control, .form-select {
    border-radius: var(--bs-border-radius-sm);
    border-color: #e2e8f0;
}
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 .2rem rgba(26, 143, 227, .15);
}
.input-group-text { border-color: #e2e8f0; }

/* ── Surfaces: modal, dropdown, alert, list, badge, table ── */
.modal-content { border-radius: var(--bs-border-radius-lg); border: none; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); }
.dropdown-menu { border-radius: var(--bs-border-radius); border-color: rgba(15, 23, 42, .06); box-shadow: 0 8px 28px rgba(15, 23, 42, .12); }
.alert         { border-radius: var(--bs-border-radius); }
.list-group    { border-radius: var(--bs-border-radius); }
.badge         { border-radius: var(--bs-border-radius-sm); }
.table         { --bs-table-border-color: #eef2f7; }

/* ── Touch-friendly sizing on phones (mobile is top priority) ─ */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm { min-height: 38px; }
    .form-control, .form-select { min-height: 44px; font-size: 16px; }   /* 16px stops iOS auto-zoom */
    .form-control-sm, .form-select-sm { min-height: 38px; font-size: 16px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}