@layer workspace {
  /*=========================
     Table of Contents
  =========================*/
  /*
     32   Workspace Layout
     41   Workspace Shell
     51   Workspace Content
     67   Mobile Safe Area
     76   Workspace Navbar
     116  Navbar Actions
     124  Icon Button
     167  User Menu
     222  Menu Group Container
     243  Menu Item
     264  Icon
     272  Icon Wrap (badge anchor)
     279  Hover
     286  Active
     293  Disabled
     301  Mobile Navigation
     307  Mobile Item
     337  Hover
     343  Active
     359  Disabled
     366  Responsive
     369  Intermediate (Tablet)
     485  Desktop
  */

  /*=========================
   Workspace Layout
=========================*/
  .workspace-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
  }
  /*=========================
   Workspace Shell
=========================*/
  .workspace-shell {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
  }
  /*=========================
   Workspace Content
=========================*/
  .workspace-content {
    flex: 1;
    width: 100%;
    min-width: 0;
    background: var(--background);
    overflow: auto;
  }
  .workspace-main {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding: clamp(1.5rem, 2vw, 2.5rem);
  }
  /*=========================
   Mobile Safe Area
=========================*/
  @media (max-width: 768px) {
    .workspace-main {
      padding: var(--space-4);
      padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
  }
  /*=========================
   Workspace Navbar
=========================*/
  .workspace-navbar {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface);
    border-bottom: var(--border-width) solid var(--border-color);
  }
  .workspace-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    max-width: 1500px;
    height: 100%;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 2vw, 2.5rem);
  }
  .workspace-navbar-greeting {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
  }
  .workspace-navbar-greeting strong {
    color: var(--text);
  }
  .workspace-navbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  .workspace-navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  /*=========================
   Navbar Actions
=========================*/
  .workspace-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  /*=========================
   Icon Button
=========================*/
  .workspace-icon-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text);
    border: var(--border-width) solid var(--border-color);
    transition:
      background var(--motion-hover),
      color var(--motion-hover),
      border-color var(--motion-hover),
      box-shadow var(--motion-hover);
  }
  .workspace-icon-button:hover {
    background: var(--primary-10);
    color: var(--primary-100);
    border-color: var(--primary-20);
    box-shadow: var(--shadow-xs);
  }
  .workspace-icon-button-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: var(--white);
    font-size: 10px;
    font-weight: var(--font-bold);
    line-height: 1;
  }
  /*=========================
   User Menu
=========================*/
  .workspace-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface);
    border: var(--border-width) solid var(--border-color);
    transition:
      border-color var(--motion-hover),
      box-shadow var(--motion-hover);
  }
  .workspace-user-menu:hover {
    border-color: var(--primary-20);
    box-shadow: var(--shadow-xs);
  }
  .workspace-user-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--primary-gradient);
    color: var(--white-100);
    font-weight: var(--font-bold);
  }
  .workspace-user-info {
    display: flex;
    flex-direction: column;
  }
  .workspace-user-info strong {
    font-size: var(--text-sm);
    color: var(--text);
  }
  .workspace-user-info small {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }
  .workspace-menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-12);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .workspace-menu::-webkit-scrollbar {
    display: none;
  }
  /*=========================
   Menu Group Container
=========================*/
  .workspace-menu-group {
    height: 104px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }
  .workspace-menu-group:first-child {
    flex: 1;
  }
  .workspace-menu-group:first-child .workspace-menu-item {
    flex: 1;
    width: auto;
  }
  /*=========================
   Menu Item
=========================*/
  .workspace-menu-item {
    width: 160px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition:
      background var(--motion-hover),
      color var(--motion-hover);
  }
  .workspace-menu-item:not(:last-child) {
    border-right: var(--border-width) solid var(--border-color);
  }
  /*=========================
   Icon
=========================*/
  .workspace-menu-item .icon {
    font-size: 30px;
    line-height: 1;
    color: inherit;
  }
  /*=========================
   Icon Wrap (badge anchor)
=========================*/
  .workspace-menu-item-icon-wrap {
    position: relative;
    display: inline-flex;
  }
  /*=========================
   Hover
=========================*/
  .workspace-menu-item:hover {
    background: var(--surface-hover);
    color: var(--text);
  }
  /*=========================
   Active
=========================*/
  .workspace-menu-item.active {
    background: var(--primary-gradient);
    color: var(--white);
  }
  /*=========================
   Disabled
=========================*/
  .workspace-menu-item.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
  }
  /*=========================
   Mobile Navigation
=========================*/
  .workspace-mobile-nav {
    display: none;
  }
  /*=========================
   Mobile Item
=========================*/
  .workspace-mobile-item {
    flex: 1;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--font-medium);
    border-radius: var(--radius-lg);
    transition:
      background var(--motion-hover),
      color var(--motion-hover);
  }
  .workspace-mobile-item .icon {
    font-size: 24px;
    line-height: 1;
    color: inherit;
  }
  .workspace-mobile-item span:last-child {
    max-width: 72px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /*=========================
   Hover
=========================*/
  .workspace-mobile-item:hover {
    color: var(--text);
  }
  /*=========================
   Active
=========================*/
  .workspace-mobile-item.active {
    color: var(--primary-100);
    background: transparent;
  }
  .workspace-mobile-item.active .icon {
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-10);
    border-radius: var(--radius-full);
  }
  /*=========================
   Disabled
=========================*/
  .workspace-mobile-item.disabled {
    opacity: 0.45;
    pointer-events: none;
  }
  /*=========================
   Responsive
=========================*/
  /*=========================
   Intermediate (Tablet)
=========================*/
  @media (min-width: 769px) and (max-width: 1024px) {
    .workspace-navbar-greeting {
      display: none;
    }
    .workspace-navbar-left > .btn {
      display: none;
    }
    .workspace-menu {
      gap: var(--space-3);
      margin-bottom: var(--space-8);
    }
    .workspace-menu-group {
      height: 88px;
    }
    .workspace-menu-item {
      width: 120px;
      gap: var(--space-2);
      font-size: var(--text-xs);
      padding-inline: var(--space-2);
      text-align: center;
    }
    .workspace-menu-item .icon {
      font-size: 24px;
    }
  }
  @media (max-width: 768px) {
    /* ===============================
       Navbar Mobile
    =============================== */
    .workspace-navbar {
      height: 64px;
    }
    .workspace-navbar-inner {
      padding-inline: var(--space-4);
    }
    .workspace-navbar-left {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    .workspace-navbar-brand {
      flex: 1;
    }
    .workspace-navbar-greeting {
      display: none;
    }
    .workspace-navbar-left > .btn {
      display: none;
    }
    /* ===============================
       Actions Mobile
    =============================== */
    .workspace-navbar-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    /* Collapses to an icon-only circle, same footprint as
       .workspace-icon-button (the notification bell) right next to it —
       the full "Plano Premium até DD/MM/AAAA" text doesn't fit next to
       the bell + avatar on a phone-width navbar. Expiration date is
       still one tap away on the membership page this links to. */
    .premium-banner {
      width: 42px;
      height: 42px;
      min-height: 0;
      padding: 0;
      justify-content: center;
      gap: 0;
    }
    .premium-banner-content {
      display: none;
    }
    .workspace-user-info {
      display: none;
    }
    .workspace-user-menu {
      width: 42px;
      height: 42px;
      padding: 0;
      justify-content: center;
    }
    .workspace-user-avatar {
      width: 34px;
      height: 34px;
    }
    /* ===============================
       Hide Desktop Menu
    =============================== */
    .workspace-menu {
      display: none;
    }
    /* ===============================
       Bottom Navigation
    =============================== */
    .workspace-mobile-nav {
      height: calc(72px + env(safe-area-inset-bottom));
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--z-sticky);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: var(--space-2) var(--space-3)
        calc(var(--space-2) + env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: var(--border-width) solid var(--border-color);
      box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
    }
  }
  /*=========================
   Desktop
=========================*/
  @media (min-width: 769px) {
    .workspace-mobile-nav {
      display: none;
    }
  }
}