/* ==========================================================================
   HRM Mobile App Live Preview - Scoped Stylesheet
   Root Parent Class: .mobile-app-preview
   All styles are strictly scoped under .mobile-app-preview
   Adapted for embedding as a section within the HRM SaaS page
   ========================================================================== */

/* Material Symbols Rounded Icon Font Definition
   Directly embedded so it never relies on delayed secondary network requests */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('https://fonts.gstatic.com/s/materialsymbolsrounded/v375/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2') format('woff2');
}

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-rounded,
.mobile-app-preview .material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1;
  font-variant-ligatures: discretionary-ligatures;
  overflow: hidden;
  max-width: 1.5em;
  text-align: center;
  vertical-align: middle;
}

.mobile-app-preview {
  --primary: #3B82F6;
  --primary-dark: #2563EB;
  --scaffold-bg: #F7F8FB;
  --card-bg: #FFFFFF;
  --light-muted: #F5F5F5;
  --text-fg: #171717;
  --text-muted: #737373;
  --border-color: #E5E5E5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  color: #0F172A;
  font-family: inherit;
  box-sizing: border-box;
}

.mobile-app-preview .preview-demo-note {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(720px, 90vw);
  padding: 9px 18px;
  background: #FFFFFF;
  border: 1px solid #E4E9F1;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.18);
  color: #64748B;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.mobile-app-preview .preview-demo-note .material-symbols-rounded {
  font-size: 15px;
  color: var(--theme-color);
  flex-shrink: 0;
}

.mobile-app-preview * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Layout: Centered Showcase Shell containing the Sidebar + Mobile Device
   -------------------------------------------------------------------------- */
.mobile-app-preview .preview-shell {
  display: flex;
  width: min(1140px, 94vw);
  height: min(700px, calc(100vh - 120px));
  min-height: 560px;
  background: #FFFFFF;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 20px 60px -24px rgba(15, 23, 42, 0.28),
    0 14px 32px -16px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.mobile-app-preview .preview-sidebar {
  width: 340px;
  min-width: 300px;
  height: 100%;
  max-height: 100%;
  background: #FBFCFE;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.mobile-app-preview .sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.mobile-app-preview .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mobile-app-preview .sidebar-brand-img {
  background-color: #002333;
  padding: 4px;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.mobile-app-preview .sidebar-brand-img svg {
  height: 100%;
  width: 100%;
}

.mobile-app-preview .sidebar-brand-title {
  font-size: 18px;
  font-family: var(--first-font);
  font-weight: 800;
  color: var(--black);
}

.mobile-app-preview .sidebar-brand-badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--theme-color);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  display: inline-block;
  margin-top: 3px;
}

.mobile-app-preview .sidebar-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-color);
}

.mobile-app-preview .sidebar-list {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D8E0EC transparent;
}

.mobile-app-preview .sidebar-list::-webkit-scrollbar {
  width: 6px;
}

.mobile-app-preview .sidebar-list::-webkit-scrollbar-thumb {
  background: #D8E0EC;
  border-radius: 99px;
}

.mobile-app-preview .sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  border-left: 3px solid transparent;
  font-size: 15px;
  font-family: var(--first-font);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.18s ease;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.mobile-app-preview .sidebar-item:last-child {
  margin-bottom: 0;
}

.mobile-app-preview .sidebar-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.mobile-app-preview .sidebar-item.active {
  background: var(--primary-light);
  color: var(--theme-color);
  border-left-color: var(--theme-color);
}

.mobile-app-preview .sidebar-item .material-symbols-rounded {
  width: 28px;
  height: 28px;
  max-width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 17px;
  transition: all 0.18s ease;
  overflow: hidden;
}

.mobile-app-preview .sidebar-item:hover .material-symbols-rounded {
  background: #E2E8F0;
  color: #334155;
}

.mobile-app-preview .sidebar-item.active .material-symbols-rounded {
  background: var(--theme-color);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);
}

.mobile-app-preview .sidebar-desc-card {
  flex-shrink: 0;
  padding: 18px 22px;
  background: #F8FAFD;
  border-top: 1px solid var(--border-color);
  max-height: 34%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D8E0EC transparent;
}

.mobile-app-preview .sidebar-desc-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-app-preview .sidebar-desc-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B82F6;
  flex-shrink: 0;
}

.mobile-app-preview .sidebar-desc-text {
  font-size: 12px;
  color: #64748B;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Right Stage: Realistic Mobile Device Frame (Auto-Fitted, Zero Page Scroll)
   -------------------------------------------------------------------------- */
.mobile-app-preview .preview-stage {
  flex: 1;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f0f2f5;
  overflow: hidden;
  position: relative;
}

/* Scalable Mobile Device Chassis */
.mobile-app-preview .mobile-chassis {
  width: 390px;
  height: 780px;
  background: #000000;
  border: 12px solid #1E222B;
  border-radius: 52px;
  box-shadow:
    0 15px 40px -15px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

/* Dark mode: scoped to the phone hardware + everything inside it only.
   The outer showcase shell (sidebar/stage) always stays light regardless
   of this attribute, since it never sits inside .mobile-chassis. Redefining
   these custom properties here re-themes every rule already written with
   var(--scaffold-bg)/var(--card-bg)/var(--text-fg)/var(--text-muted)/
   var(--border-color)/var(--light-muted) for free; explicit per-component
   dark overrides for hardcoded colors follow further down this file. */
.mobile-app-preview .mobile-chassis[data-theme="dark"] {
  --scaffold-bg: #121212;
  --card-bg: #1F1F1F;
  --light-muted: #262626;
  --text-fg: #FAFAFA;
  --text-muted: #A3A3A3;
  --border-color: #404040;
}

/* Mobile Status Bar */
.mobile-app-preview .status-bar {
  height: 44px;
  padding: 10px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--scaffold-bg);
  color: var(--text-fg);
  font-size: 13.5px;
  font-weight: 700;
  z-index: 50;
  flex-shrink: 0;
}

.mobile-app-preview .dynamic-island {
  width: 105px;
  height: 26px;
  background: #000000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}

.mobile-app-preview .camera-lens {
  width: 10px;
  height: 10px;
  background: #0D1B2A;
  border-radius: 50%;
  border: 1.5px solid #1F2937;
}

.mobile-app-preview .status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mobile-app-preview .status-icons .material-symbols-rounded {
  font-size: 16px;
}

/* Mobile Viewport Screen Body (Auto-fits, strictly NO scrolling) */
.mobile-app-preview .mobile-screen {
  flex: 1;
  background: var(--scaffold-bg);
  overflow: hidden;
  /* Page must not scroll, automatically fits */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Home Indicator Bar */
.mobile-app-preview .home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 4.5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  z-index: 60;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Mobile App UI: Login Screen (Exact 1:1 match with login_screen.dart)
   -------------------------------------------------------------------------- */
.mobile-app-preview .login-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 24px 32px;
}

.mobile-app-preview .login-spacer-top {
  height: 24px;
}

.mobile-app-preview .login-logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.mobile-app-preview .login-logo-box {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.35);
  overflow: hidden;
  display: flex;
}

.mobile-app-preview .login-logo-box img {
  width: 76px;
  height: 76px;
  object-fit: cover;
}

.mobile-app-preview .login-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-fg);
  text-align: center;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.mobile-app-preview .login-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 28px;
}

.mobile-app-preview .login-field-group {
  margin-bottom: 16px;
}

.mobile-app-preview .login-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-fg);
  margin-bottom: 8px;
}

.mobile-app-preview .login-password-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

.mobile-app-preview .login-password-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-fg) !important;
  margin-bottom: 0 !important;
}

.mobile-app-preview .forgot-password-link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}

.mobile-app-preview .forgot-password-link:hover {
  text-decoration: underline !important;
}

/* Flutter InputDecorationTheme: filled #F5F5F5, radius 16px, border none */
.mobile-app-preview .login-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--light-muted) !important;
  border-radius: 16px !important;
  border: 1.6px solid transparent !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  overflow: hidden !important;
  width: 100% !important;
}

.mobile-app-preview .login-input-wrapper:focus-within {
  border-color: var(--primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.mobile-app-preview .login-prefix-icon {
  position: absolute !important;
  left: 16px !important;
  color: var(--text-muted) !important;
  font-size: 20px !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  overflow: hidden !important;
  z-index: 5 !important;
  transition: color 0.18s ease !important;
}

.mobile-app-preview .login-input-wrapper:focus-within .login-prefix-icon {
  color: var(--primary) !important;
}

.mobile-app-preview .login-input,
.mobile-app-preview .login-input:focus,
.mobile-app-preview .login-input:hover,
.mobile-app-preview .login-input:active,
.mobile-app-preview input.login-input,
.mobile-app-preview input.login-input:focus,
.mobile-app-preview input[type="email"].login-input,
.mobile-app-preview input[type="email"].login-input:focus,
.mobile-app-preview input[type="password"].login-input,
.mobile-app-preview input[type="password"].login-input:focus,
.mobile-app-preview input[type="text"].login-input,
.mobile-app-preview input[type="text"].login-input:focus {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: 22px !important;
  padding: 15px 46px 15px 48px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--text-fg) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  -webkit-appearance: none !important;
}

.mobile-app-preview .login-input::placeholder {
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

.mobile-app-preview .login-suffix-btn {
  position: absolute !important;
  right: 12px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  width: 28px !important;
  height: 28px !important;
  overflow: hidden !important;
  z-index: 5 !important;
}

.mobile-app-preview .login-suffix-btn .material-symbols-rounded {
  font-size: 20px !important;
}

.mobile-app-preview .login-spacer-btn {
  height: 10px;
}

/* Flutter ElevatedButtonTheme: bg #3B82F6, radius 16px, font 14.5px w700, elevation 6 */
.mobile-app-preview .login-submit-btn {
  width: 100%;
  padding: 15px 0;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
  transition: background 0.18s ease, transform 0.12s ease;
}

.mobile-app-preview .login-submit-btn:hover {
  background: var(--primary-dark);
}

.mobile-app-preview .login-submit-btn:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   Mobile App UI: Forgot Password Screen (Exact 1:1 match with forgot_password_screen.dart)
   -------------------------------------------------------------------------- */
.mobile-app-preview .forgot-app-bar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--scaffold-bg);
  flex-shrink: 0;
}

.mobile-app-preview .app-bar-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--text-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mobile-app-preview .app-bar-back-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .app-bar-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.4px;
}

.mobile-app-preview .forgot-content {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 24px;
  width: 100%;
}

.mobile-app-preview .forgot-heading {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.mobile-app-preview .forgot-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 28px;
}

.mobile-app-preview .forgot-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-fg);
  margin-bottom: 8px;
}

.mobile-app-preview .forgot-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
}

.mobile-app-preview .forgot-footer-text {
  font-size: 13.5px;
  color: var(--text-muted);
}

.mobile-app-preview .back-to-login-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.mobile-app-preview .back-to-login-link:hover {
  text-decoration: underline;
}

/* Toast Message (mirrors AppToast: floating bottom SnackBar, colour-coded) */
.mobile-app-preview .preview-toast {
  position: absolute;
  top: auto;
  bottom: 98px;
  left: 16px;
  right: 16px;
  background: #3B82F6;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.mobile-app-preview .preview-toast.success {
  background: #059669;
}

.mobile-app-preview .preview-toast.error {
  background: #DC2626;
}

.mobile-app-preview .preview-toast.warning {
  background: #D97706;
}

.mobile-app-preview .preview-toast.info {
  background: #3B82F6;
}

.mobile-app-preview .preview-toast .material-symbols-rounded {
  font-size: 20px;
  color: #FFFFFF;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1;
}

.mobile-app-preview .preview-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Demo Credentials Card (Login Screen)
   -------------------------------------------------------------------------- */
.mobile-app-preview .demo-credentials-card {
  margin-top: 16px;
  padding: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
}

.mobile-app-preview .demo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  margin-bottom: 10px;
}

.mobile-app-preview .demo-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.mobile-app-preview .demo-card-title .material-symbols-rounded {
  font-size: 15px;
  color: #3B82F6;
}

.mobile-app-preview .demo-card-hint {
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

.mobile-app-preview .demo-role-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-app-preview .demo-role-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mobile-app-preview .demo-role-btn:hover {
  border-color: #93C5FD;
  background: #F8FBFF;
}

.mobile-app-preview .demo-role-btn.active {
  border-color: #3B82F6;
  background: #EFF6FF;
  box-shadow: 0 0 0 1px #3B82F6;
}

.mobile-app-preview .demo-role-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.mobile-app-preview .demo-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .demo-role-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .demo-role-email {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .demo-role-action {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-app-preview .demo-role-btn.active .demo-role-action {
  background: #3B82F6;
  color: #FFFFFF;
}

/* Login content scrolls instead of clipping on short viewports */
.mobile-app-preview #screen-login {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.mobile-app-preview #screen-login::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   Dashboard Screen & App Scaffold
   -------------------------------------------------------------------------- */
.mobile-app-preview .dashboard-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--scaffold-bg);
  position: relative;
  overflow: hidden;
}

.mobile-app-preview .dashboard-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 8px 20px;
  min-height: 52px;
  background: var(--scaffold-bg);
  flex-shrink: 0;
  z-index: 10;
}

.mobile-app-preview .dashboard-title-group {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .dashboard-app-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.mobile-app-preview .dashboard-app-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

.mobile-app-preview .dashboard-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3B82F6;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  border: 2px solid #FFFFFF;
  transition: transform 0.15s ease;
  position: relative;
}

.mobile-app-preview .dashboard-avatar-btn:hover {
  transform: scale(1.05);
}

.mobile-app-preview .dashboard-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 16px 96px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-app-preview .dashboard-scroll-body::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   Greeting Banner (_GreetingBanner)
   -------------------------------------------------------------------------- */
.mobile-app-preview .greeting-banner {
  padding: 22px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 28px;
  box-shadow: 0 14px 28px -10px rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mobile-app-preview .greeting-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .greeting-salutation {
  color: #94A3B8;
  font-size: 13px;
  font-weight: 500;
}

.mobile-app-preview .greeting-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
}

.mobile-app-preview .greeting-name {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.mobile-app-preview .greeting-wave {
  font-size: 19px;
}

.mobile-app-preview .greeting-subtitle {
  color: #94A3B8;
  font-size: 12px;
  line-height: 1.4;
}

.mobile-app-preview .greeting-shift-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 10px;
  width: fit-content;
}

.mobile-app-preview .greeting-shift-pill .material-symbols-rounded {
  font-size: 13px;
  color: #10B981;
}

.mobile-app-preview .greeting-shift-text {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
}

.mobile-app-preview .greeting-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  margin-left: 12px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Company KPI Grid (_CompanyKpiGrid)
   -------------------------------------------------------------------------- */
