/* ==========================================================================
   Nortte ERP – "liquid glass" -teema Bootstrap 5.3:n päälle
   Brändivärit logosta: oranssi #e66d00, turkoosi #0097a5
   ========================================================================== */

:root {
  --app-accent: #e66d00;
  --app-accent-2: #ff8a1f;
  --app-accent-hover: #cc6100;
  --app-teal: #0097a5;
  --app-sidebar-w: 264px;
  --app-radius: 20px;
  --app-radius-sm: 12px;
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', var(--font-sans);
}

/* ---------- Vaalea teema ---------- */
[data-bs-theme="light"] {
  --bs-body-bg: #f3f1ee;
  --bs-body-color: #1b1f24;
  --bs-secondary-color: rgba(27, 31, 36, .62);
  --bs-tertiary-bg: rgba(255, 255, 255, .5);
  --bs-border-color: rgba(27, 31, 36, .10);
  --bs-border-color-translucent: rgba(27, 31, 36, .08);
  --bs-link-color: #007783;
  --bs-link-color-rgb: 0, 119, 131;
  --bs-link-hover-color: #005861;
  --bs-link-hover-color-rgb: 0, 88, 97;
  --bs-primary: #e66d00;
  --bs-primary-rgb: 230, 109, 0;
  --bs-primary-text-emphasis: #8a4100;
  --bs-primary-bg-subtle: #fde6d2;
  --bs-info: #0097a5;
  --bs-info-rgb: 0, 151, 165;
  --bs-info-text-emphasis: #005a63;

  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-bg-soft: rgba(255, 255, 255, .38);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-edge: rgba(27, 31, 36, .07);
  --glass-highlight: rgba(255, 255, 255, .9);
  --glass-shadow: 0 1px 2px rgba(40, 30, 20, .04), 0 12px 32px -8px rgba(60, 40, 20, .12);
  --input-bg: rgba(255, 255, 255, .7);
  --hover-bg: rgba(255, 255, 255, .55);
  --aurora-1: rgba(230, 109, 0, .30);
  --aurora-2: rgba(0, 151, 165, .26);
  --aurora-3: rgba(255, 170, 90, .28);
  --aurora-4: rgba(0, 180, 190, .18);
}

