/* Shared product shell and the remaining independently included product views. */


.app-layout {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  min-height: 100vh;
  background: var(--surface-subtle);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--border-subtle);
  padding: 25px 15px 18px;
  z-index: 25;
}

.app-brand {
  display: block;
  margin: 0 17px 26px;
}

.app-brand .brand-logo {
  width: 82px;
}

.app-space-caption {
  padding: 0 17px;
  margin-bottom: 19px;
  color: var(--text-tertiary);
  font-size:var(--font-caption);
}

.app-space-caption strong {
  display: block;
  color: var(--text-tertiary);
  font-weight: 400;
  font-size:var(--font-small);
  margin-bottom: 5px;
}

.app-navigation {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-nav-label {
  font-size:var(--font-caption);
  color: var(--border-strong);
  margin: 23px 0 9px;
  padding-left: 17px;
}

.app-navigation button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  text-align: left;
  padding: 11px 15px;
  font-size:var(--font-small);
  line-height: 1.5;
  white-space: nowrap;
}

.app-navigation button:hover {
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.app-navigation button[aria-current="page"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.app-navigation svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.app-sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--surface-hover);
  padding: 17px 14px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.app-sidebar-bottom svg {
  width: 14px;
  height: 14px;
}

.app-content {
  min-width: 0;
}

.app-topbar {
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 36px;
  border-bottom: 1px solid var(--border-subtle);
  background: #ffffffed;
  backdrop-filter: blur(14px);
}

.app-topbar-title {
  font-size:var(--font-small);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 11px;
}

.app-topbar-title span:last-child {
  color: var(--text-secondary);
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  padding: 0;
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.app-avatar {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size:var(--font-caption);
}

.app-mobile-brand {
  display: none;
}

.dashboard-main {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 36px 56px;
}

.dashboard-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.dashboard-title h1 {
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.dashboard-title p {
  margin: 0;
  color: var(--text-tertiary);
  font-size:var(--font-small);
  line-height: 1.8;
}

.dashboard-card {
  background: #fff;
  border: 1px solid var(--surface-selected);
  border-radius: 14px;
  overflow: hidden;
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 21px 23px 0;
  margin-bottom: 8px;
}

.card-heading h2 {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.card-heading>span {
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.card-subtitle {
  font-size:var(--font-caption);
  color: var(--text-tertiary);
  margin: 0 23px;
}

.tasks-container {
  padding: 10px 21px 22px;
  min-height: 219px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  min-height: 240px;
}

.empty-state .empty-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  border-radius: 13px;
  margin-bottom: 16px;
}

.empty-state .empty-icon svg {
  width: 20px;
  height: 20px;
}

.empty-state h2, .empty-state h3 {
  font-size:var(--font-body);
  margin: 0 0 8px;
}

.empty-state p {
  font-size:var(--font-small);
  color: var(--text-tertiary);
  line-height: 1.9;
  max-width: 335px;
  margin: 0 0 19px;
}

.empty-state.compact {
  min-height: 204px;
  padding: 25px 9px;
}

.empty-state.compact h3 {
  font-size:var(--font-small);
}

.empty-state.compact p {
  font-size:var(--font-caption);
  margin-bottom: 15px;
}

.record-list {
  margin: 0;
  padding: 6px 23px 14px;
  list-style: none;
}

.record-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface-hover);
  font-size:var(--font-small);
  color: var(--text-tertiary);
}

.record-list li:last-child {
  border-bottom: 0;
}

.record-list time {
  font-size:var(--font-caption);
  color: var(--border-strong);
  white-space: nowrap;
}

.record-list .list-empty {
  display: block;
  padding: 20px 0;
  color: var(--border-strong);
  font-size:var(--font-caption);
}





.workspace-panel {
  padding: 25px;
}

.workspace-panel h2 {
  font-size:var(--font-reading);
  margin: 0 0 11px;
}

.workspace-panel>p {
  font-size:var(--font-small);
  color: var(--text-tertiary);
  line-height: 1.9;
  max-width: 680px;
  margin: 0 0 24px;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 18px 23px;
}

.filter-tabs {
  display: flex;
  gap: 5px;
}

.filter-tabs button {
  border: 0;
  border-radius: 7px;
  padding: 7px 12px;
  background: none;
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.filter-tabs button[aria-pressed="true"] {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(240px,.85fr);
  gap: 20px;
}

.company-form {
  padding: 25px;
}

.company-form h2 {
  font-size:var(--font-reading);
  margin-bottom: 22px;
}

.company-file-zone {
  border: 1px dashed var(--border-default);
  border-radius: 11px;
  padding: 19px;
  text-align: center;
  margin-top: 6px;
}

.company-file-zone p {
  font-size:var(--font-caption);
  color: var(--border-strong);
  margin: 10px 0 0;
}

.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 9px;
  background: var(--surface-hover);
  border-radius: 6px;
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.company-save-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 23px;
}

.company-save-row small {
  font-size:var(--font-caption);
  color: #b5a18f;
}

.prep-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.prep-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size:var(--font-small);
  color: var(--text-tertiary);
}

.prep-list svg {
  width: 15px;
  height: 15px;
  color: var(--border-strong);
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.skill-card {
  padding: 25px;
}

.skill-card>svg {
  width: 21px;
  height: 21px;
  color: var(--text-tertiary);
  margin-bottom: 23px;
}

.skill-card h2 {
  font-size: 15px;
  margin-bottom: 11px;
}

.skill-card p {
  font-size:var(--font-small);
  color: var(--text-tertiary);
  line-height: 1.9;
  margin-bottom: 22px;
}

.settings-panel {
  max-width: 700px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 0;
  border-bottom: 1px solid var(--surface-hover);
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row strong {
  display: block;
  font-size:var(--font-body);
  font-weight: 500;
  margin-bottom: 5px;
}

.settings-row p {
  font-size:var(--font-caption);
  color: var(--text-tertiary);
  margin: 0;
}

.settings-row>span {
  font-size:var(--font-caption);
  color: var(--text-tertiary);
}

.dashboard-note {
  margin: 24px 0 0;
  font-size:var(--font-caption);
  color: var(--border-strong);
}

@media(max-width:1150px) {
  .app-layout {
    grid-template-columns: 188px minmax(0,1fr);
  }

  .app-topbar {
    padding-inline: 26px;
  }

  .dashboard-main {
    padding: 28px 26px 48px;
  }

  .card-heading {
    padding-inline: 19px;
  }

  .company-layout {
    grid-template-columns: minmax(0,1.3fr) minmax(215px,.9fr);
  }
}

@media(max-width:980px) {

  .company-layout {
    grid-template-columns: 1fr;
  }

  .skill-grid {
    grid-template-columns: 1fr;
  }

  .skill-card {
    display: block;
  }
}

@media(max-width:760px) {
  .app-layout {
    display: flex;
    flex-direction: column;
  }

  .app-sidebar {
    order: 1;
    position: sticky;
    top: 54px;
    height: auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 7px 15px;
    background: #fff;
  }

  .app-brand, .app-space-caption, .app-nav-label, .app-sidebar-bottom {
    display: none;
  }

  .app-navigation {
    flex-direction: row;
    overflow: auto;
    gap: 4px;
    scrollbar-width: none;
  }

  .app-navigation::-webkit-scrollbar {
    display: none;
  }

  .app-navigation button {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 10px;
    gap: 6px;
    font-size:var(--font-caption);
  }

  .app-navigation svg {
    width: 14px;
    height: 14px;
  }

  .app-content {
    display: block;
  }

  .app-topbar {
    order: 0;
    height: 54px;
    padding: 0 20px;
    background: #fff;
  }

  .app-mobile-brand {
    display: block;
  }

  .app-mobile-brand .brand-logo {
    width: 78px;
  }

  .app-topbar-title {
    display: none;
  }

  .app-topbar-right {
    gap: 10px;
  }

  .app-user>span:last-child {
    display: none;
  }

  .dashboard-main {
    order: 2;
    padding: 27px 20px 42px;
  }

  .dashboard-title {
    gap: 14px;
    margin-bottom: 21px;
  }

  .dashboard-title h1 {
    font-size: 24px;
  }

  .dashboard-title p {
    font-size:var(--font-caption);
  }

  .card-heading {
    padding: 19px 17px 0;
  }

  .card-heading h2 {
    font-size:var(--font-body);
  }

  .card-subtitle {
    margin-inline: 17px;
    font-size:var(--font-caption);
  }

  .tasks-container {
    padding: 9px 13px 17px;
    min-height: 196px;
  }

  .empty-state.compact {
    padding: 24px 5px;
    min-height: 176px;
  }

  .empty-state.compact h3 {
    font-size:var(--font-caption);
  }

  .empty-state.compact p {
    font-size:var(--font-caption);
  }

  .record-list {
    padding-inline: 17px;
  }

  .record-list li {
    font-size:var(--font-caption);
    line-height: 1.8;
  }

  .record-list time {
    font-size:var(--font-caption);
  }

  .record-list .list-empty {
    font-size:var(--font-caption);
  }

  .panel-toolbar {
    padding: 15px 17px;
    gap: 12px;
  }

  .filter-tabs button {
    padding: 6px 9px;
    font-size:var(--font-caption);
  }

  .empty-state {
    min-height: 270px;
    padding: 32px 20px;
  }

  .dashboard-note {
    font-size:var(--font-caption);
  }
}

@media(max-width:380px) {

  .dashboard-title h1 {
    font-size: 22px;
  }

  .app-topbar-right {
    gap: 8px;
  }
}

/* Personal business navigation stays beside the sidebar toggle in one row. */
.portal-page.dashboard-page[data-experience="personal"] { --workspace-header-height:54px; }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar { height:var(--workspace-header-height); min-height:54px; flex-wrap:nowrap; align-content:normal; padding-top:0; padding-bottom:0; gap:10px; }
.portal-page.dashboard-page[data-experience="personal"] .sidebar-workbench { display:block; margin-bottom:6px; }
.portal-page.dashboard-page[data-experience="personal"] .sidebar-workbench>button { min-width:0; padding:10px 12px; }
.portal-page.dashboard-page[data-experience="personal"].workbench-open .sidebar-workbench>button { background:var(--surface-hover); color:var(--text-primary); }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation { display:flex; order:0; flex:1 1 0; flex-basis:0; min-width:0; align-self:stretch; align-items:stretch; height:auto; gap:2px; margin:0; padding:0; border:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; }
.portal-page.dashboard-page[data-experience="personal"] .personal-workbench-navigation::-webkit-scrollbar { display:none; }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button { position:relative; flex:0 0 auto; min-width:max-content; min-height:44px; padding:0 11px; border:0; border-radius:0; background:transparent; color:var(--text-secondary); font-size:13px; line-height:1.5; white-space:nowrap; }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button:hover { color:var(--text-primary); background:var(--surface-hover); }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button[aria-current="page"] { color:var(--text-primary); font-weight:500; }
.portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button[aria-current="page"]:after { content:''; position:absolute; height:2px; left:11px; right:11px; bottom:0; border-radius:2px; background:var(--text-primary); }
@media(max-width:1100px) {
 .portal-page.dashboard-page[data-experience="personal"] .app-topbar { gap:6px; }
 .portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button { padding-inline:10px; }
}
@media(max-width:760px) {
 .portal-page.dashboard-page[data-experience="personal"] .app-topbar { height:auto; min-height:54px; padding-top:max(6px,env(safe-area-inset-top)); padding-bottom:6px; gap:4px; }
 .portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation { min-height:42px; }
 .portal-page.dashboard-page[data-experience="personal"] .app-topbar .personal-workbench-navigation>button { min-height:42px; padding-inline:10px; font-size:13px; }
 .portal-page.dashboard-page[data-experience="personal"].workbench-open .workspace-messages-button>span { display:none; }
}