/*
 * Signal Workspace
 * A route-first visual system for the Urlio product surfaces.
 * This file intentionally sits after custom.css so the legacy Bootstrap layer
 * remains available for component behaviour while these tokens own the look.
 */

:root {
    --signal-canvas: #f5f7f2;
    --signal-panel: #ffffff;
    --signal-panel-raised: #fbfcf9;
    --signal-ink: #18211d;
    --signal-quiet: #66736d;
    --signal-faint: #8b9891;
    --signal-line: rgba(24, 33, 29, .11);
    --signal-mint: #a8df38;
    --signal-mint-ink: #172300;
    --signal-sky: #1686ac;
    --signal-danger: #d85b42;
    --signal-radius-sm: .55rem;
    --signal-radius: 1rem;
    --signal-radius-lg: 1.4rem;
    --signal-shadow: 0 1px 2px rgba(19, 28, 23, .04), 0 12px 32px rgba(19, 28, 23, .055);
}

body[data-theme-style='dark'] {
    --signal-canvas: #0b1015;
    --signal-panel: #10181f;
    --signal-panel-raised: #152029;
    --signal-ink: #eff5f0;
    --signal-quiet: #9aa9a3;
    --signal-faint: #68746f;
    --signal-line: rgba(218, 237, 222, .105);
    --signal-mint: #c9ff6a;
    --signal-mint-ink: #142008;
    --signal-sky: #7cdfff;
    --signal-danger: #ff916e;
    --signal-shadow: 0 0 0 1px rgba(255,255,255,.018), 0 18px 40px rgba(0,0,0,.16);
}

/* Foundation */
body {
    color: var(--signal-ink);
    background: var(--signal-canvas);
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--signal-sky); }
a:hover { color: var(--signal-sky); }

.alt-bg-page { background-color: var(--signal-canvas) !important; }
.alt-bg-card, .alt-surface-card { background-color: var(--signal-panel) !important; color: var(--signal-ink) !important; }
.alt-text-main, .text-dark, body:not(.link-body) h1, body:not(.link-body) h2, body:not(.link-body) h3, body:not(.link-body) h4, body:not(.link-body) h5, body:not(.link-body) h6 { color: var(--signal-ink) !important; }
.alt-text-muted, .text-muted { color: var(--signal-quiet) !important; }
.alt-border, .border { border-color: var(--signal-line) !important; }
.shadow-sm { box-shadow: var(--signal-shadow) !important; }

.card {
    border: 1px solid var(--signal-line);
    border-radius: var(--signal-radius);
    background: var(--signal-panel);
    box-shadow: var(--signal-shadow);
    color: var(--signal-ink);
}

.card-header, .card-footer {
    border-color: var(--signal-line);
    background: transparent;
}

.card-body { color: var(--signal-ink); }

.btn {
    min-height: 2.5rem;
    border-radius: var(--signal-radius-sm);
    font-size: .8125rem;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn:active { transform: scale(.975); }
.btn:focus, .btn.focus,
.form-control:focus, .custom-select:focus,
.select2-container--default .select2-selection--single:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-mint) 35%, transparent) !important;
}

.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
    border-color: var(--signal-mint);
    background: var(--signal-mint);
    color: var(--signal-mint-ink);
}

.btn-primary:hover, .btn-primary:focus {
    border-color: var(--signal-mint);
    background: color-mix(in srgb, var(--signal-mint) 88%, white);
    color: var(--signal-mint-ink);
}

.btn-outline-primary {
    border-color: var(--signal-line);
    background: transparent;
    color: var(--signal-ink);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    border-color: var(--signal-mint);
    background: color-mix(in srgb, var(--signal-mint) 15%, transparent);
    color: var(--signal-ink);
}

.btn-light, .btn-outline-secondary {
    border-color: var(--signal-line);
    background: var(--signal-panel-raised);
    color: var(--signal-ink);
}

.btn-light:hover, .btn-outline-secondary:hover {
    border-color: var(--signal-line);
    background: color-mix(in srgb, var(--signal-panel-raised) 76%, var(--signal-mint));
    color: var(--signal-ink);
}

.btn-danger { background: var(--signal-danger); border-color: var(--signal-danger); }

.form-control, .custom-select, .input-group-text, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.65rem;
    border-color: var(--signal-line) !important;
    border-radius: var(--signal-radius-sm) !important;
    background-color: var(--signal-panel-raised) !important;
    color: var(--signal-ink) !important;
    box-shadow: none !important;
    font-size: .85rem;
}

.form-control::placeholder { color: var(--signal-faint); }
.input-group-text { display: flex; align-items: center; color: var(--signal-quiet); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--signal-ink); line-height: 2.55rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.55rem; }
.select2-dropdown { border-color: var(--signal-line); background: var(--signal-panel); color: var(--signal-ink); box-shadow: var(--signal-shadow); }
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--highlighted[aria-selected] { background: color-mix(in srgb, var(--signal-mint) 15%, var(--signal-panel)); color: var(--signal-ink); }