/* ---------- Tumma teema ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #0e1114;
  --bs-body-color: #eceef0;
  --bs-secondary-color: rgba(236, 238, 240, .6);
  --bs-tertiary-bg: rgba(255, 255, 255, .05);
  --bs-border-color: rgba(255, 255, 255, .10);
  --bs-border-color-translucent: rgba(255, 255, 255, .08);
  --bs-link-color: #4fd3de;
  --bs-link-color-rgb: 79, 211, 222;
  --bs-link-hover-color: #8ae4eb;
  --bs-link-hover-color-rgb: 138, 228, 235;
  --bs-primary: #ff8a1f;
  --bs-primary-rgb: 255, 138, 31;
  --bs-primary-text-emphasis: #ffb877;
  --bs-primary-bg-subtle: rgba(230, 109, 0, .18);
  --bs-info: #2bc0cd;
  --bs-info-rgb: 43, 192, 205;
  --bs-info-text-emphasis: #7fdde5;

  --glass-bg: rgba(28, 32, 38, .55);
  --glass-bg-strong: rgba(30, 34, 40, .82);
  --glass-bg-soft: rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-edge: rgba(0, 0, 0, .35);
  --glass-highlight: rgba(255, 255, 255, .10);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -12px rgba(0, 0, 0, .55);
  --input-bg: rgba(255, 255, 255, .05);
  --hover-bg: rgba(255, 255, 255, .06);
  --aurora-1: rgba(230, 109, 0, .34);
  --aurora-2: rgba(0, 151, 165, .36);
  --aurora-3: rgba(255, 120, 20, .16);
  --aurora-4: rgba(0, 200, 210, .18);
}

/* ---------- Perusta ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  --bs-body-font-family: var(--font-sans);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01';
  background: var(--bs-body-bg);
  min-height: 100vh;
  letter-spacing: -.005em;
}
/* Revontuliliukuma taustalla – lasipaneelit taittavat tätä */
body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 8%, var(--aurora-1), transparent 70%),
    radial-gradient(34vmax 28vmax at 88% 6%, var(--aurora-2), transparent 70%),
    radial-gradient(40vmax 30vmax at 75% 95%, var(--aurora-3), transparent 70%),
    radial-gradient(30vmax 26vmax at 20% 90%, var(--aurora-4), transparent 70%);
  filter: blur(20px) saturate(120%);
  animation: aurora 36s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2vmax, -1.5vmax, 0) scale(1.05); }
  100% { transform: translate3d(-2vmax, 1vmax, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand, .brand, .stat-value, .modal-title {
  font-family: var(--font-display);
  letter-spacing: -.012em;
  word-spacing: .04em;
}
h1, .h1, .h2, .h3 { font-weight: 700; }
.h5, .h6, h5, h6 { font-weight: 650; }
.fw-semibold { font-weight: 600 !important; }
.table, .stat-value, .text-nowrap, .font-tabular { font-variant-numeric: tabular-nums; }
.font-monospace { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace !important; }
a { text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.btn:hover, .nav-link:hover, .list-group-item-action:hover, a.stat:hover, .brand:hover, .navbar-brand:hover, a:has(> .logo-thumb):hover { text-decoration: none; }
::selection { background: rgba(230, 109, 0, .25); }

/* ---------- Lasi ---------- */
.glass, .card, .stat, .app-sidebar, .modal-content, .dropdown-menu, .app-topbar, .alert {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--glass-edge);
}

/* ---------- Asettelu ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; padding: 2rem 2.25rem 5rem; max-width: 1440px; }
@media (max-width: 991.98px) { .app-main { padding: 1.1rem 1rem 4rem; } }

@media (min-width: 992px) {
  .app-sidebar {
    width: var(--app-sidebar-w); flex-shrink: 0;
    position: sticky; top: 14px; height: calc(100vh - 28px);
    margin: 14px 0 14px 14px; overflow-y: auto;
    border-radius: 26px;
  }
}
@media (max-width: 991.98px) {
  .app-sidebar.offcanvas-lg { background: var(--glass-bg-strong); border-radius: 0 24px 24px 0; }
}
.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  border-radius: 0 0 18px 18px; border-top: 0;
}

.brand { color: var(--bs-body-color); font-size: 1.12rem; font-weight: 700; }
.brand:hover { color: var(--bs-body-color); }
.brand-logo { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(230, 109, 0, .25)); }
.brand-sub { display: block; font-family: var(--font-sans); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }

.app-sidebar .nav-link {
  color: var(--bs-body-color); padding: .55rem .8rem; border-radius: 12px;
  font-weight: 500; font-size: .93rem; display: flex; align-items: center;
  transition: background .2s, color .2s, transform .2s;
}
.app-sidebar .nav-link i { font-size: 1.05rem; opacity: .75; width: 1.4rem; }
.app-sidebar .nav-link:hover { background: var(--hover-bg); }
.app-sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-2), var(--app-accent));
  box-shadow: 0 6px 18px -6px rgba(230, 109, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.app-sidebar .nav-link.active i { opacity: 1; }
.sidebar-search { position: relative; }
.sidebar-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
.sidebar-search .form-control { padding-left: 2.2rem; border-radius: 12px; }
.sidebar-user { background: var(--glass-bg-soft); border-radius: 14px; padding: .5rem .6rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--app-teal), #00707b);
}

/* ---------- Kortit ---------- */
.card { --bs-card-bg: transparent; --bs-card-cap-bg: transparent; border-radius: var(--app-radius); overflow: hidden; }
.card > .card-header { border-bottom: 1px solid var(--bs-border-color-translucent); padding: .9rem 1.2rem; font-family: var(--font-display); }
.card > .card-body { padding: 1.2rem; }
.card > .card-footer { background: var(--glass-bg-soft); border-top: 1px solid var(--bs-border-color-translucent); padding: .85rem 1.2rem; }
.card .card { box-shadow: none; }

.stat { border-radius: var(--app-radius); padding: 1.1rem 1.2rem; height: 100%; position: relative; overflow: hidden; }
.stat::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 109, 0, .18), transparent 70%); pointer-events: none;
}
.stat-label { font-size: .74rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin-top: .15rem; }
.stat-sub { font-size: .8rem; color: var(--bs-secondary-color); }
a.stat { display: block; color: inherit; text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), 0 16px 36px -14px rgba(230, 109, 0, .45), inset 0 1px 0 var(--glass-highlight); }

