:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    #101827;

  background:
    #f3f5f7;
}

* {
  box-sizing:
    border-box;
}

body {
  margin:
    0;
  min-height:
    100vh;
}

button,
input,
select,
textarea {
  font:
    inherit;
}

button,
input,
select {
  min-height:
    48px;
}

button {
  cursor:
    pointer;
}

.topbar {
  position:
    sticky;
  top:
    0;
  z-index:
    40;

  display:
    flex;
  align-items:
    center;
  gap:
    14px;

  min-height:
    72px;
  padding:
    10px 18px;

  color:
    #fff;
  background:
    #101827;
}

.menu {
  width:
    48px;
  border:
    1px solid
    rgb(255 255 255 / 20%);
  border-radius:
    12px;
  color:
    #fff;
  background:
    transparent;
}

.brand {
  display:
    grid;
  flex:
    1;
}

.brand strong {
  letter-spacing:
    .08em;
}

.brand span {
  font-size:
    .8rem;
  opacity:
    .75;
}

.top-actions {
  display:
    flex;
  align-items:
    center;
  gap:
    12px;
}

.gold {
  border:
    0;
  border-radius:
    12px;
  padding:
    0 16px;
  font-weight:
    800;
  background:
    #f59e0b;
}

.drawer {
  position:
    fixed;
  inset:
    72px auto 0 0;
  z-index:
    30;

  width:
    286px;
  padding:
    20px;

  color:
    #fff;
  background:
    #182235;

  overflow:
    auto;
}

.slogan {
  margin-bottom:
    18px;
  color:
    #ffdc8a;
  font-weight:
    750;
}

.drawer nav {
  display:
    grid;
  gap:
    7px;
}

.drawer nav button,
.drawer > button {
  width:
    100%;
  border:
    0;
  border-radius:
    10px;
  padding:
    12px 14px;

  text-align:
    left;
  color:
    #fff;
  background:
    transparent;
}

.drawer button:hover,
.drawer button:focus-visible {
  outline:
    2px solid
    #ffdc8a;
}

main {
  max-width:
    1240px;
  margin-left:
    286px;
  padding:
    24px;
}

.panel {
  padding:
    24px;
  margin-bottom:
    22px;

  background:
    #fff;

  border:
    1px solid
    #e2e6eb;
  border-radius:
    20px;

  box-shadow:
    0 10px 34px
    rgb(16 24 39 / 7%);
}

.eyebrow {
  margin-bottom:
    6px;

  color:
    #8d6100;
  font-size:
    .72rem;
  font-weight:
    850;
  letter-spacing:
    .12em;
}

.stats,
.mode-grid {
  display:
    grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        150px,
        1fr
      )
    );
  gap:
    12px;
}

.stats article {
  padding:
    15px;

  border:
    1px solid
    #dfe4ea;
  border-radius:
    14px;
}

.stats span {
  display:
    block;
  margin-bottom:
    5px;

  color:
    #687386;
  font-size:
    .75rem;
}

.toolbar,
.scanner-actions {
  display:
    flex;
  flex-wrap:
    wrap;
  gap:
    10px;

  margin:
    18px 0;
}

.toolbar button,
.mode-grid button,
.scanner-actions button,
form button,
#enablePush {
  border:
    1px solid
    #cfd6df;
  border-radius:
    11px;
  padding:
    10px 14px;

  background:
    #fff;
}

.mode-grid button {
  min-height:
    70px;
  font-weight:
    750;
}

form {
  display:
    grid;
  gap:
    15px;
}

label {
  display:
    grid;
  gap:
    6px;

  font-weight:
    650;
}

input,
select,
textarea {
  width:
    100%;
  padding:
    11px 12px;

  border:
    1px solid
    #bbc5d1;
  border-radius:
    10px;

  background:
    #fff;
}

textarea {
  min-height:
    120px;
  resize:
    vertical;
}

video {
  width:
    100%;
  max-height:
    440px;

  border-radius:
    16px;
  background:
    #000;
}

.danger {
  color:
    #fff;
  background:
    #7f1d1d;
  border-color:
    #7f1d1d;
  font-weight:
    800;
}

.task {
  padding:
    13px;
  margin:
    8px 0;

  border:
    1px solid
    #dfe4ea;
  border-radius:
    12px;
}

.status {
  position:
    sticky;
  bottom:
    12px;

  padding:
    13px 16px;
  margin-top:
    15px;

  border-radius:
    12px;

  background:
    #101827;
  color:
    #fff;
}

.status:empty {
  display:
    none;
}

.status[data-type="error"] {
  background:
    #7f1d1d;
}

.status[data-type="success"] {
  background:
    #14532d;
}

.ai-answer {
  margin-top:
    16px;
  white-space:
    pre-wrap;
}