.table { color: var(--signal-ink); }
.table th { border-top: 0; border-bottom: 1px solid var(--signal-line); color: var(--signal-faint); font-size: .64rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.table td { border-color: var(--signal-line); vertical-align: middle; }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--signal-mint) 5%, transparent); color: var(--signal-ink); }
.dropdown-menu { border: 1px solid var(--signal-line); border-radius: .75rem; background: var(--signal-panel); box-shadow: var(--signal-shadow); color: var(--signal-ink); }
.dropdown-item { color: var(--signal-quiet); font-size: .82rem; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: color-mix(in srgb, var(--signal-mint) 14%, var(--signal-panel)); color: var(--signal-ink); }
.dropdown-divider { border-color: var(--signal-line); }
.modal-content { border: 1px solid var(--signal-line); background: var(--signal-panel); color: var(--signal-ink); box-shadow: var(--signal-shadow); }
.modal-header, .modal-footer { border-color: var(--signal-line); }
.close { color: var(--signal-ink); text-shadow: none; }
.alert { border-radius: var(--signal-radius-sm); border: 1px solid var(--signal-line); }
.badge { border-radius: 999px; font-weight: 650; }
.pagination .page-link { border-color: var(--signal-line); background: var(--signal-panel); color: var(--signal-quiet); }
.pagination .page-item.active .page-link { border-color: var(--signal-mint); background: var(--signal-mint); color: var(--signal-mint-ink); }

/* Authenticated workspace shell */
body.app, [data-theme-style='dark'].app { background: var(--signal-canvas); }
.app-container { min-height: 100vh; background: var(--signal-canvas); }
.app-sidebar {
    width: 15.5rem;
    min-width: 15.5rem;
    max-width: 15.5rem;
    margin: 0 0 0 -16.5rem;
    padding: 1.25rem .7rem .8rem;
    border: 0;
    border-right: 1px solid var(--signal-line);
    border-radius: 0;
    background: var(--signal-panel) !important;
    box-shadow: none;
    transition: margin-left 180ms cubic-bezier(.23, 1, .32, 1), margin-right 180ms cubic-bezier(.23, 1, .32, 1);
}

[dir='rtl'] .app-sidebar { margin: 0 -16.5rem 0 0; border-right: 0; border-left: 1px solid var(--signal-line); }
body.app-sidebar-opened .app-sidebar { margin-left: 0; }
[dir='rtl'] body.app-sidebar-opened .app-sidebar { margin-right: 0; }

@media (min-width: 992px) {
    .app-sidebar { margin-left: 0; }
    [dir='rtl'] .app-sidebar { margin-right: 0; }
    .app-content { margin-left: 15.5rem; }
    [dir='rtl'] .app-content { margin-right: 15.5rem; }
}

.app-sidebar-title {
    justify-content: flex-start;
    height: auto;
    min-height: 3.2rem;
    margin: 0 0 1.1rem;
    padding: 0 .75rem;
}

.app-sidebar-title a { color: var(--signal-ink); font-size: 1.16rem; font-weight: 750; letter-spacing: -.055em; }
.app-sidebar-title a::before {
    content: '↗';
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    margin-right: .55rem;
    place-items: center;
    border-radius: .48rem;
    background: var(--signal-mint);
    color: var(--signal-mint-ink);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 0;
}
[dir='rtl'] .app-sidebar-title a::before { margin-right: 0; margin-left: .55rem; }

.app-sidebar-links-wrapper { width: 100%; padding-bottom: .75rem; }
.app-sidebar-links-wrapper:hover { width: 100%; scrollbar-color: var(--signal-line) transparent !important; }
.app-sidebar-links-wrapper::-webkit-scrollbar-thumb { background: var(--signal-line); }
.app-sidebar-links > li { padding: .08rem .24rem; }
.app-sidebar-links > .divider-wrapper { margin: .75rem 0 .5rem; padding: 0 .85rem; }
.app-sidebar-links > .divider-wrapper > .divider { border-color: var(--signal-line); }
.app-sidebar-links > li > a {
    min-height: 2.45rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    color: var(--signal-quiet);
    font-size: .79rem;
    font-weight: 570;
    transition: color 140ms ease, background-color 140ms ease;
}