.mobile-app-preview .company-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.mobile-app-preview .mini-stat-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .mini-stat-info {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .mini-stat-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-fg);
  line-height: 1.1;
}

.mobile-app-preview .mini-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.mobile-app-preview .mini-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .mini-stat-icon .material-symbols-rounded {
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   Employee KPI Row (_EmployeeKpiRow)
   -------------------------------------------------------------------------- */
.mobile-app-preview .employee-kpi-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .kpi-segment {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mobile-app-preview .kpi-segment-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.mobile-app-preview .kpi-segment-icon .material-symbols-rounded {
  font-size: 19px;
}

.mobile-app-preview .kpi-segment-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.mobile-app-preview .kpi-segment-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.mobile-app-preview .kpi-divider {
  width: 1px;
  height: 48px;
  background: var(--border-color);
}

/* --------------------------------------------------------------------------
   Attendance Clock Card (_ClockCard)
   -------------------------------------------------------------------------- */
.mobile-app-preview .clock-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .clock-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mobile-app-preview .clock-card-title-group {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .clock-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-fg);
}

.mobile-app-preview .clock-card-timezone {
  font-size: 11px;
  font-weight: 500;
  color: #737373;
  margin-top: 2px;
}

.mobile-app-preview .clock-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #F5F3FF;
  color: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .clock-icon-box .material-symbols-rounded {
  font-size: 16px;
}

.mobile-app-preview .clock-time-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.mobile-app-preview .time-box {
  flex: 1;
  border-radius: 18px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mobile-app-preview .time-box.in {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.16) 0%, rgba(5, 150, 105, 0.05) 100%);
  color: #059669;
}

.mobile-app-preview .time-box.out {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.16) 0%, rgba(220, 38, 38, 0.05) 100%);
  color: #DC2626;
}

.mobile-app-preview .time-box-label {
  font-size: 11.5px;
  font-weight: 700;
}

.mobile-app-preview .time-box-val {
  font-size: 19px;
  font-weight: 800;
  margin: 4px 0 2px;
}

.mobile-app-preview .time-box-sub {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.85;
}

.mobile-app-preview .hours-worked-pill {
  width: 100%;
  padding: 12px 14px;
  background: #ECFDF5;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mobile-app-preview .hours-worked-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #047857;
}

.mobile-app-preview .hours-worked-timer {
  font-size: 13.5px;
  font-weight: 800;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.mobile-app-preview .timer-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  animation: preview-pulse-dot 1.5s infinite;
}

@keyframes preview-pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.mobile-app-preview .clock-action-btn {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.mobile-app-preview .clock-action-btn.clock-out {
  background: #EF4444;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

.mobile-app-preview .clock-action-btn.clock-in {
  background: #10B981;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.mobile-app-preview .clock-action-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Section Header (_SectionHeader)
   -------------------------------------------------------------------------- */
.mobile-app-preview .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mobile-app-preview .section-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-fg);
}

.mobile-app-preview .section-header-action {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Quick Actions (_QuickActions)
   -------------------------------------------------------------------------- */
.mobile-app-preview .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.mobile-app-preview .quick-action-tile {
  background: rgba(59, 130, 246, 0.07);
  border-radius: 16px;
  padding: 12px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
  transition: all 0.15s ease;
}

.mobile-app-preview .quick-action-tile:hover {
  background: rgba(59, 130, 246, 0.13);
  transform: translateY(-1px);
}

.mobile-app-preview .quick-action-icon {
  font-size: 21px;
  color: var(--primary);
  margin-bottom: 6px;
}

.mobile-app-preview .quick-action-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-fg);
  line-height: 1.25;
  display: block;
  text-align: center;
}

.mobile-app-preview .quick-action-label br {
  display: block !important;
}

/* --------------------------------------------------------------------------
   Upcoming Birthdays (_TodayBirthdaysSection)
   -------------------------------------------------------------------------- */
.mobile-app-preview .birthdays-scroll-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 20px;
  padding-bottom: 4px;
}

.mobile-app-preview .birthdays-scroll-row::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .birthday-card-item {
  width: 220px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .birthday-avatar-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #EC4899 0%, #C084FC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .birthday-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFFFFF;
  color: #EC4899;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .birthday-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-app-preview .birthday-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .birthday-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Team Attendance Snapshot (_TeamAttendanceSnapshot)
   -------------------------------------------------------------------------- */
.mobile-app-preview .team-attendance-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .team-att-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-app-preview .team-att-row:last-child {
  border-bottom: none;
}

.mobile-app-preview .team-att-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .team-att-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .team-att-info {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .team-att-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-fg);
}

.mobile-app-preview .team-att-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Status Pill */
.mobile-app-preview .status-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.mobile-app-preview .status-pill.present {
  background: #ECFDF5;
  color: #047857;
}

.mobile-app-preview .status-pill.late {
  background: #F5F3FF;
  color: #7C3AED;
}

.mobile-app-preview .status-pill.on-leave {
  background: #F5F3FF;
  color: #7C3AED;
}

.mobile-app-preview .status-pill.absent {
  background: #FEF2F2;
  color: #DC2626;
}

.mobile-app-preview .status-pill.pending {
  background: #FEF3C7;
  color: #B45309;
}

.mobile-app-preview .status-pill.approved {
  background: #ECFDF5;
  color: #047857;
}

.mobile-app-preview .status-pill.rejected {
  background: #FEF2F2;
  color: #DC2626;
}

.mobile-app-preview .status-pill.half-day,
.mobile-app-preview .status-pill.half_day {
  background: #FEF3C7;
  color: #B45309;
}

/* --------------------------------------------------------------------------
   Recent Announcements (_RecentAnnouncements)
   -------------------------------------------------------------------------- */
.mobile-app-preview .announcement-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .announcement-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-fg);
  margin-bottom: 4px;
}

.mobile-app-preview .announcement-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Floating Bottom Navigation Bar (_FloatingNavBar)
   -------------------------------------------------------------------------- */
.mobile-app-preview .floating-nav-bar {
  position: absolute;
  bottom: 22px;
  left: 16px;
  right: 16px;
  height: 64px;
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  z-index: 50;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .nav-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #737373;
  transition: all 0.15s ease;
  min-width: 54px;
}

.mobile-app-preview .nav-tab-item.active {
  color: var(--primary);
  background: rgba(59, 130, 246, 0.14);
}

.mobile-app-preview .nav-tab-icon {
  font-size: 21px;
}

.mobile-app-preview .nav-tab-label {
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Modal Backdrop & Bottom Sheet Modals
   -------------------------------------------------------------------------- */
.mobile-app-preview .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.mobile-app-preview .modal-overlay.active {
  display: flex;
}

.mobile-app-preview .bottom-sheet-modal {
  width: 100%;
  max-height: 75%;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  animation: slide-up-sheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes slide-up-sheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.mobile-app-preview .modal-drag-handle {
  width: 40px;
  height: 4px;
  background: #E2E8F0;
  border-radius: 99px;
  margin: 0 auto 14px;
  flex-shrink: 0;
}

.mobile-app-preview .modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.mobile-app-preview .modal-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trailing badge/close cluster in a modal header must never shrink or wrap,
   so the badge pill (e.g. "6 Celebrating") can't break onto two lines. */
.mobile-app-preview .modal-header-row>div {
  flex-shrink: 0;
}

.mobile-app-preview .modal-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-app-preview .modal-badge.pink {
  background: rgba(236, 72, 153, 0.12);
  color: #EC4899;
}

.mobile-app-preview .modal-badge.blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

.mobile-app-preview .modal-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.mobile-app-preview .modal-close-btn:hover {
  background: #F1F5F9;
  color: #1E293B;
}

.mobile-app-preview .modal-search-wrapper {
  position: relative;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.mobile-app-preview .modal-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: #F5F5F5;
  border: none;
  border-radius: 14px;
  font-size: 13px;
  color: var(--text-fg);
  font-family: inherit;
  outline: none;
}

.mobile-app-preview .modal-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #94A3B8;
  pointer-events: none;
}

.mobile-app-preview .modal-scroll-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.mobile-app-preview .modal-scroll-list::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .modal-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: #94A3B8;
  font-size: 13px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Profile Screen & Role-Based Layout
   -------------------------------------------------------------------------- */
.mobile-app-preview .profile-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--scaffold-bg);
  position: relative;
  overflow: hidden;
}

.mobile-app-preview .profile-app-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 12px;
  min-height: 52px;
  background: var(--scaffold-bg);
  flex-shrink: 0;
  gap: 8px;
}

.mobile-app-preview .profile-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-fg);
  transition: background 0.15s ease;
}

.mobile-app-preview .profile-back-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-app-preview .profile-title-col {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .profile-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-fg);
  letter-spacing: -0.4px;
}

.mobile-app-preview .profile-subtitle {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.mobile-app-preview .profile-header-card {
  margin: 4px 16px 12px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.mobile-app-preview .profile-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #3B82F6;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
  flex-shrink: 0;
}

.mobile-app-preview .profile-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-app-preview .profile-user-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .profile-user-role-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .profile-role-badge {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.mobile-app-preview .profile-role-badge.company {
  background: #EEF2FF;
  border: 1px solid #E0E7FF;
  color: #4F46E5;
}

.mobile-app-preview .profile-role-badge.hr {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
}

.mobile-app-preview .profile-role-badge.employee {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #1D4ED8;
}

.mobile-app-preview .profile-tabs-wrapper {
  margin: 0 16px 12px;
  height: 44px;
  background: #F5F5F5;
  border-radius: 14px;
  padding: 4px;
  display: flex;
  flex-shrink: 0;
}

.mobile-app-preview .profile-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #737373;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}

.mobile-app-preview .profile-tab-btn.active {
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.mobile-app-preview .profile-scroll-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 16px 32px;
}

.mobile-app-preview .profile-scroll-content::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .profile-info-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 20px;
}

.mobile-app-preview .profile-info-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
}

.mobile-app-preview .profile-info-row:last-child {
  border-bottom: none;
}

.mobile-app-preview .profile-info-icon {
  font-size: 18px;
  color: #737373;
  flex-shrink: 0;
}

.mobile-app-preview .profile-info-texts {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .profile-info-label {
  font-size: 11px;
  color: #737373;
}

.mobile-app-preview .profile-info-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-fg);
  margin-top: 2px;
}

.mobile-app-preview .profile-pref-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mobile-app-preview .profile-pref-left {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .profile-pref-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-fg);
}

.mobile-app-preview .profile-pref-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Switch UI */
.mobile-app-preview .switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.mobile-app-preview .switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mobile-app-preview .switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E2E8F0;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 99px;
}

.mobile-app-preview .switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mobile-app-preview .switch-toggle input:checked+.switch-slider {
  background-color: #3B82F6;
}

.mobile-app-preview .switch-toggle input:checked+.switch-slider:before {
  transform: translateX(20px);
}

.mobile-app-preview .profile-logout-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #FECACA;
  border-radius: 16px;
  color: #DC2626;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.mobile-app-preview .profile-logout-btn:hover {
  background: #FEF2F2;
  border-color: #F87171;
}

/* Modal List Items */
.mobile-app-preview .modal-birthday-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease;
}

.mobile-app-preview .modal-bday-avatar-wrap {
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EC4899 0%, #A855F7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .modal-bday-avatar-inner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #EC4899;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .modal-bday-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .modal-bday-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .modal-bday-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .modal-bday-pill {
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(236, 72, 153, 0.12);
  color: #EC4899;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Modal Team Attendance List */
.mobile-app-preview .modal-att-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.mobile-app-preview .modal-att-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mobile-app-preview .modal-att-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .modal-att-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mobile-app-preview .modal-att-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .modal-att-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal Announcements List */
.mobile-app-preview .modal-announcement-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-app-preview .modal-announcement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-app-preview .modal-announcement-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: #EFF6FF;
  color: #2563EB;
}

.mobile-app-preview .modal-announcement-date {
  font-size: 11px;
  color: var(--text-muted);
}

.mobile-app-preview .modal-announcement-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-fg);
}

.mobile-app-preview .modal-announcement-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Profile: Update Password Card */
.mobile-app-preview .profile-pass-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

.mobile-app-preview .profile-form-group {
  margin-bottom: 14px;
}

.mobile-app-preview .profile-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.mobile-app-preview .profile-form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0 12px;
  transition: all 0.2s ease;
}

.mobile-app-preview .profile-form-input-wrap:focus-within {
  border-color: #3B82F6;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.mobile-app-preview .profile-form-icon {
  font-size: 18px;
  color: #94A3B8;
  margin-right: 8px;
  flex-shrink: 0;
}

.mobile-app-preview .profile-form-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-fg);
  outline: none;
  font-family: inherit;
}

.mobile-app-preview .profile-form-eye-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .profile-pass-action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.mobile-app-preview .profile-save-pass-btn {
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
  transition: all 0.15s ease;
}

.mobile-app-preview .profile-save-pass-btn:hover {
  background: #2563EB;
}

/* --------------------------------------------------------------------------
   Attendance Screen & Regularizations Styles
   -------------------------------------------------------------------------- */
.mobile-app-preview .att-screen,
.mobile-app-preview .reg-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--scaffold-bg);
  position: relative;
  overflow: hidden;
}

.mobile-app-preview .att-scroll-body,
.mobile-app-preview .reg-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 14px 88px;
}

.mobile-app-preview .att-scroll-body::-webkit-scrollbar,
.mobile-app-preview .reg-scroll-body::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .att-header-row,
.mobile-app-preview .reg-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 6px;
}

.mobile-app-preview .att-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.mobile-app-preview .att-header-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .att-header-badge {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  background: #F1F5F9;
  color: #475569;
  flex-shrink: 0;
}

.mobile-app-preview .att-header-actions,
.mobile-app-preview .reg-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.mobile-app-preview .att-action-icon-btn {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.mobile-app-preview .att-action-icon-btn:hover {
  background: #2563EB;
}

.mobile-app-preview .att-action-icon-btn.active {
  background: #1D4ED8;
}

.mobile-app-preview .att-filter-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F59E0B;
  border: 1.5px solid #FFFFFF;
}

/* Collapsible Filter Panel */
.mobile-app-preview .att-filter-card,
.mobile-app-preview .reg-filter-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  animation: filter-slide-down 0.2s ease;
}

@keyframes filter-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-app-preview .filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.mobile-app-preview .filter-row:last-child {
  margin-bottom: 0;
}

.mobile-app-preview .filter-select-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.mobile-app-preview .filter-select {
  width: 100%;
  height: 34px;
  padding: 0 24px 0 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1E293B;
  font-family: inherit;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.mobile-app-preview .filter-select-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #94A3B8;
  pointer-events: none;
}

