/*
 * LIS Connect theme — Purple edition.
 *
 * Typography: "Google Sans" is a proprietary Google typeface and is not served
 * by Google Fonts. We request it first (it will resolve for licensed users or
 * where a local copy is installed) and fall back to Roboto — Google's open
 * companion face — then the system stack. If you have a licensed Google Sans
 * web font, drop the .woff2 files in wwwroot/fonts and uncomment the @font-face
 * block below.
 */

/*
@font-face {
    font-family: "Google Sans";
    src: url("/fonts/GoogleSans-Regular.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Google Sans";
    src: url("/fonts/GoogleSans-Medium.woff2") format("woff2");
    font-weight: 500; font-display: swap;
}
*/

:root {
    --lis-font: "Google Sans", "Product Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Purple palette */
    --lis-primary: #7c3aed;      /* violet-600 */
    --lis-primary-dark: #6d28d9; /* violet-700 */
    --lis-primary-darker: #5b21b6;
    --lis-primary-light: #a78bfa;
    --lis-primary-050: #f5f3ff;
    --lis-primary-100: #ede9fe;
    --lis-primary-200: #ddd6fe;
    --lis-accent: #c026d3;       /* fuchsia accent for gradients */

    --lis-grad: linear-gradient(135deg, #6d28d9 0%, #7c3aed 45%, #a21caf 100%);
    --lis-grad-soft: linear-gradient(135deg, #7c3aed, #a855f7);

    --lis-bg: #f6f4fb;
    --lis-navbar: #ffffff;
    --lis-border: #e9e5f5;
    --lis-ink: #2b2440;
    --lis-muted: #6b6480;

    /* Layered, premium shadow system — soft ambient + tighter contact shadow.
       Using violet-tinted shadows keeps depth on-brand instead of muddy grey. */
    --lis-shadow-xs: 0 1px 2px rgba(46, 16, 101, .06);
    --lis-shadow-sm: 0 1px 2px rgba(46, 16, 101, .05), 0 2px 6px rgba(91, 33, 182, .06);
    --lis-shadow-md: 0 2px 4px rgba(46, 16, 101, .05), 0 8px 24px rgba(91, 33, 182, .10);
    --lis-shadow-lg: 0 4px 8px rgba(46, 16, 101, .06), 0 18px 48px rgba(91, 33, 182, .16);
    --lis-shadow-xl: 0 8px 16px rgba(46, 16, 101, .08), 0 32px 72px rgba(91, 33, 182, .22);
    --lis-ring: 0 0 0 1px rgba(124, 58, 237, .08);
    --lis-ease: cubic-bezier(.4, 0, .2, 1);

    /* Bootstrap overrides */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #6d28d9;
    --bs-link-hover-color: #5b21b6;
    --bs-border-radius: .75rem;
    --bs-body-font-size: .875rem;
}

body {
    font-family: var(--lis-font);
    color: var(--lis-ink);
    background-color: var(--lis-bg);
    background-image:
        radial-gradient(1000px 560px at 6% -10%, rgba(124, 58, 237, .12), transparent 58%),
        radial-gradient(900px 560px at 104% -4%, rgba(192, 38, 211, .09), transparent 54%),
        radial-gradient(760px 520px at 50% 118%, rgba(109, 40, 217, .07), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .navbar-brand { font-weight: 600; letter-spacing: -0.02em; }
h1, .h1 { letter-spacing: -0.03em; }
a { text-decoration: none; }
.text-muted { color: var(--lis-muted) !important; }

/* Selection + focus */
::selection { background: var(--lis-primary-200); color: var(--lis-primary-darker); }
.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--lis-primary-light);
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .22);
}

/* Scrollbar */
* { scrollbar-color: var(--lis-primary-light) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--lis-primary-200); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--lis-primary-light); background-clip: content-box; }