@media (
  max-width:
    860px
) {
  .drawer {
    transform:
      translateX(
        -105%
      );

    transition:
      transform
      .18s ease;
  }

  .drawer.open {
    transform:
      translateX(
        0
      );
  }

  main {
    margin-left:
      0;
    padding:
      14px;
  }

  .top-actions span {
    display:
      none;
  }
}

@media (
  prefers-reduced-motion:
    reduce
) {
  * {
    scroll-behavior:
      auto !important;
    transition:
      none !important;
  }
}

/* GIM_STAGE28_R33_EMPLOYEE_PROFILE_PHOTO_UI_V1 */

.employee-photo-card {
  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    center;

  gap:
    14px;

  padding:
    14px;

  margin:
    0 0 18px;

  border:
    1px solid
    #dfe4ea;

  border-radius:
    16px;

  background:
    #f8fafc;
}

.employee-avatar {
  width:
    84px;

  height:
    84px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    3px solid
    #f59e0b;

  border-radius:
    50%;

  background:
    #101827;

  color:
    #fff;

  font-size:
    1.25rem;

  font-weight:
    850;
}

.employee-avatar img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.employee-photo-copy {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}

.employee-photo-copy strong {
  font-size:
    1rem;
}

.employee-photo-copy span {
  color:
    #687386;

  font-size:
    .78rem;
}

.employee-photo-actions {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}

.employee-photo-actions button {
  min-height:
    48px;

  border:
    1px solid
    #cfd6df;

  border-radius:
    11px;

  padding:
    10px 12px;

  background:
    #fff;

  color:
    #087ff5;

  font-weight:
    750;
}

.employee-photo-actions button:first-child {
  border-color:
    #f59e0b;

  background:
    #f59e0b;

  color:
    #101827;
}

.employee-photo-actions button:disabled {
  opacity:
    .6;

  cursor:
    wait;
}

#profilePhotoStatus {
  grid-column:
    1 / -1;

  margin:
    0;
}

.stats strong {
  display:
    block;

  max-width:
    100%;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;
}

@media (
  max-width:
    520px
) {
  .employee-photo-card {
    grid-template-columns:
      72px 1fr;
  }

  .employee-avatar {
    width:
      72px;

    height:
      72px;
  }

  .employee-photo-actions {
    grid-template-columns:
      1fr;
  }
}

/* GIM_STAGE28_R33_3_ENTERPRISE_UI_HARDENING_V1 */

button {
  color:
    #101827;
}

button:disabled,
button[aria-disabled="true"] {
  opacity:
    .52;

  cursor:
    not-allowed;
}

.drawer button.active,
.drawer button[aria-current="page"] {
  background:
    rgb(255 255 255 / 12%);
}

.workflow-card {
  margin:
    18px 0;

  padding:
    16px;

  border:
    1px solid
    #dfe4ea;

  border-radius:
    14px;

  background:
    #fff;
}

.workflow-heading h2 {
  margin:
    0;
}

.workflow-summary {
  margin:
    7px 0 0;

  color:
    #526071;

  line-height:
    1.45;
}

.workflow-list {
  display:
    grid;

  gap:
    10px;

  margin:
    12px 0 20px;
}

.workflow-item,
.empty-state {
  min-width:
    0;

  padding:
    12px 14px;

  margin:
    0;

  border:
    1px solid
    #dfe4ea;

  border-radius:
    11px;

  background:
    #fff;
}

.workflow-item {
  display:
    grid;

  gap:
    4px;
}

.workflow-item strong,
.workflow-item span {
  min-width:
    0;

  overflow-wrap:
    anywhere;
}

.workflow-item span,
.empty-state {
  color:
    #526071;
}

.attendance-toolbar button {
  min-width:
    132px;
}

.mode-grid button.active,
.mode-grid button[aria-pressed="true"] {
  border-color:
    #f59e0b;

  box-shadow:
    inset 0 0 0 2px
    #f59e0b;
}

.camera-panel {
  display:
    grid;

  gap:
    10px;
}

#scannerCapability {
  margin-bottom:
    12px;
}

#aiSubmit,
#damageForm button[type="submit"] {
  border-color:
    #f59e0b;

  background:
    #f59e0b;

  color:
    #101827;

  font-weight:
    750;
}

.stats article {
  min-width:
    0;
}

#warehouseRole {
  display:
    block;

  max-width:
    100%;

  white-space:
    normal;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;

  line-height:
    1.15;

  font-size:
    clamp(
      .78rem,
      3.2vw,
      1.05rem
    );
}

@media (
  max-width:
    520px
) {
  .stats {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .stats article {
    padding:
      12px;
  }

  .attendance-toolbar {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;
  }

  .attendance-toolbar button {
    min-width:
      0;

    width:
      100%;
  }

  .scanner-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}