.mobile-app-preview .filter-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.mobile-app-preview .filter-reset-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #3B82F6;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Capsule TabBar for Regularizations */
.mobile-app-preview .capsule-tab-bar {
  height: 44px;
  background: #F1F5F9;
  border-radius: 14px;
  padding: 4px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 14px;
}

.mobile-app-preview .capsule-tab-bar::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .capsule-tab-btn {
  flex: 1;
  white-space: nowrap;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.mobile-app-preview .capsule-tab-btn.active {
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.28);
}

/* Attendance Record Card */
.mobile-app-preview .att-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease;
}

.mobile-app-preview .att-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-app-preview .att-card-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mobile-app-preview .att-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .att-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mobile-app-preview .att-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-app-preview .att-user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .att-desig-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #F1F5F9;
  color: #64748B;
  white-space: nowrap;
}

.mobile-app-preview .att-card-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.mobile-app-preview .att-times-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-app-preview .att-time-col {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.mobile-app-preview .att-time-col.in {
  color: #059669;
}

.mobile-app-preview .att-time-col.out {
  color: #0284C7;
}

.mobile-app-preview .att-duration-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-app-preview .att-duration-label {
  font-size: 10px;
  color: var(--text-muted);
}

.mobile-app-preview .att-duration-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-fg);
}

.mobile-app-preview .att-progress-bar-wrap {
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: #F1F5F9;
  overflow: hidden;
}

.mobile-app-preview .att-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}

.mobile-app-preview .att-absent-banner {
  background: #FEF2F2;
  color: #DC2626;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.mobile-app-preview .att-leave-banner {
  background: #F5F3FF;
  color: #7C3AED;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.mobile-app-preview .att-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.mobile-app-preview .att-badges-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mobile-app-preview .att-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}

.mobile-app-preview .att-mini-badge.late {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
}

.mobile-app-preview .att-mini-badge.early {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
}

.mobile-app-preview .att-mini-badge.overtime {
  background: #EEF2FF;
  border: 1px solid #E0E7FF;
  color: #4F46E5;
}

.mobile-app-preview .att-actions-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mobile-app-preview .att-btn-action {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-app-preview .att-btn-action.view {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.mobile-app-preview .att-btn-action.edit {
  background: rgba(217, 119, 6, 0.1);
  color: #D97706;
}

.mobile-app-preview .att-btn-action.delete {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-app-preview .att-btn-action.approve {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.mobile-app-preview .att-btn-action.reject {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
}

.mobile-app-preview .att-btn-action:hover {
  transform: scale(1.06);
}

/* Regularization Card */
.mobile-app-preview .reg-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-app-preview .reg-compare-box {
  background: #F8FAFC;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #F1F5F9;
}

.mobile-app-preview .reg-time-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-app-preview .reg-time-label {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
}

.mobile-app-preview .reg-time-val {
  font-size: 11px;
  font-weight: 700;
}

.mobile-app-preview .reg-time-val.orig {
  color: #DC2626;
}

.mobile-app-preview .reg-time-val.req {
  color: #059669;
}

.mobile-app-preview .reg-reason-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
}

.mobile-app-preview .reg-date-row {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dialog Styles */
.mobile-app-preview .preview-dialog-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  width: calc(100% - 32px);
  max-width: 345px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85%;
  overflow-y: auto;
  align-self: center;
  margin: auto;
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mobile-app-preview .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.mobile-app-preview .dialog-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .dialog-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-fg);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
}

.mobile-app-preview .dialog-field {
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .dialog-field-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-app-preview .dialog-field-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-fg);
  margin-top: 3px;
}

.mobile-app-preview .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Flutter-style AlertDialog (Centered confirmation/actions) */
.mobile-app-preview .preview-alert-dialog {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 22px 20px 16px;
  width: calc(100% - 36px);
  max-width: 335px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
  margin: auto;
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-app-preview .alert-dialog-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-fg);
  line-height: 1.3;
  margin: 0;
}

.mobile-app-preview .alert-dialog-content {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

.mobile-app-preview .alert-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.mobile-app-preview .alert-btn-cancel {
  background: transparent;
  border: none;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-app-preview .alert-btn-cancel:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.mobile-app-preview .alert-btn-delete {
  background: #DC2626;
  border: none;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.15s ease;
}

.mobile-app-preview .alert-btn-delete:hover {
  background: #B91C1C;
}

.mobile-app-preview .alert-btn-approve {
  background: #059669;
  border: none;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: all 0.15s ease;
}

.mobile-app-preview .alert-btn-approve:hover {
  background: #047857;
}

.mobile-app-preview .alert-btn-reject {
  background: #DC2626;
  border: none;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.15s ease;
}

.mobile-app-preview .alert-btn-reject:hover {
  background: #B91C1C;
}

/* Single Submit Button for Bottom Sheet Form Modals */
.mobile-app-preview .form-single-submit-btn {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
  transition: all 0.15s ease;
  margin-top: 10px;
}

.mobile-app-preview .form-single-submit-btn:hover {
  background: #2563EB;
}

/* ==========================================================================
   Responsive Adaptations
   - Desktop & Medium Screens (>= 768px): Side-by-side layout
   - Mobile Screens (< 768px): Top-to-bottom layout with horizontal scroll pill tabs
   ========================================================================== */

/* Tablet & Medium Screens (768px to 991px) - Side-by-Side */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-app-preview .preview-shell {
    width: calc(100% - 24px);
    max-width: 960px;
    height: min(620px, calc(80vh - 60px));
    min-height: 500px;
    border-radius: 28px;
  }

  .mobile-app-preview .preview-sidebar {
    width: 250px;
    min-width: 240px;
  }

  .mobile-app-preview .sidebar-header {
    padding: 12px 14px 10px;
  }

  .mobile-app-preview .sidebar-brand {
    gap: 10px;
    margin-bottom: 6px;
  }

  .mobile-app-preview .sidebar-brand-badge {
    font-size: 9.5px;
    padding: 1px 6px;
  }

  .mobile-app-preview .sidebar-title {
    font-size: 10.5px;
  }

  .mobile-app-preview .sidebar-list {
    padding: 6px 8px;
  }

  .mobile-app-preview .sidebar-item {
    padding: 6px 8px;
    font-size: 11.5px;
    gap: 7px;
    border-radius: 8px;
  }

  .mobile-app-preview .sidebar-item .material-symbols-rounded {
    width: 20px;
    height: 20px;
    font-size: 14px;
    border-radius: 6px;
  }

  .mobile-app-preview .preview-stage {
    padding: 12px;
  }
}

/* Mobile Screens (< 768px) - Clean, Gap-Free Mobile Layout */
@media (max-width: 767.98px) {

  /* Centered, correctly proportioned shell on 767px tablets and phones */
  .mobile-app-preview .preview-shell {
    flex-direction: column;
    width: 100%;
    max-width: 370px;
    height: auto;
    border-radius: 24px;
    margin: 0 auto;
    overflow: hidden;
  }

  .mobile-app-preview .sidebar-brand-img {
    width: 32px;
    height: 32px;
  }

  .mobile-app-preview .preview-sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    background: #FBFCFE;
    flex-shrink: 0;
  }

  .mobile-app-preview .sidebar-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-app-preview .sidebar-brand {
    margin-bottom: 0;
    gap: 8px;
  }

  .mobile-app-preview .sidebar-brand-title {
    font-size: 16px;
  }

  .mobile-app-preview .sidebar-brand-badge {
    font-size: 10px;
  }

  .mobile-app-preview .sidebar-title {
    display: none;
  }

  .mobile-app-preview .sidebar-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 6px 12px 10px !important;
    gap: 6px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-app-preview .sidebar-list::-webkit-scrollbar {
    display: none;
  }

  .mobile-app-preview .sidebar-item {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    margin-bottom: 0 !important;
    border-radius: 18px !important;
    border-left: none !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .mobile-app-preview .sidebar-item .material-symbols-rounded {
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
    background: transparent !important;
    color: #64748B !important;
  }

  .mobile-app-preview .sidebar-item:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
  }

  .mobile-app-preview .sidebar-item.active {
    background: var(--theme-color) !important;
    color: #FFFFFF !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 2px 8px rgba(16, 183, 127, 0.35) !important;
  }

  .mobile-app-preview .sidebar-item.active .material-symbols-rounded {
    background: transparent !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }

  .mobile-app-preview .sidebar-item.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
  }

  .mobile-app-preview .sidebar-item-lock {
    font-size: 9px !important;
    padding: 2px 5px !important;
    margin-left: 4px !important;
  }

  /* Stage height hugs the scaled mobile phone snugly — ZERO ghost gaps above or below! */
  .mobile-app-preview .preview-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
  }

  .mobile-app-preview .preview-demo-note {
    padding: 6px 12px;
    font-size: 12px;
    max-width: 95vw;
  }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .mobile-app-preview .preview-shell {
    max-width: 330px;
    border-radius: 18px;
  }

  .mobile-app-preview .sidebar-header {
    padding: 8px 10px;
  }

  .mobile-app-preview .sidebar-list {
    padding: 8px !important;
  }

  .mobile-app-preview .sidebar-item {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .mobile-app-preview .preview-stage {
    height: auto;
    min-height: 0;
    padding: 10px 6px 6px;
  }

  .mobile-app-preview .preview-demo-note {
    padding: 5px 8px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   LEAVE SCREEN (leave_screen.dart + apply_leave_sheet.dart)
   All selectors prefixed with .leave- to stay isolated from other screens.
   ========================================================================== */
.mobile-app-preview .leave-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--scaffold-bg);
  position: relative;
  overflow: hidden;
}

.mobile-app-preview .leave-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 0 0 16px;
  flex-shrink: 0;
  background: var(--scaffold-bg);
}

.mobile-app-preview .leave-app-title {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.27;
  color: #171717;
}

.mobile-app-preview .leave-app-subtitle {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.27;
  color: #737373;
}

.mobile-app-preview .leave-app-avatar-wrap {
  padding: 0 20px 0 4px;
  cursor: pointer;
}

.mobile-app-preview .leave-app-avatar-wrap .leave-avatar {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
}

.mobile-app-preview .leave-avatar {
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-preview .leave-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px 16px 96px;
}

.mobile-app-preview .leave-scroll-body::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .leave-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .leave-header-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .leave-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: #3B82F6;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-app-preview .leave-icon-btn.dark {
  background: #2563EB;
}

.mobile-app-preview .leave-filter-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F59E0B;
  border: 1.5px solid #FFFFFF;
  box-sizing: border-box;
}

.mobile-app-preview .leave-softcard {
  background: #FFFFFF;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.036);
}

.mobile-app-preview .leave-filter-card {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
}

.mobile-app-preview .leave-filter-row {
  display: flex;
  gap: 8px;
}

.mobile-app-preview .leave-filter-row+.leave-filter-row {
  margin-top: 8px;
}

.mobile-app-preview .leave-dd {
  height: 36px;
  min-width: 0;
  padding: 0 10px;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}

.mobile-app-preview .leave-dd-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-dd .material-symbols-rounded {
  font-size: 18px;
  color: #616161;
  flex-shrink: 0;
}

.mobile-app-preview .leave-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mobile-app-preview .leave-reset-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #3B82F6;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .leave-tab-bar {
  margin: 14px 0;
  height: 44px;
  padding: 3px;
  background: #F5F5F5;
  border-radius: 12px;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}

.mobile-app-preview .leave-tab-bar::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .leave-tab-btn {
  flex: none;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #737373;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mobile-app-preview .leave-tab-btn.active {
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 700;
}

.mobile-app-preview .leave-progress {
  padding: 8px 0;
}

.mobile-app-preview .leave-progress-track {
  position: relative;
  height: 2px;
  background: #E8EEFB;
  overflow: hidden;
}

.mobile-app-preview .leave-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: #3B82F6;
  animation: leave-indeterminate 1.1s ease-in-out infinite;
}