/* ---- Navbar (frosted gradient) ---- */
.lis-navbar {
    background: linear-gradient(135deg, rgba(87, 30, 168, .92) 0%, rgba(124, 58, 237, .90) 45%, rgba(162, 28, 175, .92) 100%);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 30px rgba(46, 16, 101, .30);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    padding-top: .6rem; padding-bottom: .6rem;
}
.lis-navbar .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .2px; }
.lis-navbar .navbar-brand i { color: #f0abfc; filter: drop-shadow(0 1px 4px rgba(240, 171, 252, .5)); }
.lis-navbar .nav-link {
    color: #fff;
    font-weight: 500; border-radius: 10px; padding: .45rem .8rem;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lis-navbar .nav-link:hover,
.lis-navbar .nav-link:focus { background: rgba(255, 255, 255, .22); color: #fff; }
.lis-navbar .nav-link.active { background: #fff; color: var(--lis-primary-dark); font-weight: 600; box-shadow: 0 4px 14px rgba(46,16,101,.28); }
/* Keep an opened dropdown toggle visibly highlighted */
.lis-navbar .nav-item.dropdown.show > .nav-link { background: rgba(255, 255, 255, .22); color: #fff; }
.lis-navbar .dropdown-toggle::after { opacity: .85; }
.lis-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.lis-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.dropdown-menu {
    border: 1px solid var(--lis-border);
    border-radius: 14px;
    box-shadow: var(--lis-shadow-lg);
    padding: .4rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .98);
}
.dropdown-item { border-radius: 9px; font-weight: 500; color: var(--lis-ink); padding: .5rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--lis-primary-050); color: var(--lis-primary-darker); }
.dropdown-item.active, .dropdown-item:active { background: var(--lis-primary); color: #fff; }
.dropdown-item.active small, .dropdown-item:active small { color: rgba(255,255,255,.8) !important; }
/* Destructive item keeps red identity, with a red-tinted hover (not purple) */
.dropdown-item.text-danger { color: #dc3545 !important; }
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus { background: #fdECEE; color: #b02a37 !important; }
.dropdown-item-text { color: var(--lis-muted); }
.dropdown-header, .dropdown-divider { margin: .25rem 0; }

/* ---- Cards ---- */
.card {
    border: 1px solid var(--lis-border);
    border-radius: 18px;
    box-shadow: var(--lis-shadow-sm);
    background: #fff;
    transition: box-shadow .25s var(--lis-ease), transform .25s var(--lis-ease);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--lis-border);
    font-weight: 600;
    color: var(--lis-primary-darker);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ---- Buttons ---- */
.btn-primary {
    --bs-btn-bg: var(--lis-primary);
    --bs-btn-border-color: var(--lis-primary);
    --bs-btn-hover-bg: var(--lis-primary-dark);
    --bs-btn-hover-border-color: var(--lis-primary-dark);
    --bs-btn-active-bg: var(--lis-primary-darker);
    --bs-btn-active-border-color: var(--lis-primary-darker);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 18px rgba(124, 58, 237, .32);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px rgba(124, 58, 237, .42); }
.btn-outline-primary {
    --bs-btn-color: var(--lis-primary-dark);
    --bs-btn-border-color: var(--lis-primary-light);
    --bs-btn-hover-bg: var(--lis-primary);
    --bs-btn-hover-border-color: var(--lis-primary);
    --bs-btn-active-bg: var(--lis-primary-dark);
}
.btn {
    border-radius: 11px; font-weight: 500;
    transition: transform .12s var(--lis-ease), box-shadow .2s var(--lis-ease), background-color .15s var(--lis-ease);
}
.btn:active { transform: translateY(1px); }
.text-bg-primary { background: var(--lis-primary) !important; }
a { color: var(--lis-primary-dark); }
a:hover { color: var(--lis-primary-darker); }
.badge.text-bg-light { background: var(--lis-primary-050) !important; color: var(--lis-primary-darker) !important; border: 1px solid var(--lis-border); }

/* ---- Stat tiles ---- */
.stat-tile {
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    color: #fff;
    box-shadow: var(--lis-shadow-md);
    transition: transform .22s var(--lis-ease), box-shadow .22s var(--lis-ease);
    overflow: hidden; position: relative;
    isolation: isolate;
}
/* Glossy diagonal sheen + soft inner top-light for a glassy, premium finish. */
.stat-tile::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .28), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 40%);
}
.stat-tile::after {
    content: ""; position: absolute; top: -60%; left: -30%; width: 55%; height: 220%; z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: rotate(18deg); transition: left .6s var(--lis-ease);
}
.stat-tile:hover { transform: translateY(-4px); box-shadow: var(--lis-shadow-lg); }
.stat-tile:hover::after { left: 120%; }
.stat-tile .stat-value { font-size: 2.15rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(46, 16, 101, .25); }
.stat-tile .stat-label { opacity: .92; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.stat-tile .fa-solid { opacity: .38; font-size: 2.4rem; }
.tile-total   { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.tile-online  { background: linear-gradient(135deg, #7c3aed, #c026d3); }
.tile-recv    { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.tile-offline { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.tile-error   { background: linear-gradient(135deg, #db2777, #f43f5e); }

/* ---- Device cards ---- */
.device-card { transition: box-shadow .25s var(--lis-ease), transform .25s var(--lis-ease), border-color .25s var(--lis-ease); }
.device-card:hover { transform: translateY(-4px); box-shadow: var(--lis-shadow-lg); border-color: var(--lis-primary-200); }
.device-card.flash { animation: flash 1.3s ease; }
@keyframes flash {
    0%   { box-shadow: 0 0 0 3px rgba(124, 58, 237, .45), var(--lis-shadow-md); border-color: var(--lis-primary); }
    100% { box-shadow: var(--lis-shadow-sm); }
}

.status-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.status-Online    { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.16); }
.status-Receiving { background: #a855f7; box-shadow: 0 0 0 4px rgba(168,85,247,.22); animation: pulse 1.4s infinite; }
.status-Offline   { background: #9ca3af; }
.status-Error     { background: #f43f5e; box-shadow: 0 0 0 4px rgba(244,63,94,.16); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.badge-proto { font-weight: 600; }

/* ---- Tables ---- */
.table { --bs-table-hover-bg: var(--lis-primary-050); }
.table > thead.table-light th, .table > thead .table-light {
    background: var(--lis-primary-050); color: var(--lis-primary-darker); border-color: var(--lis-border);
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .74rem;
}
.table > :not(caption) > * > * { padding: .75rem .85rem; }
.table-hover > tbody > tr { transition: background-color .12s var(--lis-ease); }
.table-active > * { background-color: var(--lis-primary-100) !important; }

/* Responsive tables: on phones/tablets (below the lg navbar-collapse breakpoint),
   collapse each row into a stacked card so there is no horizontal scrolling.
   Cells use their data-label as an inline heading. */
@media (max-width: 991.98px) {
    table.table-cards { border: 0; background: transparent; }
    table.table-cards thead { display: none; }
    table.table-cards tbody,
    table.table-cards tr,
    table.table-cards td { display: block; width: 100%; }
    table.table-cards tr {
        background: #fff;
        border: 1px solid var(--lis-border);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(91, 33, 182, .06);
        margin-bottom: .85rem;
        padding: .35rem .25rem;
    }
    table.table-cards tr.table-active > * { background-color: transparent !important; }
    table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        border: 0;
        padding: .5rem .9rem;
    }
    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--lis-primary-darker);
        text-transform: uppercase;
        letter-spacing: .03em;
        font-size: .72rem;
        text-align: left;
        flex: 0 0 40%;
    }
    /* Cells with no data-label (e.g. an empty "colspan" message) span full width. */
    table.table-cards td:not([data-label]) { justify-content: center; text-align: center; }
    table.table-cards td:not([data-label])::before { content: none; }
    /* Hide genuinely empty cells so blank rows don't leave orphan labels. */
    table.table-cards td:empty { display: none; }
    /* Action buttons align right and may wrap onto their own line. */
    table.table-cards td.cell-actions { justify-content: flex-end; flex-wrap: wrap; }
    /* Secondary columns hidden in card mode to keep cards short (still shown as
       table columns on desktop). */
    table.table-cards td.card-hide { display: none; }
}

/* ---- Forms ---- */
.form-label { font-weight: 500; color: var(--lis-ink); }
.form-check-input:checked { background-color: var(--lis-primary); border-color: var(--lis-primary); }
.form-switch .form-check-input:focus { border-color: var(--lis-primary-light); }
.page-link { color: var(--lis-primary-dark); }
.page-item.active .page-link { background: var(--lis-primary); border-color: var(--lis-primary); }

/* ---- Alerts ---- */
.alert-success { --bs-alert-color: #276749; --bs-alert-bg: #e8f8f0; --bs-alert-border-color: #b7ebd0; }
.alert { border-radius: 12px; border: 1px solid transparent; }

/* ---- Auth pages ---- */
.lis-auth-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(1100px 620px at 15% -10%, rgba(124, 58, 237, .35), transparent 55%),
        radial-gradient(1000px 560px at 100% 110%, rgba(192, 38, 211, .30), transparent 55%),
        linear-gradient(135deg, #2e1065, #4c1d95 55%, #6d28d9);
}
.lis-auth-wrap { width: 100%; max-width: 430px; padding: 1rem; }
.lis-auth-card {
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 80px rgba(46, 16, 101, .5);
}
.lis-auth-card .brand-badge {
    width: 72px; height: 72px; border-radius: 20px; margin: 0 auto;
    display: grid; place-items: center; color: #fff;
    background: var(--lis-grad);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 30px rgba(124, 58, 237, .5);
    position: relative; overflow: hidden;
}
.lis-auth-card .brand-badge::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .4), transparent 55%);
}
.btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .75rem 1rem; font-weight: 600;
    background: #fff; border: 1.5px solid #e5e0f2; border-radius: 12px; color: #3c4043;
    transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-google:hover { border-color: var(--lis-primary-light); box-shadow: 0 8px 20px rgba(124, 58, 237, .2); transform: translateY(-1px); }

/* Sticky footer: full-height flex column so the footer sits at the bottom
   on short pages but flows normally when content is tall. Scoped to the app
   layout (the auth pages centre their own content). */
body:not(.lis-auth-body) { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.lis-auth-body) > main { flex: 1 0 auto; }
body:not(.lis-auth-body) > .lis-footer { flex-shrink: 0; }

.lis-footer { border-top: 1px solid var(--lis-border); margin-top: 2rem; background: rgba(255,255,255,.7); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
pre.raw-message {
    background: linear-gradient(160deg, #2e1065, #1e1b4b);
    color: #e9d5ff; padding: 1rem; border-radius: 14px; overflow: auto; max-height: 460px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 10px 30px rgba(30, 27, 75, .25) inset, 0 1px 0 rgba(168, 85, 247, .25) inset;
}

/* ---- Premium polish ---- */
/* Refined inputs: subtle inset depth, smooth focus. */
.form-control, .form-select {
    border-color: var(--lis-border);
    border-radius: 11px;
    padding: .55rem .8rem;
    transition: border-color .15s var(--lis-ease), box-shadow .15s var(--lis-ease);
}
.form-control::placeholder { color: #a49dbb; }
.input-group-text { border-color: var(--lis-border); background: var(--lis-primary-050); color: var(--lis-primary-darker); border-radius: 11px; }

/* Badges: slightly softer, better-spaced pills. */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; border-radius: 8px; }

/* Muted section subtitles read as one refined system. */
.text-muted.small { letter-spacing: .01em; }

/* Alerts float with a soft shadow rather than sitting flat. */
.alert { box-shadow: var(--lis-shadow-sm); }

/* Footer link polish. */
.lis-footer a { color: var(--lis-primary-dark); transition: color .15s var(--lis-ease); }
.lis-footer a:hover { color: var(--lis-primary-darker); }

/* Gentle content entrance so pages feel considered, not abrupt. */
@media (prefers-reduced-motion: no-preference) {
    main > .row,
    main > .card,
    main > .d-flex { animation: lis-rise .45s var(--lis-ease) both; }
    @keyframes lis-rise {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}