/* ---------- Taulukot & listat ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--hover-bg); --bs-table-striped-bg: var(--glass-bg-soft); --bs-table-border-color: var(--bs-border-color-translucent); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; background-color: transparent; }
.table > thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  color: var(--bs-secondary-color); white-space: nowrap; border-bottom-width: 1px;
}
.table-hover > tbody > tr { transition: background .15s; }
.table-light, .table-light > td { --bs-table-bg: var(--glass-bg-soft) !important; --bs-table-color: inherit !important; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--bs-border-color-translucent); --bs-list-group-action-hover-bg: var(--hover-bg); --bs-list-group-action-active-bg: var(--hover-bg); }
.list-group-item { padding: .75rem 1.2rem; }
.card .list-group-flush > .list-group-item.px-0 { padding-left: 0; padding-right: 0; }
.row-muted td { opacity: .55; }

/* ---------- Lomakkeet ---------- */
.form-control, .form-select {
  background-color: var(--input-bg); border-color: var(--bs-border-color);
  border-radius: 11px; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control-sm, .form-select-sm { border-radius: 9px; }
.form-control:focus, .form-select:focus {
  background-color: var(--glass-bg-strong); border-color: rgba(230, 109, 0, .55);
  box-shadow: 0 0 0 4px rgba(230, 109, 0, .15);
}
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(230, 109, 0, .15); border-color: rgba(230, 109, 0, .55); }
.form-label { font-weight: 500; font-size: .88rem; margin-bottom: .35rem; }
.input-group-text { background: var(--glass-bg-soft); border-color: var(--bs-border-color); border-radius: 11px; }
.form-text { color: var(--bs-secondary-color); }