.app-sidebar-links > li > a:hover, [data-theme-style='dark'] .app-sidebar-links > li > a:hover { background: color-mix(in srgb, var(--signal-mint) 10%, transparent); color: var(--signal-ink); }
.app-sidebar-links > li.active > a:not(.default), [data-theme-style='dark'] .app-sidebar-links > li.active > a:not(.default) { background: var(--signal-mint); color: var(--signal-mint-ink); font-weight: 720; }
.app-sidebar-links > li > a .fa-fw { opacity: .82; }
.app-sidebar-footer > a { padding: .8rem .75rem; border-top: 1px solid var(--signal-line); border-radius: .5rem; color: var(--signal-quiet); font-size: .78rem; }
.app-sidebar-footer > a:hover { background: color-mix(in srgb, var(--signal-mint) 10%, transparent); color: var(--signal-ink); }
.app-sidebar-footer-text { color: var(--signal-quiet); }
.app-sidebar-avatar { width: 2rem; height: 2rem; border: 1px solid var(--signal-line); }
.app-overlay { background: #051009; opacity: .58; }

.app-content { min-width: 0; background: var(--signal-canvas); }
.app-content > .py-4.p-lg-5 { padding: 2.25rem 2rem 3.5rem !important; }
.app-content .container { max-width: 1420px; }
.app-footer { border-color: var(--signal-line); color: var(--signal-quiet); }

/* Mobile app header deliberately stays compact—the side rail becomes the menu. */
.app-navbar, .app-content .navbar {
    min-height: 3.6rem;
    border: 1px solid var(--signal-line) !important;
    border-radius: .75rem !important;
    background: var(--signal-panel) !important;
    box-shadow: none;
}
.navbar-brand { color: var(--signal-ink) !important; font-weight: 700; letter-spacing: -.04em; }
.navbar-custom-toggler { color: var(--signal-ink); }

/* Dashboard: one action leads, secondary totals support it. */
.dashboard-page-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem !important; }
.dashboard-page-header h1 { font-size: clamp(1.8rem, 3.1vw, 2.65rem); font-weight: 680 !important; letter-spacing: -.06em; line-height: 1.04; }
.dashboard-page-header::before { content: 'SIGNAL WORKSPACE'; position: absolute; top: -1.25rem; left: 0; color: var(--signal-mint); font-size: .61rem; font-weight: 800; letter-spacing: .13em; }
.dashboard-page-header .dashboard-create-link { flex: 0 0 auto; }
.dashboard-create-link { padding: 0 1rem; }
.dashboard-create-link .fa-plus { font-size: .7rem; }
.dashboard-stat-card.alt-surface-card { border: 1px solid var(--signal-line) !important; border-radius: var(--signal-radius); background: var(--signal-panel) !important; box-shadow: none !important; }
.dashboard-stat-card .card-body { min-height: 6.25rem; padding: 1.05rem 1.1rem; }
.dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: var(--signal-shadow) !important; }
.dashboard-stat-card .card-title { color: var(--signal-ink); font-size: 1.34rem; font-weight: 680; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.dashboard-stat-card .text-muted { font-size: .7rem; font-weight: 580; }
.dashboard-stat-icon-wrap { border-radius: .6rem; }
.dashboard-chart-card { border: 1px solid var(--signal-line) !important; border-radius: var(--signal-radius); background: var(--signal-panel); box-shadow: none !important; }
.dashboard-chart-card .card-body { padding: 1.35rem 1.4rem; }

/* Link collections, project lists, and settings inherit a quietly structured data surface. */
.links-list .card, .link-creator-container .card, .project-card, .domain-card { box-shadow: none; }
.list-group-item { border-color: var(--signal-line); background: var(--signal-panel); color: var(--signal-ink); }
.breadcrumb { padding: 0; background: transparent; }
.breadcrumb-item, .breadcrumb-item + .breadcrumb-item::before { color: var(--signal-faint); font-size: .73rem; }
.breadcrumb-item.active { color: var(--signal-quiet); }
.nav-pills .nav-link { border-radius: .5rem; color: var(--signal-quiet); font-size: .8rem; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--signal-mint); color: var(--signal-mint-ink); }
.nav-tabs { border-color: var(--signal-line); }
.nav-tabs .nav-link { border: 0; color: var(--signal-quiet); font-size: .8rem; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--signal-mint); background: transparent; color: var(--signal-ink); }

/* Public, auth, and admin share the same material language without changing their layout contracts. */
body.index, body.login-background, body.register-background { background: var(--signal-canvas); }
.navbar-main { border-color: var(--signal-line) !important; background: color-mix(in srgb, var(--signal-panel) 92%, transparent) !important; box-shadow: none !important; }
.footer { border-color: var(--signal-line); color: var(--signal-quiet); }
.login-background .card, .register-background .card, .lost-password-background .card { box-shadow: var(--signal-shadow); }

.admin-container, .admin-content { background: var(--signal-canvas) !important; }
.admin-sidebar { background: var(--signal-panel) !important; border-color: var(--signal-line) !important; }
.admin-navbar-top { border-color: var(--signal-line) !important; background: var(--signal-panel) !important; box-shadow: none !important; }

@media (max-width: 991.98px) {
    .app-content > .py-4.p-lg-5 { padding: 1.6rem 1rem 2.75rem !important; }
    .dashboard-page-header { display: block; padding-top: 1.1rem; }
    .dashboard-page-header::before { top: 0; }
    .dashboard-page-header .dashboard-create-link { display: inline-flex; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
    .dashboard-page-header h1 { font-size: 1.9rem; }
    .card { border-radius: .82rem; }
    .btn { min-height: 2.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}