@keyframes leave-indeterminate {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

.mobile-app-preview .leave-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #3B82F6;
  border-right-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: leave-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes leave-spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-app-preview .leave-card {
  padding: 12px 14px;
  border-radius: 16px;
}

.mobile-app-preview .leave-card+.leave-card {
  margin-top: 12px;
}

.mobile-app-preview .leave-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .leave-card-meta {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .leave-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-card-type {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11.5px;
  color: #737373;
}

.mobile-app-preview .leave-type-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-app-preview .leave-type-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-pill {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-app-preview .leave-pill.pending {
  background: #FFFBEB;
  color: #B45309;
}

.mobile-app-preview .leave-pill.approved {
  background: #ECFDF5;
  color: #047857;
}

.mobile-app-preview .leave-pill.rejected {
  background: #FEF2F2;
  color: #B91C1C;
}

.mobile-app-preview .leave-dates-box {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 245, 245, 0.6);
}

.mobile-app-preview .leave-dates-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #737373;
}

.mobile-app-preview .leave-dates-row+.leave-dates-row {
  margin-top: 4px;
}

.mobile-app-preview .leave-dates-row .material-symbols-rounded {
  font-size: 12.5px;
  flex-shrink: 0;
}

.mobile-app-preview .leave-dates-range {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-dates-applied {
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.mobile-app-preview .leave-btn-action {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-app-preview .leave-btn-action .material-symbols-rounded {
  font-size: 18px;
}

.mobile-app-preview .leave-btn-action.approve {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

.mobile-app-preview .leave-btn-action.reject {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
}

.mobile-app-preview .leave-btn-action.view {
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.1);
}

.mobile-app-preview .leave-btn-action.edit {
  color: #D97706;
  background: rgba(217, 119, 6, 0.1);
}

.mobile-app-preview .leave-btn-action.delete {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
}

.mobile-app-preview .leave-empty {
  margin-top: 40px;
  padding: 48px 24px;
  text-align: center;
}

.mobile-app-preview .leave-empty-icon {
  display: inline-flex;
  padding: 16px;
  border-radius: 50%;
  background: #F5F5F5;
  color: #737373;
}

.mobile-app-preview .leave-empty-icon .material-symbols-rounded {
  font-size: 28px;
}

.mobile-app-preview .leave-empty-title {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .leave-empty-msg {
  margin-top: 4px;
  font-size: 12.5px;
  color: #737373;
}

.mobile-app-preview .leave-outlined-btn,
.mobile-app-preview .leave-elevated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  padding: 15px 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-app-preview .leave-outlined-btn {
  margin-top: 12px;
  background: #F5F5F5;
  color: #3B82F6;
  border: 1px solid #3B82F6;
  border-radius: 10px;
}

.mobile-app-preview .leave-elevated-btn {
  margin-top: 14px;
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.14), 0 6px 10px rgba(59, 130, 246, 0.1), 0 1px 18px rgba(59, 130, 246, 0.08);
}

.mobile-app-preview .leave-outlined-btn .material-symbols-rounded,
.mobile-app-preview .leave-elevated-btn .material-symbols-rounded {
  font-size: 16px;
}

.mobile-app-preview .leave-error-card {
  margin-top: 24px;
  padding: 36px 16px;
  border-radius: 24px;
  text-align: center;
}

.mobile-app-preview .leave-error-icon {
  display: inline-flex;
  padding: 14px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-app-preview .leave-error-icon .material-symbols-rounded {
  font-size: 32px;
}

/* Details dialog */
.mobile-app-preview .leave-dialog {
  width: 310px;
  max-width: calc(100% - 80px);
  max-height: 85%;
  overflow-y: auto;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 16px;
  align-self: center;
  margin: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  scrollbar-width: none;
}

.mobile-app-preview .leave-dialog::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .leave-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-app-preview .leave-dialog-icon {
  padding: 8px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
  display: flex;
}

.mobile-app-preview .leave-dialog-icon .material-symbols-rounded {
  font-size: 20px;
}

.mobile-app-preview .leave-dialog-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .leave-close {
  border: none;
  background: transparent;
  padding: 0;
  color: #49454F;
  display: flex;
  cursor: pointer;
}

.mobile-app-preview .leave-close .material-symbols-rounded {
  font-size: 20px;
}

.mobile-app-preview .leave-divider {
  height: 1px;
  background: #E5E5E5;
  margin: 11.5px 0;
}

.mobile-app-preview .leave-drow {
  display: flex;
  margin-top: 12px;
}

.mobile-app-preview .leave-divider+.leave-drow {
  margin-top: 0;
}

.mobile-app-preview .leave-dcol {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .leave-dlabel {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #737373;
}

.mobile-app-preview .leave-dlabel .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .leave-dvalue {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #171717;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-app-preview .leave-dcol .leave-pill {
  display: inline-block;
  margin: 4px 0 0;
}

/* Delete AlertDialog */
.mobile-app-preview .leave-alert {
  width: 310px;
  max-width: calc(100% - 80px);
  padding: 24px;
  background: #FFFFFF;
  border-radius: 16px;
  align-self: center;
  margin: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.mobile-app-preview .leave-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .leave-alert-title .material-symbols-rounded {
  font-size: 22px;
  color: #DC2626;
}

.mobile-app-preview .leave-alert-content {
  margin: 16px 0 24px;
  font-size: 13.5px;
  line-height: 1.43;
  color: #49454F;
}

.mobile-app-preview .leave-alert-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .leave-text-btn {
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: #3B82F6;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .leave-danger-btn {
  min-width: 64px;
  padding: 15px 0;
  border: none;
  border-radius: 10px;
  background: #DC2626;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.07), 0 6px 10px rgba(59, 130, 246, 0.05), 0 1px 18px rgba(59, 130, 246, 0.04);
}

/* Apply / Edit leave bottom sheet */
.mobile-app-preview .leave-sheet {
  width: 100%;
  max-height: 92%;
  overflow-y: auto;
  padding: 20px 20px 24px;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  animation: slide-up-sheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  scrollbar-width: none;
}

.mobile-app-preview .leave-sheet::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .leave-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
}

.mobile-app-preview .leave-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mobile-app-preview .leave-sheet-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .leave-sheet-icon {
  padding: 8px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  display: flex;
}

.mobile-app-preview .leave-sheet-icon .material-symbols-rounded {
  font-size: 20px;
}

.mobile-app-preview .leave-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .leave-fgroup {
  margin-bottom: 14px;
}

.mobile-app-preview .leave-frow {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.mobile-app-preview .leave-frow .leave-fgroup {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.mobile-app-preview .leave-field {
  position: relative;
  min-height: 56px;
  padding: 25px 12px 8px 48px;
  background: #F5F5F5;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
}

.mobile-app-preview .leave-field.noprefix {
  padding-left: 16px;
}

.mobile-app-preview .leave-field.date {
  padding-left: 44px;
}

.mobile-app-preview .leave-field:focus-within {
  box-shadow: inset 0 0 0 1.6px #3B82F6;
}

.mobile-app-preview .leave-field.error {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #DC2626;
}

.mobile-app-preview .leave-field.error:focus-within {
  box-shadow: inset 0 0 0 2px #DC2626;
}

.mobile-app-preview .leave-field.disabled {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: default;
}

.mobile-app-preview .leave-field-prefix {
  position: absolute;
  left: 15px;
  top: 19px;
  font-size: 18px;
  color: #49454F;
}

.mobile-app-preview .leave-field.date .leave-field-prefix {
  left: 14px;
  font-size: 16px;
  top: 20px;
}

.mobile-app-preview .leave-field-label {
  position: absolute;
  left: 48px;
  top: 8px;
  font-size: 12px;
  color: #49454F;
  pointer-events: none;
  transition: all 0.15s ease;
}

.mobile-app-preview .leave-field.noprefix .leave-field-label {
  left: 16px;
}

.mobile-app-preview .leave-field.date .leave-field-label {
  left: 44px;
}

.mobile-app-preview .leave-field:focus-within .leave-field-label {
  color: #3B82F6;
}

.mobile-app-preview .leave-field.error .leave-field-label {
  color: #DC2626;
}

.mobile-app-preview .leave-field.empty:not(:focus-within) .leave-field-label {
  top: 17px;
  font-size: 16px;
}

.mobile-app-preview .leave-field-value {
  display: flex;
  align-items: center;
  min-height: 20px;
  font-size: 13.5px;
  color: #171717;
}

.mobile-app-preview .leave-field.disabled .leave-field-value {
  color: rgba(23, 23, 23, 0.38);
}

.mobile-app-preview .leave-field-arrow {
  position: absolute;
  right: 8px;
  top: 16px;
  font-size: 24px;
  color: #616161;
  pointer-events: none;
}

.mobile-app-preview .leave-field-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: #171717;
  cursor: pointer;
}

.mobile-app-preview textarea.leave-field-input {
  cursor: text;
  resize: none;
  line-height: 1.4;
  display: block;
}

.mobile-app-preview .leave-field-input::placeholder {
  color: transparent;
}

.mobile-app-preview .leave-field:focus-within .leave-field-input::placeholder {
  color: #737373;
}

.mobile-app-preview .leave-field-error {
  margin: 6px 0 0 16px;
  font-size: 12px;
  color: #DC2626;
  display: none;
}

.mobile-app-preview .leave-field-error.show {
  display: block;
}

.mobile-app-preview .leave-type-value-dot {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-app-preview .leave-type-value-text {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-field-spinner {
  position: absolute;
  right: 12px;
  top: 20px;
  width: 16px;
  height: 16px;
  border: 2px solid #3B82F6;
  border-right-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: leave-spin 0.8s linear infinite;
}

.mobile-app-preview .leave-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
}

.mobile-app-preview .leave-attach.has-file {
  cursor: default;
}

.mobile-app-preview .leave-attach>.material-symbols-rounded {
  font-size: 18px;
  flex-shrink: 0;
}

.mobile-app-preview .leave-attach-main {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .leave-attach-name {
  font-size: 12px;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-attach.has-file .leave-attach-name {
  font-weight: 600;
  color: #171717;
}

.mobile-app-preview .leave-attach-size {
  margin-top: 2px;
  font-size: 10px;
  color: #737373;
}

.mobile-app-preview .leave-attach-select {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: #3B82F6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .leave-attach-clear {
  border: none;
  background: transparent;
  padding: 0;
  color: #49454F;
  display: flex;
  cursor: pointer;
}

.mobile-app-preview .leave-attach-clear .material-symbols-rounded {
  font-size: 16px;
}

.mobile-app-preview .leave-submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  min-height: 47px;
  border: none;
  border-radius: 12px;
  background: #3B82F6;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.14), 0 6px 10px rgba(59, 130, 246, 0.1), 0 1px 18px rgba(59, 130, 246, 0.08);
}

.mobile-app-preview .leave-submit:disabled {
  background: rgba(23, 23, 23, 0.12);
  color: rgba(23, 23, 23, 0.38);
  box-shadow: none;
  cursor: default;
}

.mobile-app-preview .leave-submit .leave-spinner {
  width: 20px;
  height: 20px;
  border-color: #FFFFFF;
  border-right-color: transparent;
}

/* Dropdown menu + date picker layers */
.mobile-app-preview .leave-menu-layer {
  position: absolute;
  inset: 0;
  z-index: 310;
  display: none;
}

.mobile-app-preview .leave-menu-layer.active {
  display: block;
}

.mobile-app-preview .leave-menu {
  position: absolute;
  padding: 8px 0;
  background: #FFFFFF;
  border-radius: 4px;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mobile-app-preview .leave-menu::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .leave-menu-item {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-app-preview .leave-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.mobile-app-preview .leave-menu-item.disabled {
  cursor: default;
}

.mobile-app-preview .leave-menu-item.disabled:hover {
  background: transparent;
}

.mobile-app-preview .leave-menu-item.simple {
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.mobile-app-preview .leave-menu-item.simple.sheet {
  font-size: 13.5px;
  font-weight: 400;
  color: #171717;
}

.mobile-app-preview .leave-mi-body {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}

.mobile-app-preview .leave-mi-top {
  display: flex;
  align-items: center;
}

.mobile-app-preview .leave-mi-dot {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-app-preview .leave-mi-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-menu-item.disabled .leave-mi-name {
  color: rgba(0, 0, 0, 0.38);
}

.mobile-app-preview .leave-mi-chip {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(244, 67, 54, 0.12);
  border: 0.8px solid rgba(244, 67, 54, 0.3);
  color: #F44336;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-app-preview .leave-mi-sub {
  margin: 3px 0 0 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave-menu-item.disabled .leave-mi-sub {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.26);
}

.mobile-app-preview .leave-picker-layer {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.54);
}

.mobile-app-preview .leave-picker-layer.active {
  display: flex;
}

.mobile-app-preview .leave-picker {
  width: 328px;
  max-width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-app-preview .leave-picker-head {
  padding: 16px 12px 12px 24px;
  height: 120px;
  box-sizing: border-box;
  position: relative;
}

.mobile-app-preview .leave-picker-help {
  font-size: 14px;
  font-weight: 500;
  color: #49454F;
}

.mobile-app-preview .leave-picker-headline {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-size: 32px;
  line-height: 40px;
  color: #171717;
}

.mobile-app-preview .leave-picker-edit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #49454F;
  display: flex;
  padding: 8px;
}

.mobile-app-preview .leave-picker-divider {
  height: 1px;
  background: #CAC4D0;
}

.mobile-app-preview .leave-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px 0 24px;
}

.mobile-app-preview .leave-picker-month {
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  display: flex;
  align-items: center;
}

.mobile-app-preview .leave-picker-arrows {
  display: flex;
  gap: 24px;
  color: #49454F;
}

.mobile-app-preview .leave-picker-arrows .material-symbols-rounded {
  cursor: pointer;
}

.mobile-app-preview .leave-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px;
}

.mobile-app-preview .leave-picker-dow {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #171717;
}

.mobile-app-preview .leave-picker-cell {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .leave-picker-day {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #171717;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-app-preview .leave-picker-day.today {
  border: 1px solid #3B82F6;
  color: #3B82F6;
}

.mobile-app-preview .leave-picker-day.selected {
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
}

.mobile-app-preview .leave-picker-day.disabled {
  color: rgba(23, 23, 23, 0.38);
  cursor: default;
}

.mobile-app-preview .leave-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 12px;
}

/* ==========================================================================
   PAYROLL / PAYSLIPS / PAYROLL DETAILS / CALENDAR
   (payroll_screen, payslips_screen, payroll_details_screen, calendar_screen,
    add_calendar_entry_sheet). Prefixes: pay-, pd-, ps-, cal-
   ========================================================================== */
.mobile-app-preview .leave-pill.paid,
.mobile-app-preview .leave-pill.completed,
.mobile-app-preview .leave-pill.generated {
  background: #ECFDF5;
  color: #047857;
}

.mobile-app-preview .leave-pill.processing,
.mobile-app-preview .leave-pill.draft {
  background: #FFFBEB;
  color: #B45309;
}

.mobile-app-preview .leave-pill.downloaded {
  background: #EFF6FF;
  color: #2563EB;
}

.mobile-app-preview .leave-pill.cancelled {
  background: #F5F5F5;
  color: #737373;
}

/* AppBar with automatic back arrow (pushed route) */
.mobile-app-preview .pd-back-btn {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-app-preview .pd-back-btn .material-symbols-rounded {
  font-size: 24px;
}

.mobile-app-preview .pd-app-bar {
  display: flex;
  align-items: center;
  height: 56px;
  flex-shrink: 0;
  background: var(--scaffold-bg);
}

.mobile-app-preview .pd-app-title-col {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
}

.mobile-app-preview .pd-app-title-col .leave-app-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 12px 16px 24px;
}

.mobile-app-preview .pd-scroll-body::-webkit-scrollbar {
  display: none;
}

/* Header row with month chip */
.mobile-app-preview .pay-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-app-preview .pay-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mobile-app-preview .pay-header-title {
  font-size: 16px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
}

.mobile-app-preview .pay-month-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3B82F6;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .pay-month-chip .material-symbols-rounded {
  font-size: 11.5px;
}

.mobile-app-preview .pay-filter-card {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
}

.mobile-app-preview .pay-dd {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #171717;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}

.mobile-app-preview .pay-dd .leave-dd-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay-dd .material-symbols-rounded {
  font-size: 18px;
  color: #737373;
  flex-shrink: 0;
}

.mobile-app-preview .leave-menu-item.simple.pay {
  font-size: 12.5px;
  color: #171717;
}

.mobile-app-preview .pay-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.mobile-app-preview .pay-reset-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #3B82F6;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .pay-reset-link.slip {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}

.mobile-app-preview .pay-reset-link .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .pay-list {
  margin-top: 12px;
}

.mobile-app-preview .pay-card {
  padding: 10px 14px;
  border-radius: 24px;
  cursor: pointer;
}

.mobile-app-preview .pay-card+.pay-card {
  margin-top: 12px;
}

.mobile-app-preview .pay-card.slip {
  padding: 12px 14px;
}

.mobile-app-preview .pay-card-head {
  display: flex;
  align-items: center;
}

.mobile-app-preview .pay-card-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay-card-head+.pay-row {
  margin-top: 5px;
}

.mobile-app-preview .pay-card.slip .pay-card-head+.pay-row {
  margin-top: 6px;
}

.mobile-app-preview .pay-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #737373;
}

.mobile-app-preview .pay-row>.material-symbols-rounded {
  font-size: 12px;
  flex-shrink: 0;
}

.mobile-app-preview .pay-row-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay-net {
  color: #3B82F6;
  font-weight: 700;
  font-size: 11.5px;
}

.mobile-app-preview .pay-card.slip .pay-net {
  font-size: 11px;
}

.mobile-app-preview .pay-row .leave-btn-action {
  margin-left: 2px;
  flex-shrink: 0;
}

.mobile-app-preview .pay-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.mobile-app-preview .pay-loading .leave-spinner {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.mobile-app-preview .pay-msg-card {
  padding: 32px 16px;
  border-radius: 24px;
  text-align: center;
}

.mobile-app-preview .pay-msg-card>.material-symbols-rounded {
  font-size: 40px;
  color: #737373;
}

.mobile-app-preview .pay-msg-text {
  margin-top: 8px;
  font-size: 13px;
  color: #737373;
}

.mobile-app-preview .pay-msg-card.error {
  padding: 20px;
}

.mobile-app-preview .pay-msg-card.error>.material-symbols-rounded {
  font-size: 36px;
  color: #DC2626;
}

.mobile-app-preview .pay-msg-card.error .pay-msg-text {
  color: #DC2626;
}

.mobile-app-preview .leave-outlined-btn.slip {
  padding: 8px 16px;
  border-radius: 8px;
}

.mobile-app-preview .pay-msg-card .leave-elevated-btn {
  margin-top: 12px;
}

/* Payroll details */
.mobile-app-preview .pd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-app-preview .pd-summary {
  aspect-ratio: 1.16;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--tint), 0.12);
  background: #FFFFFF;
  box-shadow: 0 10px 24px -6px rgba(var(--tint), 0.14), 0 2px 6px rgba(var(--tint), 0.084);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-app-preview .pd-sum-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(var(--tint), 0.12);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .pd-sum-icon .material-symbols-rounded {
  font-size: 17px;
}

.mobile-app-preview .pd-sum-val {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #171717;
  white-space: nowrap;
}

.mobile-app-preview .pd-sum-title {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #737373;
}

.mobile-app-preview .pd-sum-sub {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(var(--tint), 0.08);
  color: var(--c);
  font-size: 9.5px;
  font-weight: 700;
}

.mobile-app-preview .pd-info {
  margin-top: 14px;
  padding: 14px;
  border-radius: 24px;
}

.mobile-app-preview .pd-info-row {
  display: flex;
  align-items: center;
}

.mobile-app-preview .pd-info-row+.pd-info-row {
  margin-top: 10px;
}

.mobile-app-preview .pd-info-row>.material-symbols-rounded {
  font-size: 14px;
  color: #737373;
  margin-right: 8px;
}

.mobile-app-preview .pd-info-label {
  font-size: 12px;
  font-weight: 700;
  color: #737373;
}

.mobile-app-preview .pd-info-val {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #171717;
}

.mobile-app-preview .pd-freq {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 9px;
  font-weight: 700;
}

.mobile-app-preview .pd-info-row .leave-pill {
  margin-left: 6px;
}

.mobile-app-preview .pd-formula {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.mobile-app-preview .pd-formula-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #3B82F6;
}

.mobile-app-preview .pd-formula-head .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .pd-formula-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.mobile-app-preview .pd-formula-row:first-of-type {
  margin-top: 8px;
}

.mobile-app-preview .pd-formula-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
}

.mobile-app-preview .pd-formula-text {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: #737373;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-entries-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
}

.mobile-app-preview .pd-entries-title {
  font-size: 15px;
  font-weight: 800;
  color: #171717;
}

.mobile-app-preview .pd-staff-badge {
  padding: 4px 8px;
  border-radius: 12px;
  background: #F5F5F5;
  font-size: 11px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .pd-entry {
  padding: 14px;
  border-radius: 24px;
}

.mobile-app-preview .pd-entry+.pd-entry {
  margin-top: 10px;
}

.mobile-app-preview .pd-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-app-preview .pd-entry-meta {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .pd-entry-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-entry-basic {
  margin-top: 2px;
  font-size: 11.5px;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-entry-head .leave-btn-action {
  margin-left: 8px;
}

/* Payroll Details' per-employee View button reuses the shared
   .leave-btn-action, but per explicit instruction uses the single neutral
   gray here instead of the shared class's default blue — scoped to this
   screen only, same pattern as Calendar's action buttons. */
.mobile-app-preview .pd-entry-head .leave-btn-action.view {
  color: #6B7280;
  background: transparent;
}

.mobile-app-preview .pd-entry-head .leave-btn-action.view:hover {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

.mobile-app-preview .pd-entry-div {
  height: 1px;
  background: #E5E5E5;
  margin: 12px 0;
}

.mobile-app-preview .pd-stats {
  display: flex;
  gap: 4px;
}

.mobile-app-preview .pd-stat {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .pd-stat-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-stat-val {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pd-stat-val.pos {
  color: #059669;
}

.mobile-app-preview .pd-stat-val.neg {
  color: #DC2626;
}

.mobile-app-preview .pd-stat-val.net {
  color: #3B82F6;
  font-size: 12.5px;
  font-weight: 900;
}

/* Payroll entry / pay stub dialogs */
.mobile-app-preview .pay-dialog {
  width: 310px;
  max-width: calc(100% - 80px);
  max-height: 85%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 16px;
  align-self: center;
  margin: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.mobile-app-preview .pay-dialog-head {
  display: flex;
  align-items: center;
  padding: 20px 20px 0;
  flex-shrink: 0;
}

.mobile-app-preview .pay-dialog-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .pay-dialog-sub {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.mobile-app-preview .pay-dialog-body.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
}

.mobile-app-preview .pay-dialog-body.loading .leave-spinner {
  width: 36px;
  height: 36px;
  border-width: 4px;
}

.mobile-app-preview .pay-dialog-x {
  border: none;
  background: transparent;
  padding: 0;
  color: #49454F;
  display: flex;
  cursor: pointer;
  margin-left: 8px;
}

.mobile-app-preview .pay-dialog-x .material-symbols-rounded {
  font-size: 18px;
}

.mobile-app-preview .pd-sec-head {
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(var(--tint), 0.3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--c);
}

.mobile-app-preview .pd-dr {
  display: flex;
  justify-content: space-between;
  padding: 3.5px 0;
}

.mobile-app-preview .pd-dr-label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

.mobile-app-preview .pd-dr-val {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #171717;
  white-space: nowrap;
}

.mobile-app-preview .pd-dr.em .pd-dr-label {
  font-size: 12.5px;
  font-weight: 700;
}

.mobile-app-preview .pd-dr.em .pd-dr-val {
  font-size: 13px;
  font-weight: 800;
}

.mobile-app-preview .ps-dr {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.mobile-app-preview .ps-dr-label {
  flex: 1;
  font-size: 11px;
  color: #737373;
}

.mobile-app-preview .ps-dr-val {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #171717;
  white-space: nowrap;
}

.mobile-app-preview .ps-dr.em .ps-dr-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c, rgba(0, 0, 0, 0.87));
}

.mobile-app-preview .ps-dr.em .ps-dr-val {
  font-size: 13px;
  font-weight: 900;
}

.mobile-app-preview .ps-note {
  font-size: 9.5px;
  font-style: italic;
  color: #737373;
}

.mobile-app-preview .pd-div {
  height: 1px;
  background: #E5E5E5;
  margin: 5.5px 0;
}

.mobile-app-preview .pd-gap16 {
  height: 16px;
}

.mobile-app-preview .pd-att-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #737373;
}

.mobile-app-preview .pd-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mobile-app-preview .pd-grid3-item {
  aspect-ratio: 1.4;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 8px;
  background: #F5F5F5;
  border: 0.5px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .pd-grid3-label {
  font-size: 8.5px;
  font-weight: 600;
  color: #737373;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mobile-app-preview .pd-grid3-val {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #171717;
}

.mobile-app-preview .ps-emp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 12px;
  background: #F9FAFB;
  border: 0.8px solid #E5E7EB;
}

.mobile-app-preview .ps-emp-meta {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .ps-emp-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .ps-emp-code {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: #737373;
}

.mobile-app-preview .ps-emp-date {
  text-align: right;
  flex-shrink: 0;
}

.mobile-app-preview .ps-emp-date-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #737373;
}

.mobile-app-preview .ps-emp-date-val {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #171717;
}

.mobile-app-preview .ps-emp-date-val .material-symbols-rounded {
  font-size: 11.5px;
  color: #737373;
}

.mobile-app-preview .ps-error {
  padding: 8px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.1);
  font-size: 11px;
  color: #DC2626;
}

/* Calendar screen */
.mobile-app-preview .cal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-app-preview .cal-loading {
  padding: 4px 0;
  margin-top: 8px;
}

.mobile-app-preview .cal-loading .leave-progress-track {
  height: 3px;
}

.mobile-app-preview .cal-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.mobile-app-preview .cal-error .material-symbols-rounded {
  font-size: 20px;
  color: #DC2626;
}

.mobile-app-preview .cal-error-text {
  flex: 1;
  font-size: 12.5px;
  color: #DC2626;
}

.mobile-app-preview .cal-error .leave-text-btn {
  padding: 8px 12px;
}

.mobile-app-preview .cal-card {
  margin-top: 14px;
  padding: 8px 0;
  border-radius: 26px;
}

.mobile-app-preview .cal-head {
  display: flex;
  align-items: center;
  padding: 8px 8px;
}

.mobile-app-preview .cal-chev {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #171717;
  cursor: pointer;
  border-radius: 50%;
}

.mobile-app-preview .cal-chev .material-symbols-rounded {
  font-size: 24px;
}

.mobile-app-preview .cal-title {
  flex: 1;
  text-align: center;
  font-size: 15.5px;
  font-weight: 800;
  color: #171717;
}

.mobile-app-preview .cal-dow,
.mobile-app-preview .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mobile-app-preview .cal-dow {
  height: 16px;
}

.mobile-app-preview .cal-dow span {
  text-align: center;
  font-size: 11px;
  color: #737373;
  line-height: 16px;
}

.mobile-app-preview .cal-cell {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-app-preview .cal-day {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #171717;
}

.mobile-app-preview .cal-day.today {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
  font-weight: 700;
}

.mobile-app-preview .cal-day.selected {
  background: #3B82F6;
  color: #FAFAFA;
  font-size: 16px;
  font-weight: 400;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
}

.mobile-app-preview .cal-markers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mobile-app-preview .cal-marker {
  width: 5px;
  height: 5px;
  margin: 0 1px;
  border-radius: 50%;
}

.mobile-app-preview .cal-chips {
  display: flex;
  gap: 8px;
  height: 36px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-app-preview .cal-chips::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .cal-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #E5E5E5;
  background: transparent;
  color: #737373;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-app-preview .cal-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mobile-app-preview .cal-date-title {
  margin: 18px 0 12px;
  font-size: 14.5px;
  font-weight: 800;
  color: #171717;
}

.mobile-app-preview .cal-empty {
  padding: 48px 24px;
  text-align: center;
}

.mobile-app-preview .cal-empty-icon {
  display: inline-flex;
  padding: 16px;
  border-radius: 50%;
  background: #F5F5F5;
  color: #737373;
}

.mobile-app-preview .cal-empty-icon .material-symbols-rounded {
  font-size: 28px;
}

.mobile-app-preview .cal-empty-title {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .cal-empty-msg {
  margin-top: 4px;
  font-size: 12.5px;
  color: #737373;
}

.mobile-app-preview .cal-event {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 24px;
  box-shadow: 0 10px 24px -6px rgba(var(--tint), 0.14), 0 2px 6px rgba(var(--tint), 0.084);
}

.mobile-app-preview .cal-event+.cal-event {
  margin-top: 12px;
}

.mobile-app-preview .cal-event-bar {
  width: 4px;
  height: 38px;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

.mobile-app-preview .cal-event-main {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .cal-event-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .cal-event-time {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #171717;
}

.mobile-app-preview .cal-event-time .material-symbols-rounded {
  font-size: 12px;
}

.mobile-app-preview .cal-event-type {
  margin-top: 3px;
  font-size: 11.5px;
  color: #737373;
}

.mobile-app-preview .cal-event-actions {
  display: flex;
  gap: 6px;
  margin-left: 8px;
}

/* Calendar's View/Edit/Delete reuse the shared .leave-btn-action button,
   but per explicit instruction use a single neutral gray here instead of
   the shared class's default per-action blue/amber/red — scoped to this
   screen only so Payroll/Payroll Details' own .leave-btn-action usages
   (still on their original per-action colors) are unaffected. */
.mobile-app-preview .cal-event-actions .leave-btn-action.view,
.mobile-app-preview .cal-event-actions .leave-btn-action.edit,
.mobile-app-preview .cal-event-actions .leave-btn-action.delete {
  color: #6B7280;
  background: transparent;
}

.mobile-app-preview .cal-event-actions .leave-btn-action:hover {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

/* Event details bottom sheet */
.mobile-app-preview .cal-sheet {
  width: 100%;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  animation: slide-up-sheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.mobile-app-preview .cal-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 12px auto;
  border-radius: 99px;
  background: #E5E5E5;
  flex-shrink: 0;
}

.mobile-app-preview .cal-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.mobile-app-preview .cal-type-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.mobile-app-preview .cal-sheet-body {
  padding: 4px 20px 24px;
  margin-top: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.mobile-app-preview .cal-sheet-body::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .cal-sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .cal-sheet-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
}

.mobile-app-preview .cal-sheet-title+.cal-sheet-row {
  margin-top: 10px;
  font-weight: 600;
}

.mobile-app-preview .cal-sheet-row .material-symbols-rounded {
  font-size: 16px;
  color: #3B82F6;
  margin-top: 2px;
}

.mobile-app-preview .cal-sheet-sec {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .cal-sheet-text {
  margin-top: 4px;
  font-size: 12.5px;
  color: #737373;
}

/* Default-theme AlertDialog (delete holiday / meeting) */
.mobile-app-preview .cal-alert {
  min-width: 280px;
  max-width: 310px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 24px;
  align-self: center;
  margin: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.mobile-app-preview .cal-alert-title {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 400;
  color: #171717;
}

.mobile-app-preview .cal-alert-content {
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 1.43;
  color: #49454F;
}

.mobile-app-preview .cal-alert-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .cal-danger-btn {
  min-width: 64px;
  padding: 15px 0;
  border: none;
  border-radius: 16px;
  background: #DC2626;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.07), 0 6px 10px rgba(59, 130, 246, 0.05), 0 1px 18px rgba(59, 130, 246, 0.04);
}

.mobile-app-preview .cal-danger-btn .leave-spinner {
  width: 18px;
  height: 18px;
  border-color: #FFFFFF;
  border-right-color: transparent;
}

.mobile-app-preview .cal-alert-actions .leave-text-btn:disabled {
  color: rgba(23, 23, 23, 0.38);
  cursor: default;
}

/* Add / edit holiday & meeting sheet */
.mobile-app-preview .cal-form-sheet {
  padding: 12px 20px 20px;
}

.mobile-app-preview .cal-form-sheet .leave-sheet-handle {
  background: #E5E5E5;
  border-radius: 99px;
  margin-bottom: 16px;
}

.mobile-app-preview .cal-form-head {
  display: flex;
  align-items: center;
}

.mobile-app-preview .cal-form-head-main {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .cal-form-title {
  font-size: 18px;
  font-weight: 800;
  color: #171717;
}

.mobile-app-preview .cal-form-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #737373;
}

.mobile-app-preview .cal-form-close {
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: -8px;
}

.mobile-app-preview .cal-form-close .material-symbols-rounded {
  font-size: 20px;
}

.mobile-app-preview .cal-type-row {
  display: flex;
  margin-top: 16px;
}

.mobile-app-preview .cal-type-tile {
  flex: 1;
  margin-right: 8px;
  padding: 14px 0;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background: rgba(158, 158, 158, 0.08);
  color: #757575;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-app-preview .cal-type-tile .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}

.mobile-app-preview .cal-type-tile span:last-child {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

.mobile-app-preview .cal-type-tile.disabled {
  border-color: rgba(158, 158, 158, 0.15);
  background: rgba(158, 158, 158, 0.05);
  opacity: 0.4;
  cursor: default;
  color: #9E9E9E;
}

.mobile-app-preview .cal-form-fields {
  margin-top: 20px;
}

.mobile-app-preview .cal-form-fields .leave-fgroup:last-child {
  margin-bottom: 0;
}

.mobile-app-preview .cal-form-submit {
  width: 100%;
  height: 48px;
  margin-top: 24px;
  border: none;
  border-radius: 12px;
  background: #3B82F6;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.14), 0 6px 10px rgba(59, 130, 246, 0.1), 0 1px 18px rgba(59, 130, 246, 0.08);
}

.mobile-app-preview .cal-form-submit:disabled {
  background: rgba(23, 23, 23, 0.12);
  color: rgba(23, 23, 23, 0.38);
  box-shadow: none;
  cursor: default;
}

.mobile-app-preview .cal-form-submit .leave-spinner {
  width: 22px;
  height: 22px;
  border-width: 2.2px;
  border-color: #FFFFFF;
  border-right-color: transparent;
}

.mobile-app-preview .cal-options-loading {
  padding: 8px 0;
}

.mobile-app-preview .leave-field.has-suffix {
  padding-right: 40px;
}

.mobile-app-preview .leave-field-suffix {
  position: absolute;
  right: 14px;
  top: 19px;
  font-size: 18px;
  color: #49454F;
  pointer-events: none;
}

.mobile-app-preview .leave-field.noprefix .leave-field-arrow {
  right: 8px;
}

.mobile-app-preview .leave-field-value.multi {
  min-height: 20px;
}

.mobile-app-preview .leave-field-input.ta {
  min-height: 20px;
  overflow: auto;
}

/* Material time picker (showTimePicker, dial mode) */
.mobile-app-preview .cal-time {
  width: 328px;
  max-width: calc(100% - 24px);
  padding: 24px;
  background: #FFFFFF;
  border-radius: 28px;
  box-sizing: border-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-app-preview .cal-time-title {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #49454F;
}

.mobile-app-preview .cal-time-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.mobile-app-preview .cal-time-box {
  width: 96px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 57px;
  line-height: 1;
  background: #E6E0E9;
  color: #171717;
  cursor: pointer;
}

.mobile-app-preview .cal-time-box.active {
  background: #EADDFF;
  color: #21005D;
}

.mobile-app-preview .cal-time-colon {
  width: 24px;
  text-align: center;
  font-size: 57px;
  line-height: 1;
  color: #171717;
}

.mobile-app-preview .cal-time-period {
  width: 52px;
  height: 80px;
  margin-left: 12px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-app-preview .cal-period-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: #49454F;
  cursor: pointer;
}

.mobile-app-preview .cal-period-btn+.cal-period-btn {
  border-top: 1px solid #E5E5E5;
}

.mobile-app-preview .cal-period-btn.active {
  background: #FFD8E4;
  color: #31111D;
}

.mobile-app-preview .cal-dial {
  position: relative;
  width: 256px;
  height: 256px;
  margin: 36px auto 0;
  border-radius: 50%;
  background: #E6E0E9;
  cursor: pointer;
  touch-action: none;
}

.mobile-app-preview .cal-dial-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: #3B82F6;
  transform-origin: 0 50%;
  pointer-events: none;
}

.mobile-app-preview .cal-dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #3B82F6;
  pointer-events: none;
}

.mobile-app-preview .cal-dial-dot {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: #3B82F6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
}

.mobile-app-preview .cal-dial-dot.bare::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}

.mobile-app-preview .cal-dial-num {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #171717;
  pointer-events: none;
}

.mobile-app-preview .cal-time-actions {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.mobile-app-preview .cal-time-actions .kb {
  color: #49454F;
  padding: 8px;
  display: flex;
}

.mobile-app-preview .cal-time-actions .spacer {
  flex: 1;
}

/* Fine-tuning: calendar sheet uses 16px field text (default theme TextField), list rows keep double spaces */
.mobile-app-preview .pay-row-text {
  white-space: pre;
}

.mobile-app-preview .cal-form-sheet .leave-field {
  padding-top: 24px;
  padding-bottom: 8px;
}

.mobile-app-preview .cal-form-sheet .leave-field-value,
.mobile-app-preview .cal-form-sheet .leave-field-input {
  font-size: 16px;
  line-height: 24px;
  min-height: 24px;
}

.mobile-app-preview .cal-form-sheet textarea.leave-field-input {
  display: block;
}

.mobile-app-preview .leave-menu-item.simple.cal {
  font-size: 16px;
  font-weight: 400;
  color: #171717;
}

/* ==========================================================================
   Employee / user avatars: each shows a per-person photo (set per-element
   via the --avatar-url custom property, see setAvatarSeed() in preview.js)
   instead of initials. --avatar-url falls back to the bundled default
   image for any avatar element that never gets a seed assigned.
   ========================================================================== */
.mobile-app-preview .demo-role-avatar,
.mobile-app-preview .dashboard-avatar-btn,
.mobile-app-preview .greeting-avatar-circle,
.mobile-app-preview .birthday-avatar-inner,
.mobile-app-preview .team-att-avatar,
.mobile-app-preview .profile-avatar-box,
.mobile-app-preview .modal-bday-avatar-inner,
.mobile-app-preview .modal-att-avatar,
.mobile-app-preview .att-avatar,
.mobile-app-preview .leave-avatar {
  background-color: #ECEFF1;
  background-image: var(--avatar-url) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

/* ==========================================================================
   ANNOUNCEMENTS (announcements_screen.dart + html_editor_field.dart)
   Prefix: ann-
   ========================================================================== */
.mobile-app-preview .leave-pill.featured {
  background: #F5F3FF;
  color: #7C3AED;
}

.mobile-app-preview .ann-tabs-row {
  display: flex;
  align-items: center;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}

.mobile-app-preview .ann-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 38px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-app-preview .ann-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .ann-tab {
  flex: none;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #737373;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mobile-app-preview .ann-tab.active {
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 700;
}

.mobile-app-preview .ann-tab .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .ann-add-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-left: 8px;
  border: none;
  border-radius: 10px;
  background: #3B82F6;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-app-preview .ann-add-btn .material-symbols-rounded {
  font-size: 22px;
}

.mobile-app-preview .ann-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 8px 16px 24px;
}

.mobile-app-preview .ann-list::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .ann-card {
  padding: 16px;
  border-radius: 24px;
  cursor: pointer;
}

.mobile-app-preview .ann-card+.ann-card {
  margin-top: 12px;
}

.mobile-app-preview .ann-card-top {
  display: flex;
  align-items: flex-start;
}

.mobile-app-preview .ann-badges {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.mobile-app-preview .ann-cat {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.mobile-app-preview .ann-flag {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

.mobile-app-preview .ann-flag .material-symbols-rounded {
  font-size: 11px;
}

.mobile-app-preview .ann-flag.high {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.mobile-app-preview .ann-flag.featured {
  background: #F5F3FF;
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.mobile-app-preview .ann-more {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  color: #737373;
  display: flex;
  cursor: pointer;
}

.mobile-app-preview .ann-more .material-symbols-rounded {
  font-size: 18px;
}

.mobile-app-preview .ann-title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #171717;
}

.mobile-app-preview .ann-desc {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  color: #737373;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-app-preview .ann-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 12px;
}

.mobile-app-preview .ann-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #737373;
}

.mobile-app-preview .ann-meta-item .material-symbols-rounded {
  font-size: 12.5px;
}

.mobile-app-preview .ann-meta-item span:last-child {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .ann-empty {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-app-preview .ann-empty-icon {
  display: inline-flex;
  padding: 16px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.mobile-app-preview .ann-empty-icon .material-symbols-rounded {
  font-size: 36px;
}

.mobile-app-preview .ann-empty-title {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .ann-empty-msg {
  margin-top: 4px;
  font-size: 12px;
  color: #737373;
}

.mobile-app-preview .ann-error {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
}

.mobile-app-preview .ann-error>.material-symbols-rounded {
  font-size: 48px;
  color: #DC2626;
}

.mobile-app-preview .ann-error-msg {
  margin-top: 12px;
  font-size: 14px;
  color: #737373;
}

.mobile-app-preview .ann-error .leave-elevated-btn {
  margin-top: 16px;
}

.mobile-app-preview .ann-loading {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .ann-loading .leave-spinner {
  width: 36px;
  height: 36px;
  border-width: 4px;
}

/* Popup menu (PopupMenuButton) */
.mobile-app-preview .ann-popup {
  min-width: 112px;
}

.mobile-app-preview .ann-popup .leave-menu-item {
  font-size: 12.5px;
  color: #171717;
  white-space: nowrap;
  padding: 0 16px;
}

.mobile-app-preview .ann-popup .leave-menu-item.danger {
  color: #DC2626;
}

/* Detail dialog + HTML rendering */
.mobile-app-preview .leave-dialog.ann-dialog {
  width: calc(100% - 32px);
  max-width: 560px;
}

.mobile-app-preview .ann-dialog .leave-dvalue {
  -webkit-line-clamp: 3;
}

.mobile-app-preview .ann-pillwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 6px;
}

.mobile-app-preview .ann-pillwrap .leave-pill {
  margin-left: 0;
}

.mobile-app-preview .ann-content-box {
  margin-top: 6px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(245, 245, 245, 0.35);
  border: 1px solid rgba(229, 229, 229, 0.6);
}

.mobile-app-preview .ann-html {
  font-size: 13px;
  line-height: 1.5;
  color: #171717;
  word-wrap: break-word;
}

.mobile-app-preview .ann-html>*:first-child {
  margin-top: 0;
}

.mobile-app-preview .ann-html>*:last-child {
  margin-bottom: 0;
}

.mobile-app-preview .ann-html p {
  margin: 0 0 1em;
}

.mobile-app-preview .ann-html h1 {
  font-size: 2em;
  font-weight: 700;
  margin: 0.67em 0;
  line-height: 1.2;
}

.mobile-app-preview .ann-html h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.83em 0;
  line-height: 1.25;
}

.mobile-app-preview .ann-html ul,
.mobile-app-preview .ann-html ol {
  margin: 0 0 1em;
  padding-left: 28px;
}

.mobile-app-preview .ann-html ul {
  list-style: disc;
}

.mobile-app-preview .ann-html ol {
  list-style: decimal;
}

.mobile-app-preview .ann-html blockquote {
  margin: 0 0 1em;
  padding-left: 12px;
  border-left: 3px solid #E5E5E5;
  color: #525252;
}

.mobile-app-preview .ann-html hr {
  border: none;
  border-top: 1px solid #E5E5E5;
  margin: 0.6em 0;
}

.mobile-app-preview .ann-html a {
  color: #3B82F6;
  text-decoration: underline;
}

/* Compose sheet */
.mobile-app-preview .leave-sheet.ann-sheet {
  padding: 20px;
  max-height: 90%;
}

.mobile-app-preview .ann-form-title {
  font-size: 17px;
  font-weight: 800;
  color: #171717;
  margin-bottom: 16px;
}

.mobile-app-preview .ann-fg {
  margin-bottom: 12px;
}

.mobile-app-preview .ann-frow {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.mobile-app-preview .ann-frow .ann-fg {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.mobile-app-preview .ann-datef .leave-field-value {
  font-size: 13px;
}

.mobile-app-preview .ann-editor {
  margin-bottom: 14px;
}

.mobile-app-preview .ann-ed-label {
  font-size: 13px;
  font-weight: 700;
  color: #171717;
}

.mobile-app-preview .ann-mode-wrap {
  margin: 6px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-app-preview .ann-mode-wrap::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .ann-mode-capsule {
  display: inline-flex;
  height: 30px;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-sizing: border-box;
}

.mobile-app-preview .ann-mode-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #737373;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-app-preview .ann-mode-tab .material-symbols-rounded {
  font-size: 13px;
}

.mobile-app-preview .ann-mode-tab.active {
  background: #3B82F6;
  color: #FFFFFF;
  font-weight: 700;
}

.mobile-app-preview .ann-ed-box {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
}

.mobile-app-preview .ann-ed-box.error {
  border-color: #DC2626;
}

.mobile-app-preview .ann-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: #F5F5F5;
  border-bottom: 1px solid #E5E5E5;
  border-radius: 11px 11px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-app-preview .ann-toolbar::-webkit-scrollbar {
  display: none;
}

.mobile-app-preview .ann-tool {
  flex: none;
  width: 32px;
  height: 32px;
  margin: 0 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-app-preview .ann-tool:hover {
  background: rgba(59, 130, 246, 0.08);
}

.mobile-app-preview .ann-tool.pri {
  font-size: 12px;
  color: #3B82F6;
}

.mobile-app-preview .ann-tool .material-symbols-rounded {
  font-size: 16px;
}

.mobile-app-preview .ann-tool.clear {
  color: #DC2626;
}

.mobile-app-preview .ann-tool-sep {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: #E5E5E5;
}

.mobile-app-preview .ann-ta-wrap {
  padding: 10px 12px;
}

.mobile-app-preview .ann-ta {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: #171717;
  min-height: calc(13.5px * 1.45 * 4);
  max-height: calc(13.5px * 1.45 * 5);
  overflow-y: auto;
}

.mobile-app-preview .ann-ta::placeholder {
  color: #737373;
}

.mobile-app-preview .ann-ed-err {
  margin-top: 6px;
  font-size: 12px;
  color: #DC2626;
  display: none;
}

.mobile-app-preview .ann-ed-err.show {
  display: block;
}

.mobile-app-preview .ann-live {
  padding: 8px 12px;
  background: rgba(245, 245, 245, 0.5);
  border-top: 1px solid #E5E5E5;
  border-radius: 0 0 11px 11px;
}

.mobile-app-preview .ann-live-head {
  display: flex;
  align-items: center;
}

.mobile-app-preview .ann-live-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #3B82F6;
}

.mobile-app-preview .ann-live-title .material-symbols-rounded {
  font-size: 13px;
}

.mobile-app-preview .ann-live-toggle {
  margin-left: auto;
  padding: 2px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  color: #737373;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.mobile-app-preview .ann-live-toggle .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .ann-live-box {
  margin-top: 6px;
  min-height: 40px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(229, 229, 229, 0.7);
  border-radius: 8px;
  box-sizing: border-box;
}

.mobile-app-preview .ann-hint-italic {
  font-size: 12px;
  font-style: italic;
  color: #737373;
}

.mobile-app-preview .ann-full-preview {
  min-height: 140px;
  padding: 16px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
}

.mobile-app-preview .ann-full-preview .ann-html {
  font-size: 13.5px;
}

.mobile-app-preview .ann-full-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  text-align: center;
}

.mobile-app-preview .ann-full-empty .material-symbols-rounded {
  font-size: 28px;
  color: rgba(115, 115, 115, 0.5);
}

.mobile-app-preview .ann-full-empty div:nth-of-type(1) {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #737373;
}

.mobile-app-preview .ann-full-empty div:nth-of-type(2) {
  margin-top: 4px;
  font-size: 11.5px;
  color: #737373;
}

.mobile-app-preview .ann-code {
  background: #1E1E2E;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
}

.mobile-app-preview .ann-code-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #181825;
  border-radius: 11px 11px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-app-preview .ann-code-head .material-symbols-rounded {
  font-size: 16px;
  color: #FFD740;
}

.mobile-app-preview .ann-code-head span:last-child {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
}

.mobile-app-preview .ann-code-wrap {
  padding: 12px;
}

.mobile-app-preview .ann-code-ta {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  color: #A6E3A1;
  min-height: calc(12.5px * 1.4 * 5);
  max-height: calc(12.5px * 1.4 * 7);
  overflow-y: auto;
}

.mobile-app-preview .ann-code-ta::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.mobile-app-preview .ann-switch-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.mobile-app-preview .ann-switch-text {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .ann-switch-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #171717;
}

.mobile-app-preview .ann-switch-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: #737373;
}

.mobile-app-preview .ann-switch {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: #E5E5E5;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mobile-app-preview .ann-switch::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: all 0.15s ease;
}

.mobile-app-preview .ann-switch.on {
  background: #3B82F6;
}

.mobile-app-preview .ann-switch.on::after {
  top: 4px;
  left: 24px;
  width: 24px;
  height: 24px;
}

.mobile-app-preview .ann-form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.mobile-app-preview .ann-form-error .material-symbols-rounded {
  font-size: 16px;
  color: #DC2626;
}

.mobile-app-preview .ann-form-error span:last-child {
  flex: 1;
  font-size: 12.5px;
  color: #DC2626;
}

.mobile-app-preview .ann-submit {
  width: 100%;
  margin-top: 18px;
  padding: 15px 0;
  border: none;
  border-radius: 16px;
  background: #3B82F6;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  box-sizing: border-box;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.14), 0 6px 10px rgba(59, 130, 246, 0.1), 0 1px 18px rgba(59, 130, 246, 0.08);
}

.mobile-app-preview .ann-form-error+.ann-submit {
  margin-top: 12px;
}

.mobile-app-preview .ann-submit:disabled {
  background: rgba(23, 23, 23, 0.12);
  box-shadow: none;
  cursor: default;
}

.mobile-app-preview .ann-submit .leave-spinner {
  width: 20px;
  height: 20px;
  border-color: #FFFFFF;
  border-right-color: transparent;
}

/* Insert hyperlink dialog */
.mobile-app-preview .ann-link-layer {
  z-index: 320;
}

.mobile-app-preview .ann-link-dialog {
  width: 310px;
  max-width: calc(100% - 80px);
}

.mobile-app-preview .ann-link-fields .leave-fgroup {
  margin-bottom: 12px;
}

.mobile-app-preview .ann-link-fields .leave-fgroup:last-child {
  margin-bottom: 0;
}

.mobile-app-preview .ann-link-fields .leave-field-input {
  font-size: 16px;
  line-height: 24px;
  min-height: 24px;
}

.mobile-app-preview .ann-link-fields .leave-field {
  padding-top: 24px;
  padding-bottom: 8px;
}

.mobile-app-preview .cal-alert-title.sm {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-app-preview .cal-alert-content.fields {
  margin: 16px 0 24px;
}

.mobile-app-preview .cal-primary-btn {
  min-width: 64px;
  padding: 15px 0;
  border: none;
  border-radius: 16px;
  background: #3B82F6;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 5px -1px rgba(59, 130, 246, 0.14), 0 6px 10px rgba(59, 130, 246, 0.1), 0 1px 18px rgba(59, 130, 246, 0.08);
}

/* ==========================================================================
   DARK MODE — scoped to .mobile-chassis[data-theme="dark"] only.
   The outer showcase shell (sidebar/stage) is NEVER affected by this block,
   since it lives outside .mobile-chassis. Toggled from the Profile screen's
   "Dark mode" switch (see window.toggleDarkTheme). Rules using
   var(--scaffold-bg)/var(--card-bg)/var(--text-fg)/var(--text-muted)/
   var(--border-color)/var(--light-muted) already re-theme automatically via
   the custom-property redefinition near .mobile-chassis above; everything
   below covers the remaining hardcoded colors, grouped by role.
   ========================================================================== */

/* ---- Card / sheet / dialog surfaces (bg #FFFFFF -> #1F1F1F), with a soft-shadow border ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .mini-stat-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .employee-kpi-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .clock-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .team-attendance-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .announcement-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .floating-nav-bar,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-birthday-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-att-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-announcement-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-header-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-info-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-pref-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-pass-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-filter-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-filter-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-card {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Card/sheet surfaces with no visible border (SoftCard-style elevation) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .login-input-wrapper:focus-within,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-input-wrap:focus-within,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .bottom-sheet-modal,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .preview-dialog-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .preview-alert-dialog,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-softcard,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dialog,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-alert,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-sheet,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-summary,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dialog,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-alert,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time {
  background: #1F1F1F;
}

/* ---- Card/sheet surfaces with a solid hex border ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-role-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-ed-box,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-full-preview {
  background: #1F1F1F;
  border-color: #404040;
}

/* ---- Muted fills: inputs, filter panels, chips, dropdown pills (#F5F5F5/#F8FAFC/#F1F5F9/#F9FAFB -> #262626) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-search-input,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-tabs-wrapper,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-input-wrap,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-header-badge,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .capsule-tab-bar,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-desig-tag,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-progress-bar-wrap,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-empty-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-staff-badge,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-empty-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-toolbar,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-live,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-close-btn:hover,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .alert-btn-cancel:hover {
  background: #262626;
}

/* ---- Muted fills with a border to also recolor ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-credentials-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dd,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-tab-bar,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-outlined-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-attach,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dd,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-grid3-item,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-mode-capsule,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .filter-select,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-compare-box {
  background: #262626;
  border-color: #404040;
}

/* ---- Alpha-tinted muted panels ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dates-box {
  background: rgba(38, 38, 38, 0.6);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-live {
  background: rgba(38, 38, 38, 0.5);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-content-box {
  background: rgba(38, 38, 38, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-live-box {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.14);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-type-tile {
  background: rgba(255, 255, 255, 0.06);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-type-tile.disabled {
  background: rgba(255, 255, 255, 0.04);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ---- Primary/strong text (#171717, #1E293B, #0F172A -> #FAFAFA) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-app-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-header-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-card-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dates-range,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-empty-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dialog-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dvalue,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-alert-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-sheet-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-value,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-input,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-attach.has-file .leave-attach-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.simple.sheet,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-mi-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-headline,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-month,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-dow,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-day,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-back-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-header-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dd,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.simple.pay,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-card-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-sum-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-info-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entries-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-staff-badge,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entry-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-stat-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dialog-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-dr-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-dr-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-grid3-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp-date-val,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-chev,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-day,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-date-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-empty-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-time,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet-row,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet-sec,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-alert-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-form-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-form-close,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.simple.cal,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-empty-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-popup .leave-menu-item,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-html,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-form-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-ed-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-tool,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-ta,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-switch-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .alert-btn-cancel:hover,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .filter-select {
  color: #FAFAFA;
}

/* ---- "On-surface at 87%" black-alpha text -> white-alpha equivalent ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dd,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.simple,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-formula-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-dr-label {
  color: rgba(255, 255, 255, 0.87);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-dr.em .ps-dr-label {
  color: var(--c, rgba(255, 255, 255, 0.87));
}

/* ---- Secondary / muted text (#737373, #64748B, #94A3B8, #475569, #49454F, #616161, #525252 -> #A3A3A3) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-card-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-card-hint,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-role-email,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .clock-card-timezone,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .nav-tab-item,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-close-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-search-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-empty-state,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .alert-btn-cancel,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-tab-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-info-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-info-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-eye-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-desig-tag,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .capsule-tab-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .filter-select-arrow,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-time-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-reason-row,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-app-subtitle,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-tab-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-card-type,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dates-row,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-empty-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-empty-msg,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-close,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-alert-content,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-prefix,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field:focus-within .leave-field-input::placeholder,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dlabel,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-attach-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-attach-size,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-attach-clear,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-mi-sub,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.cancelled,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-dd .material-symbols-rounded,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-arrow,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-help,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-edit,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-arrows,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field-suffix,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dd .material-symbols-rounded,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-row,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-msg-card,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-msg-text,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-sum-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-info-row .material-symbols-rounded,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-info-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-formula-text,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entry-basic,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-stat-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dialog-sub,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dialog-x,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-dr-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-note,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-att-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-grid3-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp-code,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp-date-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ps-emp-date-val .material-symbols-rounded,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-dow span,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-chip,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-empty-icon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-empty-msg,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-type,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet-text,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-form-sub,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-alert-content,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-title,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-period-btn,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-actions .kb,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-tab,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-more,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-desc,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-meta-item,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-empty-msg,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-error-msg,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-mode-tab,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-ta::placeholder,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-live-toggle,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-hint-italic,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-full-empty div:nth-of-type(1),
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-full-empty div:nth-of-type(2),
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-switch-sub,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-html blockquote {
  color: #A3A3A3;
}

/* ---- Divider / border lines (#E5E5E5, #E2E8F0, #F1F5F9, #E5E7EB, #CAC4D0 -> #404040) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .dialog-header,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg-compare-box {
  border-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-drag-handle,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-divider,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-divider,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entry-div,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-div,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-sheet-handle,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-form-sheet .leave-sheet-handle,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-tool-sep,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .switch-slider,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-switch {
  background: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-sheet-handle {
  background: rgba(255, 255, 255, 0.16);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-period,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-period-btn+.cal-period-btn {
  border-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-html blockquote {
  border-left-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-html hr {
  border-top-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field.disabled {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ---- Disabled-state alpha overlays (Material "N% white" instead of "N% black") ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-field.disabled .leave-field-value,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-picker-day.disabled,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.disabled .leave-mi-name,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-alert-actions .leave-text-btn:disabled {
  color: rgba(255, 255, 255, 0.38);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-menu-item.disabled .leave-mi-sub {
  color: rgba(255, 255, 255, 0.26);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-submit:disabled,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-form-submit:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.38);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-submit:disabled {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Contrast rings cut into colored badges (white ring -> dark-card-colored ring) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .dashboard-avatar-btn {
  border-color: #1F1F1F;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-filter-dot,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-filter-dot {
  border-color: #1F1F1F;
}

/* ---- Material-3 native time-picker replica (calendar meeting form): dark M3 tokens ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-box,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-dial {
  background: #49454F;
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-colon,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-dial-num {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-time-box.active {
  background: #4F378B;
  color: #EADDFF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-period-btn.active {
  background: #633B48;
  color: #FFD8E4;
}

/* ---- Status / leave pills & flag badges: Flutter's real dark status palette
   (statusColorsFor()'s dark branch — 900-shade bg @ alpha + 200-shade text)
   instead of the light pastel chips, so badges stay legible on dark cards. ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.present,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.approved,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.approved,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.paid,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.completed,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.generated {
  background: rgba(6, 78, 59, 0.4);
  color: #A7F3D0;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.pending,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.pending,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.processing,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.draft {
  background: rgba(120, 53, 15, 0.4);
  color: #FDE68A;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.absent,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.rejected,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.rejected,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-flag.high {
  background: rgba(127, 29, 29, 0.4);
  color: #FECACA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.late,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.on-leave,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.featured,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-flag.featured {
  background: rgba(124, 58, 237, 0.25);
  color: #EDE9FE;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.downloaded {
  background: rgba(29, 78, 216, 0.3);
  color: #DBEAFE;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.half-day,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .status-pill.half_day {
  background: rgba(120, 53, 15, 0.4);
  color: #FDE68A;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave-pill.cancelled {
  background: #404040;
  color: #A3A3A3;
}

/* ---- Follow-up dark-mode fixes: gaps found on a full re-audit (hover overlays,
   demo-credential text, birthday cards, modal-close hover, icon-only muted text,
   alert-dialog body copy, badge text color, calendar chip border, code editor
   toolbar dividers, and the phone's own home-indicator bar). ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .app-bar-back-btn:hover,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .demo-role-name {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .birthday-card-item,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .birthday-avatar-inner,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-bday-avatar-inner {
  background: #1F1F1F;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .modal-close-btn:hover {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .profile-form-input-wrap {
  border-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att-header-badge,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .alert-dialog-content,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-msg-card>.material-symbols-rounded,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-info-row>.material-symbols-rounded {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay-dialog-body {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-chip {
  border-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-toolbar {
  border-bottom-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .ann-live {
  border-top-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .home-indicator {
  background: rgba(255, 255, 255, 0.35);
}

/* ---- Sidebar role-lock: greys out Payroll/Payroll Details/Payslips when the
   currently logged-in role can never reach them, with a small persistent
   note badge explaining why (see sidebarGoRoleLocked() / applySidebarRoleLocks()). ---- */
.mobile-app-preview .sidebar-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mobile-app-preview .sidebar-item.disabled:hover {
  background: transparent;
  color: #475569;
}

.mobile-app-preview .sidebar-item.disabled:hover .material-symbols-rounded {
  background: #F1F5F9;
  color: #64748B;
}

.mobile-app-preview .sidebar-item-lock {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #94A3B8;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ==========================================================================
   Attendance card v4 — "trending" redesign: identity, status and the 3-dot
   action menu all live in one full-width header row (dots pinned to the
   right end, right after the status pill), with a progress ring + compact
   time/flags section below. Isolated under att4- classes — the original
   .att-card (1:1 Flutter-match design, still used nowhere else) is left
   fully intact above, untouched, so reverting is a one-place template swap.
   ========================================================================== */
.mobile-app-preview .att4-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.mobile-app-preview .att4-card+.att4-card {
  margin-top: 12px;
}

.mobile-app-preview .att4-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
}

.mobile-app-preview .att4-id {
  flex: 1;
  min-width: 0;
}

/* Name, status pill and the 3-dot trigger share one explicit row — the
   status pill and the 3-dot are actual siblings of the name, not a
   separately-positioned group, so they always read as "the name's row". */
.mobile-app-preview .att4-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .att4-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Designation + date share one row. Designation is the one allowed to
   truncate (job titles vary a lot in length) via flex:1/min-width:0;
   the date stays flex-shrink:0 with no text-overflow clipping, so it's
   always fully visible regardless of how long the designation is. */
.mobile-app-preview .att4-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}

.mobile-app-preview .att4-desig {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .att4-dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #CBD5E1;
}

.mobile-app-preview .att4-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

.mobile-app-preview .att4-meta .material-symbols-rounded {
  font-size: 12px;
  flex-shrink: 0;
}

.mobile-app-preview .att4-toprow .status-pill {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 10px;
}

.mobile-app-preview .att4-icon-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-app-preview .att4-icon-btn .material-symbols-rounded {
  font-size: 16.5px;
}

.mobile-app-preview .att4-icon-btn:hover {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

.mobile-app-preview .att4-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F8FAFC;
}

.mobile-app-preview .att4-ring {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--ring-c, #64748B) calc(var(--pct, 0) * 3.6deg), #E2E8F0 0deg);
}

.mobile-app-preview .att4-ring-inner {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-app-preview .att4-ring-val {
  font-size: 12px;
  font-weight: 800;
  color: #171717;
  line-height: 1;
  letter-spacing: -0.2px;
}

.mobile-app-preview .att4-ring-unit {
  margin-top: 1px;
  font-size: 6.5px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.mobile-app-preview .att4-ring.flat {
  background: none;
}

.mobile-app-preview .att4-ring.flat .att4-ring-inner {
  inset: 0;
  background: var(--ring-c, #64748B);
  opacity: 0.14;
}

.mobile-app-preview .att4-flat-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ring-c, #64748B);
}

.mobile-app-preview .att4-flat-icon .material-symbols-rounded {
  font-size: 22px;
}

.mobile-app-preview .att4-info {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .att4-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.mobile-app-preview .att4-time .material-symbols-rounded {
  font-size: 14px;
  color: #94A3B8;
}

.mobile-app-preview .att4-time-sep {
  flex-shrink: 0;
  width: 10px;
  height: 1px;
  background: #CBD5E1;
  margin: 0 1px;
}

.mobile-app-preview .att4-note {
  font-size: 12px;
  font-weight: 600;
}

.mobile-app-preview .att4-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.mobile-app-preview .att4-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
}

.mobile-app-preview .att4-flag .material-symbols-rounded {
  font-size: 11px;
}

.mobile-app-preview .att4-flag.late {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-app-preview .att4-flag.early {
  background: rgba(180, 83, 9, 0.1);
  color: #B45309;
}

.mobile-app-preview .att4-flag.ot {
  background: rgba(79, 70, 229, 0.1);
  color: #4F46E5;
}

.mobile-app-preview .att4-popup {
  min-width: 132px;
}

.mobile-app-preview .att4-popup .leave-menu-item {
  font-size: 12.5px;
  color: #171717;
  white-space: nowrap;
  padding: 0 16px;
}

.mobile-app-preview .att4-popup .leave-menu-item.danger {
  color: #DC2626;
}

/* ---- Attendance card v4: dark-mode coverage ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-card {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-name {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-desig,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-meta {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-dot {
  background: #525252;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-icon-btn {
  color: #9CA3AF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F3F4F6;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-body {
  background: #262626;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-ring {
  background: conic-gradient(var(--ring-c, #94A3B8) calc(var(--pct, 0) * 3.6deg), #3A3A3D 0deg);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-ring-inner {
  background: #1F1F1F;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-ring.flat .att4-ring-inner {
  background: var(--ring-c, #94A3B8);
  opacity: 0.24;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-ring-val {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-ring-unit {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-time {
  color: #D1D5DB;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-time .material-symbols-rounded {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-time-sep {
  background: #525252;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .att4-popup .leave-menu-item {
  color: #FAFAFA;
}

/* ==========================================================================
   Regularization card v4 — same "trending" language as Attendance v4:
   identity + status + a 3-dot menu (holding View/Edit/Delete) share one
   full-width header row, dots at the right end right after the status
   pill. Approve/Reject stay as their own labelled buttons (not folded
   into the menu) per explicit instruction. Isolated under reg4- classes;
   the original .reg-card (1:1 Flutter-match design) is left untouched.
   ========================================================================== */
.mobile-app-preview .reg4-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.mobile-app-preview .reg4-card+.reg4-card {
  margin-top: 12px;
}

.mobile-app-preview .reg4-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
}

.mobile-app-preview .reg4-id {
  flex: 1;
  min-width: 0;
}

/* Name, status pill and the 3-dot trigger share one explicit row — the
   status pill and the 3-dot are actual siblings of the name, not a
   separately-positioned group, so they always read as "the name's row". */
.mobile-app-preview .reg4-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .reg4-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Employee code + date share one row — both are short, fixed-format
   strings (unlike a job-title designation), so combining them is safe and
   doesn't risk clipping the date away. */
.mobile-app-preview .reg4-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}

.mobile-app-preview .reg4-code {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

.mobile-app-preview .reg4-dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #CBD5E1;
}

.mobile-app-preview .reg4-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

.mobile-app-preview .reg4-meta .material-symbols-rounded {
  font-size: 12px;
  flex-shrink: 0;
}

.mobile-app-preview .reg4-toprow .status-pill {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 10px;
}

.mobile-app-preview .reg4-icon-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-app-preview .reg4-icon-btn .material-symbols-rounded {
  font-size: 16.5px;
}

.mobile-app-preview .reg4-icon-btn:hover {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

/* Before/after split: a recognizable comparison pattern, original time
   (faded, struck through) on the left, requested time (green, bold) on
   the right, with a small swap badge straddling the boundary. */
.mobile-app-preview .reg4-body {
  margin: 0 14px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F8FAFC;
}

.mobile-app-preview .reg4-split {
  position: relative;
  display: flex;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
}

.mobile-app-preview .reg4-half {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}

.mobile-app-preview .reg4-half.orig {
  opacity: 0.68;
}

.mobile-app-preview .reg4-half.req {
  background: rgba(5, 150, 105, 0.07);
}

.mobile-app-preview .reg4-half-label {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  color: #94A3B8;
}

.mobile-app-preview .reg4-half.req .reg4-half-label {
  color: #059669;
}

.mobile-app-preview .reg4-half-time {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.mobile-app-preview .reg4-half.orig .reg4-half-time {
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.4);
}

.mobile-app-preview .reg4-half.req .reg4-half-time {
  color: #059669;
}

.mobile-app-preview .reg4-swap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.mobile-app-preview .reg4-swap .material-symbols-rounded {
  font-size: 13px;
  color: #64748B;
}

.mobile-app-preview .reg4-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
  font-style: italic;
  color: #475569;
  line-height: 1.4;
}

.mobile-app-preview .reg4-reason .material-symbols-rounded {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
  color: #94A3B8;
}

.mobile-app-preview .reg4-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 14px;
}

.mobile-app-preview .reg4-foot-date {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .reg4-foot-date .material-symbols-rounded {
  font-size: 12.5px;
  flex-shrink: 0;
}

.mobile-app-preview .reg4-decision {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-app-preview .reg4-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.mobile-app-preview .reg4-btn .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .reg4-btn:hover {
  filter: brightness(0.96);
}

.mobile-app-preview .reg4-btn.approve {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.mobile-app-preview .reg4-btn.reject {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-app-preview .reg4-popup {
  min-width: 132px;
}

.mobile-app-preview .reg4-popup .leave-menu-item {
  font-size: 12.5px;
  color: #171717;
  white-space: nowrap;
  padding: 0 16px;
}

.mobile-app-preview .reg4-popup .leave-menu-item.danger {
  color: #DC2626;
}

/* ---- Regularization card v4: dark-mode coverage ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-card {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-name {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-code,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-meta,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-foot-date {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-dot {
  background: #525252;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-icon-btn {
  color: #9CA3AF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F3F4F6;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-body {
  background: #262626;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-split {
  background: #1F1F1F;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-half.req {
  background: rgba(52, 211, 153, 0.1);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-half-time {
  color: #D1D5DB;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-half.orig .reg4-half-time {
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-half.req .reg4-half-label,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-half.req .reg4-half-time {
  color: #34D399;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-swap {
  background: #1F1F1F;
  border-color: #404040;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-swap .material-symbols-rounded {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-reason {
  color: #D1D5DB;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-popup .leave-menu-item {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-btn.approve {
  background: rgba(52, 211, 153, 0.16);
  color: #34D399;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .reg4-btn.reject {
  background: rgba(248, 113, 113, 0.16);
  color: #F87171;
}

/* ==========================================================================
   Leave card v4 — same "trending" language as Attendance v4 / Regularizations
   v4: identity + type + status + a 3-dot menu (View/Edit/Delete) share one
   header, dots at the right end on the name's own row. Approve/Reject stay
   as their own labelled buttons in the footer, not folded into the menu.
   Isolated under leave4- classes; the original .leave-card (1:1 Flutter-
   match design) is left untouched and unused.
   ========================================================================== */
.mobile-app-preview .leave4-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.mobile-app-preview .leave4-card+.leave4-card {
  margin-top: 12px;
}

.mobile-app-preview .leave4-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
}

.mobile-app-preview .leave4-id {
  flex: 1;
  min-width: 0;
}

.mobile-app-preview .leave4-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-app-preview .leave4-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave4-toprow .leave-pill {
  flex-shrink: 0;
  margin-left: 0;
}

.mobile-app-preview .leave4-icon-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-app-preview .leave4-icon-btn .material-symbols-rounded {
  font-size: 16.5px;
}

.mobile-app-preview .leave4-icon-btn:hover {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

.mobile-app-preview .leave4-type {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
}

.mobile-app-preview .leave4-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-app-preview .leave4-type-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .leave4-body {
  margin: 0 14px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F8FAFC;
}

.mobile-app-preview .leave4-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
}

.mobile-app-preview .leave4-row+.leave4-row {
  margin-top: 6px;
}

.mobile-app-preview .leave4-row .material-symbols-rounded {
  font-size: 14px;
  color: #94A3B8;
  flex-shrink: 0;
}

.mobile-app-preview .leave4-row.applied {
  font-weight: 500;
  color: #94A3B8;
}

.mobile-app-preview .leave4-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 14px 14px;
}

.mobile-app-preview .leave4-foot.busy {
  justify-content: center;
  padding-top: 2px;
}

.mobile-app-preview .leave4-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.mobile-app-preview .leave4-btn .material-symbols-rounded {
  font-size: 14px;
}

.mobile-app-preview .leave4-btn:hover {
  filter: brightness(0.96);
}

.mobile-app-preview .leave4-btn.approve {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.mobile-app-preview .leave4-btn.reject {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

.mobile-app-preview .leave4-popup {
  min-width: 132px;
}

.mobile-app-preview .leave4-popup .leave-menu-item {
  font-size: 12.5px;
  color: #171717;
  white-space: nowrap;
  padding: 0 16px;
}

.mobile-app-preview .leave4-popup .leave-menu-item.danger {
  color: #DC2626;
}

/* ---- Leave card v4: dark-mode coverage ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-card {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-name {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-type {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-icon-btn {
  color: #9CA3AF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F3F4F6;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-body {
  background: #262626;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-row {
  color: #D1D5DB;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-row .material-symbols-rounded {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-row.applied {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-popup .leave-menu-item {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-btn.approve {
  background: rgba(52, 211, 153, 0.16);
  color: #34D399;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .leave4-btn.reject {
  background: rgba(248, 113, 113, 0.16);
  color: #F87171;
}

/* ==========================================================================
   Payroll card v4 — same "trending" language as Attendance/Regularizations/
   Leave v4: rounded shell, a tinted body panel of key stats, and a
   highlighted Net Pay strip with a chevron (the whole card stays tappable —
   there's only ever one action here, "view details", so no 3-dot menu is
   needed on this screen). Shared by both Payroll Runs and Payslips cards
   (same renderPayList() template, differing only in field names). Isolated
   under pay4- classes; the original .pay-card is left untouched and unused.
   ========================================================================== */
.mobile-app-preview .pay4-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.04);
  overflow: hidden;
  cursor: pointer;
}

.mobile-app-preview .pay4-card+.pay4-card {
  margin-top: 12px;
}

.mobile-app-preview .pay4-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 12px;
}

.mobile-app-preview .pay4-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay4-head .leave-pill {
  flex-shrink: 0;
  margin-left: 0;
}

.mobile-app-preview .pay4-body {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F8FAFC;
}

.mobile-app-preview .pay4-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
}

.mobile-app-preview .pay4-row+.pay4-row {
  margin-top: 6px;
}

.mobile-app-preview .pay4-row .material-symbols-rounded {
  font-size: 14px;
  color: #94A3B8;
  flex-shrink: 0;
}

.mobile-app-preview .pay4-net {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(37, 99, 235, 0.06);
  border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.mobile-app-preview .pay4-net-label {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  color: #64748B;
}

.mobile-app-preview .pay4-net-val {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: #2563EB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-preview .pay4-net-chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: #93C5FD;
}

/* ---- Payroll card v4: dark-mode coverage ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-card {
  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-title {
  color: #FAFAFA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-body {
  background: #262626;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-row {
  color: #D1D5DB;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-row .material-symbols-rounded {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-net {
  background: rgba(96, 165, 250, 0.1);
  border-top-color: rgba(96, 165, 250, 0.18);
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-net-label {
  color: #A3A3A3;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-net-val {
  color: #60A5FA;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pay4-net-chevron {
  color: #3B82F6;
}

/* ---- Calendar event actions: single neutral gray (dark) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-actions .leave-btn-action.view,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-actions .leave-btn-action.edit,
.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-actions .leave-btn-action.delete {
  color: #9CA3AF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .cal-event-actions .leave-btn-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F3F4F6;
}

/* ---- Payroll Details entry View button: single neutral gray (dark) ---- */
.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entry-head .leave-btn-action.view {
  color: #9CA3AF;
}

.mobile-app-preview .mobile-chassis[data-theme="dark"] .pd-entry-head .leave-btn-action.view:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F3F4F6;
}