/* ==========================================================================
   kdijital - base theme
   Company colors: navy blue (dominant) + orange (accent).
   ========================================================================== */

:root {
  /* Navy blue - dominant brand color */
  --navy-900: #081733;
  --navy-800: #0d2650;
  --navy-700: #123163;
  --navy-600: #1a4287;
  --navy: var(--navy-800);

  /* Orange - brand accent */
  --orange-600: #d95a06;
  --orange-500: #f97316;
  --orange-100: #ffedd5;

  /* Neutrals */
  --page-bg: #f4f5f7; /* light gray that reads as white but rests the eyes */
  --surface: #ffffff;
  --surface-alt: #eef1f5;
  --border: #e2e6ec;
  --text: #1e2836;
  --text-muted: #64748b;

  /* Layout metrics */
  --navbar-height: 64px;
  --sidebar-width: 250px;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(8, 23, 51, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy-600);
}

/* --------------------------------------------------------------------------
   Navbar
   A 3-column grid keeps the centered logo perfectly centered no matter how
   wide the left/right button groups grow.
   -------------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--navbar-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: var(--navy);
  color: #fff;
  /* A hairline closing the bar. The header used to meet the sidebar at a
     corner; the sidebar now floats clear of it, but the line still gives the
     navy edge a definite boundary. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 12px rgba(8, 23, 51, 0.18);
}

.navbar__left {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

.navbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  justify-self: end;
  min-width: 0;
}

.navbar__logo {
  display: flex;
  align-items: center;
  justify-self: center;
}

.navbar__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: #e7edf8;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.nav-button--primary {
  background: var(--orange-500);
  color: #fff;
}

.nav-button--primary:hover {
  background: var(--orange-600);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Sidebar + content
   -------------------------------------------------------------------------- */

.layout {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* A navy panel one step darker than the header (navy-900 against navy-800). It
   floats as a rounded card held away from the header above and the footer below,
   with the accent running down the edge the content touches. */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  /* The panel fills the column between its two gaps - the layout stretches its
     items - so the space under the header is always matched by the space above
     the footer, however tall the content is. */
  margin: 1.25rem 0 1.25rem 1.25rem;
  padding: 1.25rem 0.9rem;
  background: var(--navy-900);
  color: #e7edf8;
  border-radius: var(--radius);
  border-right: 3px solid var(--orange-500);
  /* A drop shadow, rather than the old inset seam shadow, because the panel is
     detached: it reads as lifted off the page instead of meeting the header. */
  box-shadow: 0 10px 24px rgba(8, 23, 51, 0.18);
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2rem 1.75rem;
  background: var(--page-bg);
}

/* --------------------------------------------------------------------------
   Content building blocks
   -------------------------------------------------------------------------- */

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  color: var(--navy-700);
}

.hint {
  color: var(--text-muted);
}

.hint a {
  color: var(--orange-600);
  font-weight: 600;
}

.messages {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--navy-600);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.message.success {
  border-left-color: #16a34a;
}

.message.warning {
  border-left-color: var(--orange-500);
}

.message.error {
  border-left-color: #dc2626;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .navbar {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .navbar__logo img {
    height: 30px;
  }

  .nav-button {
    height: 34px;
    padding: 0 0.55rem;
    font-size: 0.8rem;
  }

  .navbar__right {
    gap: 0.25rem;
  }

  /* Stack the sidebar above the content on small screens. */
  .layout {
    flex-direction: column;
  }

  .sidebar {
    flex: none;
    /* The card fills the stacked column, so the side margins replace the one
       that held it off the left edge. Its height follows the content now that
       the content sits below it rather than beside it. */
    width: auto;
    min-height: 0;
    margin: 1rem 1rem 0;
    /* The frame follows the layout once the columns stack. */
    border-right: none;
    border-bottom: 3px solid var(--orange-500);
  }

  .sidebar__nav {
    position: static;
  }

  .content {
    padding: 1.25rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   Navbar authentication
   -------------------------------------------------------------------------- */

.navbar__logout {
  display: inline-flex;
  margin: 0;
}

/* <button> inherits no font/colour, so line it up with the anchor buttons. */
.navbar__logout .nav-button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Avatars
   A round, navy disc with the initial, used wherever a picture may be missing.
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: 2rem;
  border: 3px solid var(--orange-500);
}

/* --------------------------------------------------------------------------
   Sidebar identity
   The usergroup, its picture, the user and their Görevi, above the product
   list and closed by an accent rule in the same orange as the item rules.
   -------------------------------------------------------------------------- */

