/* Dashboard (after login): fill the width of whatever container the
   page/theme puts it in. The 100vw "breakout" trick used before broke
   badly here because this sits inside Elementor's nested flex/column
   wrappers — vw math doesn't account for that nesting, which is what
   shifted and clipped the layout. Real full-browser-width needs to be
   set on the page itself (see note below), not forced from inside. */
#alkb-staff-root.alkb-root {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 10px 0 30px;
  padding: 16px;
  background: radial-gradient(circle at 15% 10%, #eaf2fb 0%, #f7f9fc 45%, #f2f5fa 100%);
}

/* Login screen: centered card, no viewport-breakout hack (same reason
   as above — it broke inside the page builder's nested containers). */
.alkb-staff-login-wrap {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
/* #alkb-staff-root's own margin/padding (above) is meant for the dashboard
   table view — on the login screen it stacked on top of .alkb-staff-login-wrap's
   own padding, doubling the space before the card. Zeroed out here, only
   while the login screen is showing (background/min-height stay, so the
   full-page gradient still fills behind the centered card). */
#alkb-staff-root.alkb-root.alkb-login-mode {
  margin: 0;
  padding: 0;
}
.alkb-staff-login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(15,23,42,.10);
  border-top: 4px solid var(--blue);
  text-align: center;
}
.alkb-staff-login-badge {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: #fff; padding: 8px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(15,23,42,.14);
}
.alkb-staff-login-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* icon sizing — inline SVGs have no intrinsic size, so every place an
   ICON.* string is dropped in needs an explicit box, or it renders huge */
.alkb-staff-login-card .alkb-input-icon svg { width: 16px; height: 16px; display: block; }
.alkb-btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.alkb-btn-icon svg { width: 15px; height: 15px; }
.alkb-title-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-left: 6px; }
.alkb-title-icon svg { width: 20px; height: 20px; }
.alkb-panel-close svg { width: 15px; height: 15px; }
.alkb-icon-btn svg { width: 15px; height: 15px; display: block; }
.alkb-staff-login-card h2 { margin: 0 0 6px; color: var(--blue); font-size: 21px; }
.alkb-staff-login-card p.hint { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.alkb-staff-login-card .alkb-field { margin-bottom: 16px; text-align: right; }
.alkb-staff-login-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.alkb-staff-login-card .alkb-input-wrap { position: relative; }
.alkb-staff-login-card .alkb-input-icon {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-size: 14px; opacity: .6; pointer-events: none;
}
.alkb-staff-login-card input {
  width: 100%; padding: 12px 40px 12px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: inherit; font-size: 15px; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.alkb-staff-login-card input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,96,169,.12);
}
.alkb-staff-login-card .alkb-btn.primary {
  padding: 13px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
  transition: transform .1s ease, box-shadow .15s ease;
}
.alkb-staff-login-card .alkb-btn.primary:hover { box-shadow: 0 8px 18px rgba(8,96,169,.28); transform: translateY(-1px); }

/* Astra's theme-level form/button spacing (margin on inputs/buttons by
   default) was adding extra vertical gap here — reset explicitly, scoped
   only to elements inside this login card. */
.alkb-staff-login-card input,
.alkb-staff-login-card #sErr,
.alkb-staff-login-card #sLoginBtn {
  margin: 0 !important;
}
.alkb-staff-login-card #sErr {
  padding: 0 !important;
  text-align: right !important;
  min-height: 0 !important;
}
@media (max-width: 480px) {
  .alkb-staff-login-wrap { min-height: 50vh; padding: 28px 14px; }
  .alkb-staff-login-card { padding: 28px 20px; }
}

.alkb-staff-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.alkb-staff-topbar span { color: var(--muted); font-size: 14px; }
.alkb-brand-bar {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0; margin: -16px -16px 18px; background: #fff;
  border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0;
}
.alkb-topbar-logo { height: 46px; width: auto; display: block; }

/* Logout button only: the theme's own global button styling (Astra)
   was overriding the plugin's normal .alkb-btn look here, turning it
   into a solid blue box with invisible text and no hover. These
   !important overrides just restore the plain white/bordered button
   for this one button — nothing else on the dashboard is touched. */
.alkb-staff-topbar #btnLogout.alkb-btn {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--border) !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  line-height: normal !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.alkb-staff-topbar #btnLogout.alkb-btn:hover {
  background: #fff !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* This stylesheet only ever loads on the page that has [alk_staff_portal],
   so hiding these here automatically stays limited to that one page —
   the announcement bar and the site footer are injected by separate
   plugins (not the Astra theme), which is why "Canvas" template didn't
   remove them. */
.clinic-announcement-bar,
.alkhaleejy-footer {
  display: none !important;
}