/* ---------- Painikkeet ---------- */
.btn { border-radius: 11px; font-weight: 550; letter-spacing: -.005em; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn-sm { border-radius: 9px; }
.btn:active { transform: scale(.97); }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
  background: linear-gradient(135deg, var(--app-accent-2), var(--app-accent));
  box-shadow: 0 6px 16px -6px rgba(230, 109, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-hover)); box-shadow: 0 8px 22px -6px rgba(230, 109, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-primary:disabled { background: linear-gradient(135deg, var(--app-accent-2), var(--app-accent)); }
.btn-success {
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent;
  background: linear-gradient(135deg, #2fb36d, #1f8f53); box-shadow: 0 6px 16px -8px rgba(31, 143, 83, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: rgba(230, 109, 0, .45); --bs-btn-hover-bg: var(--app-accent); --bs-btn-hover-border-color: var(--app-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover); }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--hover-bg); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-border-color: var(--bs-border-color); }
.btn-outline-secondary.active { background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px rgba(230, 109, 0, .45); }
.btn-link { text-decoration: none; }
.quick-link { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px !important; padding-left: .75rem; padding-right: .75rem; }

/* ---------- Välilehdet (segmentoitu lasi) ---------- */
.nav-tabs {
  border: 0; gap: .25rem; padding: .3rem; border-radius: 16px; width: fit-content; max-width: 100%;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
  border: 0; border-radius: 12px; color: var(--bs-secondary-color); font-weight: 500; font-size: .92rem;
  padding: .45rem .95rem; transition: background .2s, color .2s, box-shadow .2s; margin: 0;
}
.nav-tabs .nav-link:hover { color: var(--bs-body-color); background: var(--hover-bg); }
.nav-tabs .nav-link.active {
  color: var(--bs-body-color); font-weight: 600; background: var(--glass-bg-strong);
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .18), inset 0 1px 0 var(--glass-highlight);
}
.nav-pills .nav-link { border-radius: 12px; color: var(--bs-body-color); font-weight: 500; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--app-accent-2), var(--app-accent)); color: #fff; box-shadow: 0 6px 16px -8px rgba(230, 109, 0, .8); }
.app-main > .nav-pills { background: var(--glass-bg-soft); border: 1px solid var(--glass-border); border-radius: 16px; padding: .3rem; width: fit-content; max-width: 100%; }

/* ---------- Merkit (pehmeät, lasimaiset) ---------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .38em .7em; }
.badge.text-bg-primary   { color: var(--bs-primary-text-emphasis) !important; background: rgba(230, 109, 0, .15) !important; }
.badge.text-bg-info      { color: var(--bs-info-text-emphasis) !important; background: rgba(0, 151, 165, .15) !important; }
.badge.text-bg-success   { color: var(--bs-success-text-emphasis) !important; background: rgba(25, 135, 84, .16) !important; }
.badge.text-bg-warning   { color: var(--bs-warning-text-emphasis) !important; background: rgba(255, 193, 7, .24) !important; }
.badge.text-bg-danger    { color: var(--bs-danger-text-emphasis) !important; background: rgba(220, 53, 69, .15) !important; }
.badge.text-bg-secondary { color: var(--bs-secondary-color) !important; background: rgba(128, 128, 128, .15) !important; }
.badge.text-bg-dark      { color: var(--bs-body-color) !important; background: rgba(128, 128, 128, .25) !important; }
.badge.text-bg-light     { color: var(--bs-body-color) !important; background: var(--glass-bg-strong) !important; border-color: var(--bs-border-color) !important; }

/* ---------- Ilmoitukset & modaalit ---------- */
.alert { border-radius: 16px; }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); box-shadow: var(--glass-shadow), inset 3px 0 0 #2fb36d; }
.alert-danger  { --bs-alert-color: var(--bs-danger-text-emphasis);  box-shadow: var(--glass-shadow), inset 3px 0 0 #dc3545; }
.alert-info    { --bs-alert-color: var(--bs-info-text-emphasis);    box-shadow: var(--glass-shadow), inset 3px 0 0 var(--app-teal); }
.alert-light   { --bs-alert-color: var(--bs-body-color); }
.modal-content { --bs-modal-bg: transparent; background: var(--glass-bg-strong); border-radius: 24px; }
.modal-header, .modal-footer { border-color: var(--bs-border-color-translucent); }
.modal-backdrop.show { opacity: .35; }
.offcanvas-backdrop.show { opacity: .3; }

/* ---------- Pikkuosat ---------- */
.logo-thumb { border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--bs-border-color); flex-shrink: 0; display: inline-block; box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .15); }
.logo-initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; border: 0; font-family: var(--font-display); }
.file-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; border: 1px solid var(--bs-border-color); }
.favicon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; }
.min-w-0 { min-width: 0; }
.memo-view { white-space: normal; word-break: break-word; line-height: 1.65; }
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 0; }
.dl-grid dt { font-weight: 500; color: var(--bs-secondary-color); }
.dl-grid dd { margin: 0; }
details > summary { cursor: pointer; }
hr { border-color: var(--bs-border-color); opacity: 1; }
.page-head h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.page-head-logo .logo-thumb { border-radius: 16px; }

/* Sisältö liukuu esiin */
.app-main > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.app-main > *:nth-child(2) { animation-delay: .03s; }
.app-main > *:nth-child(3) { animation-delay: .06s; }
.app-main > *:nth-child(4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-main > * { animation: none; } }

/* ---------- Kirjautuminen ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 410px; border-radius: 28px; }
.auth-card .card-body { padding: 2.25rem !important; }
.auth-logo { width: 150px; height: auto; filter: drop-shadow(0 6px 18px rgba(230, 109, 0, .25)); }

/* Selaimet ilman backdrop-filteriä */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .stat, .app-sidebar, .modal-content, .app-topbar, .alert { background: var(--glass-bg-strong); }
}

@media print {
  body::before, .app-sidebar, .app-topbar, .btn, form { display: none !important; }
  .card, .stat { box-shadow: none !important; backdrop-filter: none !important; background: #fff !important; }
  .app-main { padding: 0; }
}