.sidebar__identity {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.sidebar__group {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--orange-500);
  background: var(--navy-700);
  color: #e7edf8;
  font-size: 1.6rem;
  font-weight: 700;
  overflow: hidden;
}

.sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar__user {
  margin: 0;
  font-weight: 700;
  color: #fff;
  word-break: break-word;
}

.sidebar__title {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(231, 237, 248, 0.72);
}

/* The manager's way into a usergroup page: a pill per usergroup, carrying its
   name rather than a generic label. */
.sidebar__manage {
  margin-top: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(249, 115, 22, 0.55);
  border-radius: 999px;
  color: #ffd9b8;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__manage:hover {
  background: rgba(249, 115, 22, 0.16);
  color: #fff;
}

/* The usergroup whose page is open keeps a filled pill. */
.sidebar__manage--active {
  background: rgba(249, 115, 22, 0.16);
  border-color: var(--orange-500);
  color: #fff;
}

.sidebar__rule {
  height: 2px;
  margin: 1rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.45);
}

/* --------------------------------------------------------------------------
   A usergroup's own page
   Its identity, a summary of what it is, and the options its manager holds.
   -------------------------------------------------------------------------- */

.usergroup-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.usergroup-head .page-title,
.usergroup-head .page-lead {
  margin: 0;
}

.summary {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
}

.summary__row dt {
  margin: 0;
  font-weight: 600;
  color: var(--text-muted);
}

.summary__row dd {
  margin: 0;
}

.card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

/* Sticks under the navbar, clearing the panel's top margin and padding. */
.sidebar__nav {
  position: sticky;
  top: calc(var(--navbar-height) + 2.5rem);
  display: grid;
  gap: 0.2rem;
}

.sidebar__heading {
  margin: 0 0 0.75rem;
  padding: 0 0.4rem 0.6rem;
  /* The brand accent anchors the section title above the item rules. */
  border-bottom: 2px solid var(--orange-500);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --text-muted is tuned for light surfaces and vanishes on navy. */
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: #e7edf8;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* The orange marker is a pseudo-element so it never shifts the text. */
.sidebar__link::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease;
}

/* Same hover language as the navbar buttons: a wash of white on navy. */
.sidebar__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__link:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

.sidebar__link--active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sidebar__link--active::before {
  background: var(--orange-500);
}

/* The rule under every item - faint orange at rest, full strength on hover and
   for the product being viewed. A pseudo-element keeps it out of the layout, so
   items never shift as the rule strengthens. The resting alpha is higher than it
   would be on a light surface, because navy swallows a thin line. */
.sidebar__link::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  left: 0.75rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.45);
  transition: background 0.15s ease;
}

.sidebar__link:hover::after {
  background: var(--orange-500);
}

.sidebar__link--active::after {
  background: var(--orange-600);
}

/* A product's modules hang under its own link, so the panel is a tree:
   products, then what the account may open inside them. The rail repeats the
   seam colour, which is what makes the items read as belonging to the product
   above them rather than as products of their own. */
.sidebar__submenu {
  display: grid;
  gap: 0.1rem;
  margin: 0.15rem 0 0.4rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
}

.sidebar__sublink {
  position: relative;
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  /* A step quieter than the product link it hangs under. */
  color: rgba(231, 237, 248, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__sublink:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__sublink:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* The module being viewed marks itself with the accent bar alone: it keeps the
   product's language without carrying its weight. */
.sidebar__sublink--active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__sublink--active::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--orange-500);
}

/* --------------------------------------------------------------------------
   Sidebar branches
   The tree folds without a script: a branch is a ``<details>``, so the state
   the server renders is the state the browser paints on its first frame. The
   product's own link stays in the row - the name still opens the product - and
   the caret at the end of the row is the fold control. A submenu such as
   *Girişler* has no page, so its row is a label rather than a link.
   -------------------------------------------------------------------------- */

.sidebar__head {
  display: flex;
  align-items: center;
  /* The caret replaces the marker a ``summary`` draws by itself. */
  list-style: none;
  cursor: pointer;
}

.sidebar__head::-webkit-details-marker {
  display: none;
}

.sidebar__head:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* The product row borrows its look from the leaf links: the link inside it
   carries the wash, the marker and the underline, and takes the whole row bar
   the caret. */
.sidebar__head > .sidebar__link {
  flex: 1 1 auto;
  min-width: 0;
}

