/* Tees Components Hub — precision workspace redesign */
:root {
  --navy: #0b2239;
  --blue: #007ea8;
  --cyan: #19bde8;
  --ink: #13253a;
  --muted: #607086;
  --line: #dce4ec;
  --canvas: #f3f6f8;
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --soft: #edf3f6;
  --success: #20a070;
  --warning: #dd9d2b;
  --danger: #d85c57;
  --shadow: 0 1px 2px rgba(13, 35, 57, .04), 0 10px 28px rgba(13, 35, 57, .055);
  --shadow-raised: 0 18px 50px rgba(8, 28, 48, .13);
  --radius: 14px;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: "Manrope", Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #edf8ff;
  --blue: #55c8ee;
  --cyan: #32d1f5;
  --ink: #e8f0f7;
  --muted: #98aabd;
  --line: #233b50;
  --canvas: #091722;
  --paper: #102331;
  --paper-raised: #142b3b;
  --soft: #173042;
  --shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 14px 34px rgba(0, 0, 0, .16);
  --shadow-raised: 0 22px 52px rgba(0, 0, 0, .3);
}

* { scrollbar-color: #afbfca transparent; scrollbar-width: thin; }
body { min-width: 320px; background: var(--canvas); font-size: 14px; -webkit-font-smoothing: antialiased; }
::selection { color: #fff; background: var(--blue); }
h1, h2, h3 { color: var(--ink); letter-spacing: -.035em; }
p { line-height: 1.62; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.55px; }
.muted { color: var(--muted); }

/* Authentication */
.login-view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px;
  background:
    linear-gradient(rgba(5, 25, 43, .72), rgba(5, 25, 43, .86)),
    radial-gradient(circle at 18% 18%, rgba(25, 189, 232, .4), transparent 30%),
    linear-gradient(135deg, #0a2943, #071724 70%);
}
.login-view::before, .login-view::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.login-view::before { width: 620px; height: 620px; border: 1px solid rgba(83, 207, 239, .12); border-radius: 50%; right: -220px; top: -250px; box-shadow: 0 0 0 70px rgba(83, 207, 239, .025), 0 0 0 140px rgba(83, 207, 239, .018); }
.login-view::after { width: 44vw; height: 100%; left: 0; top: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#000,transparent); }
.login-card { width: min(470px, 100%); padding: 34px 36px 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 35px 80px rgba(0,0,0,.3); }
.login-logo { display: flex; min-height: 0; align-items: center; justify-content: flex-start; gap: 14px; margin: -6px 0 30px; padding: 0 0 24px; border-bottom: 1px solid #e2e8ee; border-radius: 0; background: none; box-shadow: none; }
.login-logo img { width: 64px; height: 61px; }
.login-logo strong, .login-logo span { display: block; }
.login-logo strong { color: #0b2239; font-family: var(--font-heading); font-size: 16px; }
.login-logo span { margin-top: 3px; color: #718095; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.login-copy h1 { color: #0b2239; font-size: 34px; }
.login-card .field span { color: #26394d; }
.login-card .field input { min-height: 48px; border-color: #d7e0e7; color: #13253a; background: #f8fafb; caret-color: #007ea8; -webkit-text-fill-color: #13253a; }
.login-card .field input::placeholder { color: #718095; opacity: 1; -webkit-text-fill-color: #718095; }
.login-submit { min-height: 48px; margin-top: 10px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; color: #718095; font-size: 11px; }

/* Shell and navigation */
.app-shell { grid-template-columns: 258px minmax(0, 1fr); background: var(--canvas); transition: grid-template-columns .24s ease; }
.sidebar { z-index: 4; height: 100vh; padding: 20px 14px 16px; border-right: 1px solid rgba(255,255,255,.06); background: #071b2c; box-shadow: 8px 0 30px rgba(7,27,44,.08); }
.sidebar::before { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(#000,transparent 70%); content: ""; pointer-events: none; }
.brand { position: relative; z-index: 1; justify-content: flex-start; gap: 13px; min-height: 66px; margin: 0 0 22px; padding: 7px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand img { width: 51px; height: 49px; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { color: #fff; font-family: var(--font-heading); font-size: 16px; letter-spacing: -.3px; }
.brand-copy small { margin-top: 3px; color: #7897af; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.sidebar-toggle { z-index: 3; top: 27px; right: -12px; width: 25px; height: 25px; border-color: #cbd7df; color: #33546b; background: #fff; box-shadow: 0 5px 14px rgba(7,27,44,.18); }
.nav-section { position: relative; z-index: 1; margin: 0 0 16px; }
.nav-section-title { padding: 0 11px 7px; color: #54758e; font-size: 8px; font-weight: 800; letter-spacing: 1.45px; }
.nav-link { min-height: 43px; gap: 12px; margin: 2px 0; padding: 11px 12px; border-radius: 9px; color: #9cb3c5; font-size: 12px; font-weight: 650; }
.nav-link:hover { color: #eefaff; background: rgba(255,255,255,.055); }
.nav-link.active { color: #fff; background: linear-gradient(90deg,rgba(25,189,232,.18),rgba(25,189,232,.07)); }
.nav-link.active::before { top: 7px; bottom: 7px; left: 0; width: 3px; background: #20c8ef; box-shadow: 0 0 14px rgba(32,200,239,.7); }
.nav-icon { color: #65cce8; }
.nav-icon svg { width: 19px; height: 19px; stroke-width: 1.7; }
.nav-mini-action { color: #65cce8; }
.sidebar-foot { position: relative; z-index: 1; margin: auto 3px 0; padding: 14px 9px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot strong { color: #d6e6f1; }
.sidebar-foot small { color: #607f96; }
.status-dot { background: #46d69b; box-shadow: 0 0 0 4px rgba(70,214,155,.13); }
.sidebar-collapsed { grid-template-columns: 76px minmax(0,1fr); }
.sidebar-collapsed .brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .brand img { width: 45px; height: 44px; }
.sidebar-collapsed .brand-copy { display: none; }

/* Header and workspace */
.workspace { background: var(--canvas); }
.topbar { position: sticky; z-index: 3; top: 0; min-height: 84px; padding: 15px clamp(20px,3vw,42px); border-bottom: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb,var(--paper) 92%,transparent); box-shadow: 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(18px); }
.topbar-copy { gap: 4px; }
.topbar .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.topbar-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(32,160,112,.1); }
.topbar h1 { color: var(--ink); font-size: 27px; }
.topbar-actions { gap: 9px; }
.topbar-icon-button { position: relative; display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--paper); font-size: 11px; font-weight: 700; }
.topbar-icon-button:hover { color: var(--blue); border-color: color-mix(in srgb,var(--blue) 40%,var(--line)); }
.topbar-icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.notification-button { width: 40px; padding: 0; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border: 1px solid var(--paper); border-radius: 50%; background: var(--danger); }
.profile-avatar { display: grid; width: 40px; height: 40px; margin-left: 5px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#087ea9,#19bde8); font-family: var(--font-heading); font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,126,168,.18); }
.profile strong { color: var(--ink); font-size: 12px; }
.profile small { color: var(--muted); font-size: 10px; }
.topbar #logout-button { min-height: 40px; border: 1px solid var(--line); color: var(--muted); background: transparent; }
.content { width: 100%; padding: clamp(22px,3vw,38px) clamp(20px,3vw,42px) 60px; animation: workspace-in .24s ease both; }
@keyframes workspace-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Shared component language */
.button { min-height: 40px; padding: 10px 15px; border-radius: 9px; font-size: 11px; letter-spacing: .05px; transition: transform .14s ease,box-shadow .14s ease,background .14s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: linear-gradient(135deg,#007da7,#0baed5); box-shadow: 0 7px 18px rgba(0,126,168,.16); }
.button.secondary { color: var(--ink); background: var(--soft); }
.text-button { color: var(--blue); }
.icon-button.dark { border-color: var(--line); color: var(--ink); background: var(--paper); }
.metric,.card,.module-intro,.welcome,.placeholder { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.card { padding: 20px; }
.module-intro { padding: 24px 26px; }
.module-intro h2 { font-size: 24px; }
.module-intro p:last-child { max-width: 820px; }
input,textarea,select { min-height: 42px; border-color: var(--line); border-radius: 8px; color: var(--ink); background: var(--paper-raised); }
input:hover,textarea:hover,select:hover { border-color: color-mix(in srgb,var(--blue) 35%,var(--line)); }
input:focus,textarea:focus,select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.field span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .75px; }
.toolbar { margin-top: 24px; }
.table-card { border-radius: var(--radius); }
th { padding: 13px 14px; color: var(--muted); background: var(--soft); font-size: 9px; font-weight: 800; }
td { padding: 13px 14px; border-color: var(--line); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: color-mix(in srgb,var(--blue) 3.5%,var(--paper)); }
.tag,.status-pill { border-radius: 6px; font-weight: 800; letter-spacing: .25px; }
.modal-backdrop { background: rgba(4,18,31,.62); backdrop-filter: blur(4px); }
.modal { border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-raised); }

/* Dashboard */
.dashboard-hero { position: relative; min-height: 228px; align-items: center; padding: clamp(28px,4vw,48px); border: 0; border-radius: 18px; background: linear-gradient(112deg,#081f33 0%,#0c334f 62%,#087ea8 125%); box-shadow: 0 20px 48px rgba(7,31,51,.16); }
.dashboard-hero::before { position: absolute; inset: 0; border-radius: inherit; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg,transparent,#000); content: ""; }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero-copy { max-width: 760px; }
.dashboard-hero .eyebrow { color: #6bd8f2; }
.dashboard-hero h2 { max-width: 720px; margin-bottom: 12px; color: #fff; font-size: clamp(30px,4vw,46px); line-height: 1.08; }
.dashboard-hero p:last-child { max-width: 680px; color: #b9d2e2; font-size: 14px; }
.dashboard-hero-panel { display: grid; min-width: 240px; gap: 12px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(5,24,39,.35); backdrop-filter: blur(10px); }
.dashboard-hero-status { display: flex; align-items: center; gap: 10px; }
.dashboard-hero-status strong,.dashboard-hero-status small { display: block; }
.dashboard-hero-status strong { color: #fff; font-size: 12px; }
.dashboard-hero-status small { margin-top: 2px; color: #87abc1; font-size: 10px; }
.dashboard-date { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: #b9d2e2; font-size: 11px; }
.card.news-carousel { margin: 16px 0; border-radius: var(--radius); }
.news-carousel-head { padding: 20px 22px 0; }
.news-slide { padding: 16px 22px 20px; }
.news-slide h3 { color: var(--ink); }
.news-carousel-dots { padding: 0 22px 18px; }
.metric-grid { gap: 14px; margin: 16px 0; }
.metric { position: relative; min-height: 126px; padding: 20px; overflow: hidden; }
.metric::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--cyan); content: ""; }
.dashboard-metric::after,.estimator-metric::after { display: none; }
.metric span { font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.metric strong { margin: 13px 0 6px; color: var(--ink); font-size: 30px; }
.dashboard-grid { grid-template-columns: minmax(0,1.5fr) minmax(290px,.55fr); gap: 16px; }
.dashboard-section { padding: 24px; }
.dashboard-section-head { margin-bottom: 18px; }
.module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.module-card { display: grid; min-height: 184px; grid-template-columns: auto 1fr auto; align-content: start; gap: 0 12px; padding: 18px; border-radius: 12px; background: var(--paper); }
.module-card::before { display: none; }
.module-card-icon { display: grid; width: 39px; height: 39px; grid-row: 1 / span 2; place-items: center; border-radius: 9px; color: var(--blue); background: color-mix(in srgb,var(--blue) 10%,var(--paper)); }
.module-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.module-card .module-label { align-self: center; margin: 0; color: var(--muted); }
.module-card h3 { grid-column: 2 / -1; align-self: end; margin: 3px 0 0; font-size: 15px; }
.module-card p { grid-column: 1 / -1; min-height: 0; margin: 16px 0; }
.module-card .text-button { grid-column: 1 / -1; align-self: end; margin-top: auto; }
.module-card[role="button"]:hover { border-color: color-mix(in srgb,var(--blue) 45%,var(--line)); box-shadow: 0 18px 34px rgba(10,43,67,.1); transform: translateY(-3px); }
.ticket-snapshot-row { padding: 13px 0; }
.coming-item { border: 1px solid var(--line); background: var(--soft); }

/* Module layouts */
.progress-intro,.lunch-intro,.helix-intro,.crm-hero,.estimator-intro { border-radius: 16px; }
.progress-tool,.settings-card,.estimator-editor,.estimator-lines { border-radius: var(--radius); }
.settings-menu,.lunch-tabs,.estimator-tabs { position: sticky; z-index: 2; top: 84px; border-color: var(--line); border-radius: 11px; background: color-mix(in srgb,var(--paper) 92%,transparent); box-shadow: 0 8px 24px rgba(10,36,56,.06); backdrop-filter: blur(12px); }
.settings-menu button,.lunch-tab,.estimator-tabs button { border-radius: 7px; }
.estimator-intro { border: 0; background: linear-gradient(112deg,#081f33,#0b3b5b 65%,#087ea8); }
.estimator-brand-mark { border-radius: 12px; }
.estimator-header { border-radius: var(--radius); }
.estimator-metric { border-color: var(--line); }
.estimator-tabs { padding: 6px; }
.estimator-tabs button { color: var(--muted); background: transparent; }
.estimator-tabs button:hover { color: var(--ink); background: var(--soft); }
.estimator-tabs button.active { color: #fff; background: var(--blue); box-shadow: 0 5px 14px rgba(0,126,168,.18); }
.estimate-line-button,.estimate-operation-card,.calculator-card,.reference-card,.machining-calc-row,.estimator-data-form fieldset,.recommendation-card { border-color: var(--line); background: var(--paper-raised); }
.estimate-line-button.active { border-color: color-mix(in srgb,var(--blue) 55%,var(--line)); background: color-mix(in srgb,var(--blue) 6%,var(--paper)); }
.estimator-subtotals div,.estimate-operation-total,.machining-result-strip span { border-color: var(--line); background: var(--soft); }
.calculator-empty { border-color: color-mix(in srgb,var(--blue) 35%,var(--line)); background: var(--soft); }
.lunch-dropzone { border-color: color-mix(in srgb,var(--blue) 45%,var(--line)); background: color-mix(in srgb,var(--blue) 4%,var(--paper)); }
.progress-empty { border-radius: var(--radius); background: var(--paper); }
.embedded-module { height: calc(100vh - 84px); margin: calc(clamp(22px,3vw,38px) * -1) calc(clamp(20px,3vw,42px) * -1) -60px; }

html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar { background: #071b2c; }
html[data-theme="dark"] .topbar { border-bottom-color: #1b3448; }
html[data-theme="dark"] .topbar h1,html[data-theme="dark"] .profile strong { color: #eaf4fb; }
html[data-theme="dark"] .topbar-icon-button { background: #102635; }
html[data-theme="dark"] .button.secondary { background: #1b3446; }
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select { background: #0d2130; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 78px minmax(0,1fr); }
  .sidebar { padding-inline: 9px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand img { width: 45px; height: 44px; }
  .brand-copy,.nav-label,.nav-section-title,.sidebar-foot div,.nav-mini-action,.nav-empty,.shortcut-remove { display: none; }
  .nav-link { justify-content: center; padding-inline: 10px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .topbar { min-height: 76px; padding: 13px 18px; }
  .topbar h1 { font-size: 23px; }
  .profile,.theme-toggle span,#logout-button { display: none; }
  .topbar-icon-button { width: 40px; padding: 0; }
  .content { padding: 20px 17px 42px; }
  .dashboard-hero { min-height: 0; align-items: flex-start; flex-direction: column; }
  .dashboard-hero-panel { width: 100%; min-width: 0; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.55fr) auto; }
  .toolbar-actions input,.toolbar-actions select { width: 100%; min-width: 0; }
  .settings-menu,.lunch-tabs,.estimator-tabs { top: 76px; }
}
@media (max-width: 620px) {
  .app-shell { grid-template-columns: 58px minmax(0,1fr); }
  .sidebar { padding: 10px 5px; }
  .brand { min-height: 54px; margin-bottom: 12px; }
  .brand img { width: 38px; height: 37px; }
  .sidebar-toggle { display: none; }
  .nav-link { min-height: 40px; border-radius: 8px; }
  .topbar-actions { gap: 6px; }
  .profile-avatar { width: 36px; height: 36px; margin-left: 0; }
  .notification-button { width: 36px; min-height: 36px; }
  .dashboard-hero { padding: 25px 22px; }
  .dashboard-hero h2 { font-size: 30px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { min-height: 108px; }
  .module-intro,.card,.dashboard-section { padding: 17px; }
  .login-view { padding: 16px; }
  .login-card { padding: 26px 23px 24px; }
  .login-copy h1 { font-size: 29px; }
  .toolbar-actions { grid-template-columns: 1fr; }
  .toolbar-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}