/* A submenu row has no link to carry that look, so the row itself does. */
.sidebar__head--group {
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.sidebar__head--group:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* A submenu is a container, not a page: it reads as a section label above the
   modules it carries. */
.sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__head--group:hover .sidebar__label {
  color: #fff;
}

/* The fold control: a corner turned into a chevron, so it needs no icon file.
   Its padding is what makes it a target in its own right, next to the link. */
.sidebar__caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  color: rgba(231, 237, 248, 0.6);
  transition: color 0.15s ease;
}

.sidebar__caret::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* Points right while the branch is folded, down once it is open. */
  transform: rotate(-45deg);
}

.sidebar__branch[open] > .sidebar__head > .sidebar__caret::before {
  transform: rotate(45deg);
}

.sidebar__head:hover .sidebar__caret {
  color: #fff;
}

/* A submenu's own list sits one level deeper, with a fainter rail than the
   one the product opens. */
.sidebar__submenu .sidebar__submenu {
  margin: 0.1rem 0 0.2rem;
  border-left-color: rgba(255, 255, 255, 0.1);
}

/* When an account has no usergroup for a product, the tree says so instead of
   offering links that could not open. */
.sidebar__hint {
  margin: 0.2rem 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  color: rgba(231, 237, 248, 0.6);
}

/* --------------------------------------------------------------------------
   Sign-in form
   -------------------------------------------------------------------------- */

.login-card {
  max-width: 360px;
}

.login-card h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--navy-700);
}

.field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(26, 66, 135, 0.12);
}

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--orange-500);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.button-primary:hover {
  background: var(--orange-600);
}

/* --------------------------------------------------------------------------
   Content pages (Ürünlerimiz, Yardım)
   -------------------------------------------------------------------------- */

.page-header {
  margin-bottom: 1.5rem;
}

.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.page-title {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  color: var(--navy-700);
}

.page-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
}

/* A heading for a section of a page, under the page header. */
.section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange-500);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(8, 23, 51, 0.1);
}

.card__title {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  color: var(--navy-800);
}

.card__meta {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-600);
}

.prose {
  max-width: 62ch;
}

.prose h2 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.05rem;
  color: var(--navy-700);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Secondary and danger buttons
   -------------------------------------------------------------------------- */

.button-secondary,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy-700);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--navy-600);
}

.button-danger {
  border-color: #f0c4c4;
  color: #b91c1c;
}

.button-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.field__error {
  margin: 0;
  font-size: 0.8rem;
  color: #b91c1c;
}

/* --------------------------------------------------------------------------
   Mail
   -------------------------------------------------------------------------- */

.mail {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.mail__folders {
  position: sticky;
  top: calc(var(--navbar-height) + 2rem);
  display: grid;
  gap: 0.15rem;
}

.mail__compose {
  margin-bottom: 0.75rem;
}

.mail__folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.mail__folder:hover {
  background: var(--surface-alt);
}

.mail__folder--active {
  background: var(--surface-alt);
  box-shadow: inset 3px 0 0 var(--orange-500);
}

.mail__count {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--navy-700);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.mail__main {
  min-width: 0;
}

.mail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mail__search {
  display: flex;
  gap: 0.4rem;
}

.mail__search input {
  height: 36px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.875rem;
}

.mail__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.mail__inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.mail__table {
  width: 100%;
  border-collapse: collapse;
}

.mail__row {
  border-bottom: 1px solid var(--border);
}

.mail__row:hover {
  background: var(--surface-alt);
}

.mail__row--unread .mail__subject {
  font-weight: 700;
}

.mail__row td {
  padding: 0.65rem 0.5rem;
  vertical-align: top;
}

.mail__cell-check,
.mail__cell-star {
  width: 1.75rem;
}

.mail__cell-date {
  width: 6.5rem;
  text-align: right;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mail__star {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: #cbd5e1;
}

.mail__star--on {
  color: var(--orange-500);
}

.mail__subject {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: none;
}

.mail__subject:hover {
  color: var(--orange-600);
}

.mail__meta {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mail__from {
  font-weight: 600;
}

.mail__tag {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: var(--orange-100);
  color: var(--orange-600);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mail__snippet {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mail__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.mail__pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mail__message {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.mail__meta-grid {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.mail__meta-grid dt {
  color: var(--text-muted);
  font-weight: 600;
}

.mail__meta-grid dd {
  margin: 0;
}

.mail__body {
  margin: 0;
  padding: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.mail__section-title {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.mail__attachments ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 900px) {
  .mail {
    grid-template-columns: 1fr;
  }

  .mail__folders {
    position: static;
  }
}