* {
  box-sizing: border-box;
}

:root {
  --sidebar-width: 240px;
  --bg: #f4f6f8;
  --dark: #111827;
  --dark-2: #1f2937;
  --text: #111827;
  --muted: #6b7280;
  --border: #d6d6d6;
  --white: #ffffff;
  --gold: #d4af37;
  --danger: #dc2626;
  --warning: #f59e0b;
  --success: #16a34a;
}

/* GLOBAL */
html {
  scroll-behavior: auto;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: Arial, Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* TOPBAR */
.topbar {
  position: fixed;
  top: 0;
  height: 70px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  z-index: 20;
}

.topbar-title {
  font-weight: 800;
  font-size: 18px;
  color: var(--dark);
  white-space: nowrap;
}

/* LANGUAGE */
.lang-switch {
  display: flex;
  gap: 8px;
  background: #f3f4f6;
  padding: 5px;
  border-radius: 999px;
}

.lang-btn {
  display: inline-block;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  color: #374151;
  transition: 0.2s ease;
}

.lang-btn:hover,
.lang-btn.active {
  background: var(--dark);
  color: var(--white);
}

/* SIDEBAR */
.sidebar {
  position: fixed;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--dark);
  color: var(--white);
  padding: 22px 18px;
  z-index: 30;
  overflow-y: auto;
}

.sidebar h2 {
  font-size: 18px;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
}

.sidebar a {
  display: block;
  color: #d1d5db;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 15px;
  transition: 0.2s ease;
}

.sidebar a:hover {
  background: var(--dark-2);
  color: var(--white);
}

/* LAYOUT */
.main {
  min-height: 100vh;
  padding: 100px 30px 30px;
}

html[dir="rtl"] .sidebar {
  right: 0;
  left: auto;
}

html[dir="rtl"] .main {
  margin-right: var(--sidebar-width);
  margin-left: 0;
}

html[dir="rtl"] .topbar {
  right: var(--sidebar-width);
  left: 0;
}

html[dir="ltr"] .sidebar {
  left: 0;
  right: auto;
}

html[dir="ltr"] .main {
  margin-left: var(--sidebar-width);
  margin-right: 0;
}

html[dir="ltr"] .topbar {
  left: var(--sidebar-width);
  right: 0;
}

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-header h1 {
  margin: 0;
}

.page-header p {
  color: var(--muted);
  margin: 8px 0 0;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* PANELS */
.panel {
  background: var(--white);
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(17, 24, 39, 0.04);
  overflow-x: auto;
}

.panel h2 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--dark);
}

/* BUTTONS */
.primary-btn,
.filters-box button,
.search-box button {
  display: inline-block;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--dark);
  color: white;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.reset-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  background: #6b7280;
  color: white;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.danger-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.table-link {
  color: var(--dark);
  font-weight: 800;
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.danger-link {
  color: var(--danger);
  font-weight: 800;
  text-decoration: none;
}

.danger-link:hover {
  text-decoration: underline;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card {
  background: var(--white);
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(17, 24, 39, 0.04);
}

.card span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  color: var(--dark);
}

.card.border {
  border-inline-start: 5px solid var(--border);
}

.card.danger {
  border-inline-start: 5px solid var(--danger);
}

.card.warning {
  border-inline-start: 5px solid var(--warning);
}

/* DASHBOARD */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 2fr);
  gap: 18px;
  margin-top: 22px;
}

.list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.list-row span {
  color: #374151;
  word-break: break-word;
}

.list-row strong {
  color: var(--dark);
}

/* FORMS */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--dark);
}

/* FILTERS */
.filters-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.filters-box input,
.filters-box select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #fff;
}

.search-box {
  display: flex;
  gap: 10px;
}

.search-box input {
  width: 100%;
  max-width: 360px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}

/* TABLES */
.table-panel {
  margin-top: 18px;
  overflow-x: auto;
}

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

.data-table {
  min-width: 1100px;
}

.mini-table {
  min-width: 620px;
}

.data-table th,
.data-table td,
.mini-table th,
.mini-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  font-size: 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table th,
.mini-table th {
  background: #f9fafb;
  color: var(--muted);
  font-weight: 800;
}

.data-table td,
.mini-table td {
  color: #374151;
}

/* STATS */
.stats-line {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.stats-line span {
  color: var(--muted);
  font-weight: 700;
}

.stats-line strong {
  color: var(--dark);
  font-size: 18px;
}

/* EMPLOYEE PROFILE */
.profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}

.profile-card {
  background: var(--white);
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(17, 24, 39, 0.04);
  text-align: center;
}

.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 800;
  margin: 0 auto 14px;
}

.profile-card .profile-photo {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;
  border: 4px solid #f3f4f6;
}

.profile-card input[type="file"] {
  width: 100%;
  max-width: 240px;
  margin: 8px auto 14px;
  display: block;
}

.profile-card h2 {
  margin: 0;
  font-size: 20px;
}

.profile-card p {
  color: var(--muted);
  margin: 8px 0 20px;
}

.profile-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 12px 0;
  text-align: start;
}

.profile-meta span {
  color: var(--muted);
  font-size: 13px;
}

.profile-meta strong {
  font-size: 13px;
  color: var(--dark);
  text-align: end;
}

.profile-section {
  margin-top: 18px;
}

.save-bar {
  position: sticky;
  bottom: 0;
  margin-top: 18px;
  background: rgba(244, 246, 248, 0.92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  display: flex;
  justify-content: flex-end;
}

.save-bar button {
  padding: 13px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--dark);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

/* DOCUMENTS */
.document-box {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f9fafb;
}

.doc-link {
  display: block;
  margin-bottom: 8px;
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
}

.doc-link:hover {
  text-decoration: underline;
}

.remove-photo,
.remove-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

/* ALERTS */
.alert-success {
  background: #ecfdf5;
  color: #047857;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #a7f3d0;
  margin-bottom: 18px;
  font-weight: 700;
}

.alert-danger {
  background: #fef2f2;
  color: #b91c1c;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #fecaca;
  margin-bottom: 18px;
  font-weight: 700;
}

/* STATUS */
.status-pill,
.status-expired,
.status-soon,
.status-valid {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-pill {
  background: #e5e7eb;
  color: #374151;
}

.status-active,
.status-valid {
  background: #dcfce7;
  color: #166534;
}

.status-soon,
.status-on_leave {
  background: #fef3c7;
  color: #92400e;
}

.status-under_review {
  background: #e0f2fe;
  color: #075985;
}

.status-expired,
.status-deleted,
.status-terminated,
.status-resigned {
  background: #fee2e2;
  color: #991b1b;
}

.status-archived {
  background: #e5e7eb;
  color: #374151;
}

/* TABLET */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .dashboard-grid,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .filters-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*  emp edit */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.table-toolbar strong {
  color: var(--dark);
}

.table-toolbar span {
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  margin-inline-start: 8px;
}

.table-scroll {
  width: 100%;
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.employees-table {
  min-width: 1250px;
}

.employees-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f9fafb;
  box-shadow: 0 1px 0 var(--border);
}

.employees-table th,
.employees-table td {
  padding: 13px 12px;
}

.name-cell {
  font-weight: 800;
  color: var(--dark) !important;
  min-width: 220px;
}

.actions-col {
  position: sticky;
  inset-inline-end: 0;
  background: #fff;
  z-index: 4;
  min-width: 140px;
}

.employees-table thead .actions-col {
  z-index: 6;
  background: #f9fafb;
}

.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.small-btn {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.small-btn.danger {
  background: var(--danger);
}

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  resize: vertical;
}

.note-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.note-date {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.note-content {
  line-height: 1.7;
}

.note-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

.note-header strong{
    color:#111827;
}

.note-header span{
    color:#6b7280;
    font-size:12px;
}

@media (max-width: 768px) {
  .table-scroll {
    max-height: 70vh;
  }

  .employees-table {
    min-width: 1100px;
  }

  .employees-table th,
  .employees-table td {
    padding: 10px 9px;
    font-size: 13px;
  }

  .actions-col {
    min-width: 120px;
  }

  .small-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 16px;
  }

  .sidebar h2 {
    margin-bottom: 14px;
  }

  .sidebar a {
    display: inline-block;
    margin: 4px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .topbar {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 64px;
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  html[dir="rtl"] .topbar,
  html[dir="ltr"] .topbar {
    right: 0;
    left: 0;
  }

  html[dir="rtl"] .main,
  html[dir="ltr"] .main {
    margin: 0;
  }

  .main {
    padding: 20px 14px 24px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cards,
  .form-grid,
  .filters-box {
    grid-template-columns: 1fr;
  }

  .card,
  .panel {
    padding: 16px;
  }

  .card strong {
    font-size: 26px;
  }

  .search-box {
    flex-direction: column;
  }
}

/* SMALL MOBILE */
@media (max-width: 420px) {
  .topbar-title {
    width: 100%;
  }

  .lang-switch {
    width: 100%;
    justify-content: center;
  }

  .lang-btn {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
  }
}

.settings-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}

.settings-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-approved {
  background: #dcfce7;
  color: #166534;
}

.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

/* DASHBOARD ACCORDION FIX */
.dashboard-section {
  margin-top: 18px !important;
}

.accordion-btn {
  width: 100% !important;
  min-height: 58px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 24, 39, 0.06) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  margin-bottom: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.accordion-btn:hover {
  background: #f9fafb !important;
}

.accordion-content {
  display: none !important;
  margin-top: 12px !important;
}

.accordion-content.open {
  display: block !important;
}

.compact-cards {
  margin-top: 0 !important;
}

.compact-cards .card {
  padding: 18px !important;
}

@media (max-width: 768px) {
  .accordion-btn {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
}


.status-urgent,
.status-warning {
  background: #fee2e2;
  color: #991b1b;
}

.status-announcement,
.status-hr {
  background: #dbeafe;
  color: #1e40af;
}

.status-payroll,
.status-advance,
.status-leave {
  background: #dcfce7;
  color: #166534;
}

.notification-wrapper{
    position:relative;
}

.notification-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    cursor:pointer;
    font-size:20px;
}

.notification-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    background:#ef4444;
    color:#fff;
    min-width:18px;
    height:18px;
    border-radius:50%;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* PROFESSIONAL UI REFRESH */
:root {
  --bg: #eef2f6;
  --dark: #172033;
  --dark-2: #22304a;
  --text: #172033;
  --muted: #667085;
  --border: #d9e0ea;
  --white: #ffffff;
  --gold: #c59b2d;
  --focus: #2f6fed;
  --shadow-sm: 0 8px 20px rgba(23, 32, 51, 0.06);
  --shadow-md: 0 18px 45px rgba(23, 32, 51, 0.10);
}

body {
  background:
    linear-gradient(180deg, #f7f9fc 0%, var(--bg) 420px),
    var(--bg);
  color: var(--text);
  font-size: 15px;
}

.topbar {
  height: 76px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.05);
}

.topbar-title {
  letter-spacing: 0;
}

.topbar-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

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

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}

.user-chip strong {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  text-transform: capitalize;
}

.sidebar {
  background: linear-gradient(180deg, #111827 0%, #172033 100%);
  padding: 20px 14px;
  box-shadow: 12px 0 32px rgba(17, 24, 39, 0.14);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gold);
  color: #111827;
  font-weight: 900;
}

.sidebar-brand h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
}

.sidebar-brand small {
  color: #b7c0cf;
  font-weight: 800;
}

.sidebar a {
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 750;
}

.sidebar a:hover,
.sidebar a.active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.sidebar a.active {
  box-shadow: inset 4px 0 0 var(--gold);
}

html[dir="rtl"] .sidebar a.active {
  box-shadow: inset -4px 0 0 var(--gold);
}

.logout-link {
  margin-top: 18px !important;
  color: #fecaca !important;
}

.main {
  padding-top: 106px;
}

.page-header h1,
.main > h1 {
  font-size: 28px;
  letter-spacing: 0;
}

.panel,
.card,
.profile-card {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(23, 32, 51, 0.08);
}

.card {
  min-height: 132px;
}

.card strong {
  font-size: 34px;
}

.primary-btn,
.reset-btn,
.danger-btn,
.small-btn,
.filters-box button,
.search-box button,
.auth-form button {
  border-radius: 8px;
}

.primary-btn:hover,
.filters-box button:hover,
.search-box button:hover,
.auth-form button:hover {
  background: #0f172a;
}

.form-group input,
.form-group select,
.filters-box input,
.filters-box select,
.search-box input,
textarea {
  border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.data-table th,
.mini-table th {
  background: #f3f6fa;
}

.accordion-btn {
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* AUTH */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(23, 32, 51, 0.90)),
    #111827;
}

.auth-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.auth-shell.compact {
  width: min(880px, 100%);
}

.auth-brand,
.auth-card {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}

.auth-brand {
  min-height: 520px;
  padding: 44px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(197, 155, 45, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-kicker {
  color: #f5d77b;
  font-weight: 900;
  margin-bottom: 16px;
}

.auth-brand h1 {
  max-width: 520px;
  margin: 0;
  font-size: 44px;
  line-height: 1.08;
}

.auth-brand p {
  max-width: 520px;
  color: #d7deea;
  line-height: 1.8;
  margin: 18px 0 0;
}

.auth-highlights {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.auth-highlights span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.auth-card {
  padding: 34px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card-head h2 {
  margin: 0;
  font-size: 26px;
}

.auth-card-head p {
  color: var(--muted);
  line-height: 1.6;
  margin: 8px 0 24px;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-form input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}

.auth-form button {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  background: var(--dark);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.auth-alt-link {
  display: inline-flex;
  justify-content: center;
  margin-top: 18px;
  color: var(--dark);
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    min-height: auto;
    padding: 30px;
  }

  .auth-brand h1 {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .sidebar-brand {
    border-bottom: 0;
    padding-bottom: 8px;
  }

  .topbar-actions {
    width: 100%;
  }

  .user-chip {
    max-width: 100%;
  }

  .main {
    padding-top: 22px;
  }
}

@media (max-width: 460px) {
  .auth-page {
    padding: 14px;
  }

  .auth-card,
  .auth-brand {
    padding: 22px;
  }
}

.notification-box{
    display:none;
    background:#fff;
    border-radius:18px;
    margin-top:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    overflow:hidden;
}

.notification-box.show{
    display:block;
}

.notification-header{
    padding:15px;
    border-bottom:1px solid #eee;
}

.notification-item{
    padding:15px;
    border-bottom:1px solid #eee;
}

.notification-item p{
    margin:8px 0 0;
    color:#666;
    font-size:13px;
}

.notification-empty{
    padding:25px;
    text-align:center;
}

.status-pill{
    display:inline-block;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:900;
}

.status-pending{
    background:#fffbeb;
    color:#92400e;
}

.status-approved{
    background:#ecfdf5;
    color:#047857;
}

.status-rejected{
    background:#fef2f2;
    color:#b91c1c;
}

.danger-btn{
    border:0;
    background:#dc2626;
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    font-weight:900;
    cursor:pointer;
}

.full-width{
    grid-column:1 / -1;
}

.permissions-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    margin-top:8px;
}

.permission-check{
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 12px;
    background:#fff;
    font-weight:800;
    font-size:13px;
}

.permission-check input{
    width:16px;
    height:16px;
}

.user-editor{
    display:grid;
    gap:16px;
}

.user-form-section{
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px;
    background:#fff;
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid #edf2f7;
}

.section-head strong{
    color:var(--dark);
    font-size:15px;
}

.section-head span{
    color:var(--muted);
    font-size:12px;
}

.compact-form{
    grid-template-columns:repeat(3,minmax(180px,1fr));
}

.role-row{
    display:grid;
    grid-template-columns:minmax(220px,280px) 1fr;
    gap:14px;
}

.permission-groups{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
}

.permission-group{
    border:1px solid #edf2f7;
    border-radius:8px;
    padding:12px;
    background:#f9fafb;
}

.permission-group-title{
    color:var(--dark);
    font-weight:900;
    font-size:13px;
    margin-bottom:10px;
}

.permission-group .permission-check{
    border:0;
    background:#fff;
    margin-top:7px;
    padding:9px 10px;
}

.form-actions-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

@media (max-width: 900px){
    .compact-form,
    .role-row{
        grid-template-columns:1fr;
    }

    .section-head{
        display:block;
    }

    .section-head span{
        display:block;
        margin-top:5px;
    }
}

/* FINAL ADMIN UI UNIFICATION */
:root{
  --sidebar-width:248px;
  --bg:#eef2f6;
  --dark:#0b1f3a;
  --dark-2:#102a4c;
  --text:#111827;
  --muted:#667085;
  --border:#dde4ee;
  --gold:#d4af37;
  --panel:#ffffff;
  --shadow-sm:0 8px 20px rgba(15,23,42,.06);
}

body{
  background:#eef2f6!important;
}

.topbar{
  height:76px!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.05)!important;
}

.topbar-title{
  color:var(--dark)!important;
  font-size:18px!important;
  font-weight:900!important;
}

.topbar-subtitle{
  color:var(--muted)!important;
}

.topbar-actions{
  gap:10px!important;
}

.user-chip,
.lang-switch{
  border:1px solid var(--border)!important;
  background:#fff!important;
}

.lang-btn{
  border-radius:8px!important;
  padding:8px 12px!important;
}

.lang-btn.active,
.lang-btn:hover{
  background:var(--dark)!important;
  color:#fff!important;
}

.sidebar{
  background:linear-gradient(180deg,var(--dark) 0%,#0f172a 100%)!important;
  padding:20px 14px!important;
  box-shadow:12px 0 32px rgba(15,23,42,.14)!important;
}

.sidebar-brand{
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}

.sidebar-brand span{
  border-radius:8px!important;
}

.sidebar a{
  border-radius:8px!important;
  font-size:14px!important;
  font-weight:850!important;
  padding:11px 12px!important;
}

.sidebar a:hover,
.sidebar a.active{
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
}

.sidebar a.active{
  box-shadow:inset 4px 0 0 var(--gold)!important;
}

html[dir="rtl"] .sidebar a.active{
  box-shadow:inset -4px 0 0 var(--gold)!important;
}

.main{
  padding:104px 28px 32px!important;
}

.page-header{
  background:#fff!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  padding:18px 20px!important;
  box-shadow:var(--shadow-sm)!important;
}

.page-header h1,
.main > h1{
  color:var(--dark)!important;
  font-size:26px!important;
  font-weight:900!important;
}

.page-header p{
  margin-top:5px!important;
  color:var(--muted)!important;
}

.cards{
  gap:14px!important;
  margin-bottom:18px!important;
}

.card,
.panel,
.profile-card,
.note-card,
.permission-group{
  border-radius:8px!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
  background:#fff!important;
}

.card{
  min-height:112px!important;
  padding:18px!important;
}

.card span{
  color:var(--muted)!important;
  font-size:13px!important;
  font-weight:800!important;
}

.card strong{
  color:var(--dark)!important;
  font-size:28px!important;
}

.panel{
  padding:18px!important;
  margin-bottom:16px!important;
}

.panel h2{
  color:var(--dark)!important;
  font-size:17px!important;
  font-weight:900!important;
}

.form-grid,
.filters-box{
  gap:12px!important;
}

.form-group label{
  color:var(--muted)!important;
}

.form-group input,
.form-group select,
.filters-box input,
.filters-box select,
.search-box input,
textarea{
  min-height:42px!important;
  border-radius:8px!important;
  border:1px solid var(--border)!important;
  background:#fff!important;
}

.primary-btn,
.reset-btn,
.danger-btn,
.small-btn,
.filters-box button,
.search-box button{
  min-height:42px!important;
  border-radius:8px!important;
  font-weight:900!important;
}

.primary-btn,
.filters-box button,
.search-box button,
.small-btn{
  background:var(--dark)!important;
  color:#fff!important;
}

.reset-btn{
  background:#64748b!important;
}

.danger-btn,
.small-btn.danger{
  background:#dc2626!important;
}

.table-toolbar{
  background:#fff!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  padding:12px 14px!important;
}

.table-scroll{
  border-radius:8px!important;
  border:1px solid var(--border)!important;
  background:#fff!important;
}

.data-table th,
.mini-table th{
  background:#f3f6fa!important;
  color:#475467!important;
  font-size:12px!important;
  text-transform:none!important;
}

.data-table td,
.mini-table td{
  color:#344054!important;
  font-size:13px!important;
}

.data-table tbody tr:hover,
.mini-table tbody tr:hover{
  background:#f8fafc!important;
}

.status-pill,
.status-expired,
.status-soon,
.status-valid{
  border-radius:999px!important;
  padding:5px 10px!important;
}

.admin-notification-btn{
  border-radius:8px!important;
}

.admin-notification-menu{
  border-radius:8px!important;
}

@media (max-width:1024px){
  .main{
    padding-inline:20px!important;
  }

  .cards{
    grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  }

  .filters-box{
    grid-template-columns:repeat(2,minmax(160px,1fr))!important;
  }
}

@media (max-width:768px){
  .sidebar{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    box-shadow:none!important;
  }

  .topbar{
    position:sticky!important;
    inset-inline:0!important;
    height:auto!important;
    min-height:72px!important;
  }

  .main{
    margin:0!important;
    padding:18px 14px 26px!important;
  }

  .page-header{
    display:block!important;
  }

  .cards,
  .form-grid,
  .filters-box{
    grid-template-columns:1fr!important;
  }
}

/* COMPACT NAV + TABLE READABILITY */
.sidebar{
  display:flex!important;
  flex-direction:column!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
}

.muted-text{
  color:#64748b!important;
  font-size:13px!important;
  margin:0 0 16px!important;
  line-height:1.7!important;
}

.field-hint{
  display:block!important;
  margin-top:6px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.5!important;
}

.inline-action-form{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
}

button.table-link,
button.danger-link,
button.small-btn{
  appearance:none!important;
  font:inherit!important;
  cursor:pointer!important;
}

button.table-link,
button.danger-link{
  border:0!important;
  background:transparent!important;
  padding:0!important;
}

.check-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
  gap:8px!important;
}

.check-option{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px 12px!important;
  border:1px solid #dbe3ef!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:800!important;
}

.check-option input{
  width:16px!important;
  height:16px!important;
  accent-color:var(--gold)!important;
}

.shift-policy-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:14px!important;
}

.shift-policy-card{
  border:1px solid #dbe3ef!important;
  border-radius:8px!important;
  background:#fff!important;
  padding:14px!important;
}

.shift-policy-card.flexible-card{
  background:#fffdf5!important;
  border-color:#e4bd35!important;
}

.shift-policy-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:12px!important;
}

.shift-policy-head strong{
  color:#0f172a!important;
  font-size:15px!important;
}

.shift-policy-head span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:#eef2f7!important;
  color:#475569!important;
  font-size:12px!important;
  font-weight:900!important;
}

.shift-time-row{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important;
  gap:10px!important;
}

.shift-time-row label{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

.shift-time-row input{
  margin-top:6px!important;
}

.switch-line{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  cursor:pointer!important;
}

.switch-line input{
  width:18px!important;
  height:18px!important;
  accent-color:var(--gold)!important;
}

.days-field{
  grid-column:1/-1!important;
}

.days-selector{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(72px,1fr))!important;
  gap:8px!important;
}

.day-pill{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:74px!important;
  border:1px solid #dbe3ef!important;
  border-radius:8px!important;
  background:#fff!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}

.day-pill input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}

.day-short{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:999px!important;
  background:#eef2f7!important;
  color:#0f172a!important;
  font-weight:950!important;
  margin-bottom:6px!important;
}

.day-name{
  color:#475569!important;
  font-size:12px!important;
  font-weight:900!important;
}

.day-pill:has(input:checked){
  border-color:var(--gold)!important;
  background:#fff7dc!important;
  box-shadow:0 10px 22px rgba(212,175,55,.16)!important;
}

.day-pill:has(input:checked) .day-short{
  background:var(--gold)!important;
  color:var(--dark)!important;
}

@media(max-width:900px){
  .days-selector{
    grid-template-columns:repeat(4,minmax(72px,1fr))!important;
  }
}

.sidebar-section{
  margin-top:10px!important;
}

.sidebar-section-title{
  color:#93a4bd!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  padding:8px 10px 6px!important;
}

.sidebar a{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:40px!important;
  margin-bottom:3px!important;
  padding:9px 10px!important;
  overflow:hidden!important;
}

.nav-icon{
  width:26px!important;
  height:26px!important;
  flex:0 0 26px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.08)!important;
  color:#f5d77b!important;
  font-size:13px!important;
  line-height:1!important;
}

.nav-label{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.sidebar a.active .nav-icon{
  background:var(--gold)!important;
  color:var(--dark)!important;
}

.logout-link{
  margin-top:auto!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  padding-top:14px!important;
}

.table-toolbar{
  margin-bottom:10px!important;
}

.table-toolbar strong{
  font-size:15px!important;
}

.table-scroll{
  max-height:68vh!important;
}

.data-table,
.mini-table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

.data-table thead th,
.mini-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:0 1px 0 rgba(15,23,42,.06)!important;
}

.data-table th,
.data-table td,
.mini-table th,
.mini-table td{
  padding:10px 12px!important;
  line-height:1.45!important;
  border-bottom:1px solid #edf2f7!important;
}

.data-table tbody tr:nth-child(even),
.mini-table tbody tr:nth-child(even){
  background:#fbfcfe!important;
}

.data-table tbody tr:hover,
.mini-table tbody tr:hover{
  background:#fff7df!important;
}

.data-table td:first-child,
.mini-table td:first-child{
  font-weight:850!important;
  color:var(--dark)!important;
}

.data-table .table-link,
.mini-table .table-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:5px 8px!important;
  border-radius:7px!important;
  background:#eef4ff!important;
  color:#1d4ed8!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

.data-table .table-link:hover,
.mini-table .table-link:hover{
  background:#dbeafe!important;
  text-decoration:none!important;
}

.data-table input,
.data-table select{
  min-height:34px!important;
  padding:6px 8px!important;
  border-radius:7px!important;
}

.actions-col{
  box-shadow:-8px 0 18px rgba(15,23,42,.04)!important;
}

html[dir="rtl"] .actions-col{
  box-shadow:8px 0 18px rgba(15,23,42,.04)!important;
}

@media (max-width:768px){
  .sidebar-section-title{
    display:none!important;
  }

  .sidebar-section{
    display:inline!important;
    margin:0!important;
  }

  .sidebar a{
    display:inline-flex!important;
    max-width:calc(50% - 8px)!important;
    vertical-align:top!important;
  }

  .table-scroll{
    max-height:72vh!important;
  }
}

/* ============================================================
   ADMIN RESPONSIVE APP SHELL V1
   Mobile-first overrides for the HR admin workspace.
   ============================================================ */
.mobile-menu-btn,
.admin-mobile-nav,
.admin-sidebar-backdrop { display:none; }

@media (max-width: 768px) {
  html { overflow-x:hidden; }
  body {
    overflow-x:hidden;
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
    background:#f5f7fb;
  }

  .topbar {
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    min-height:64px!important;
    height:64px!important;
    padding:8px 12px!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    box-shadow:0 4px 18px rgba(15,23,42,.08)!important;
    z-index:60!important;
  }

  .mobile-menu-btn {
    display:grid!important;
    place-content:center!important;
    gap:4px!important;
    width:42px!important;
    height:42px!important;
    border:1px solid #e3e8ef!important;
    border-radius:12px!important;
    background:#fff!important;
    padding:0!important;
    cursor:pointer!important;
  }
  .mobile-menu-btn span {
    display:block!important;
    width:18px!important;
    height:2px!important;
    border-radius:99px!important;
    background:#0f172a!important;
  }

  .topbar-brand-copy { min-width:0!important; }
  .topbar-title {
    font-size:14px!important;
    line-height:1.2!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .topbar-subtitle {
    margin-top:2px!important;
    font-size:10px!important;
    line-height:1.2!important;
    color:#7b8798!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .topbar-actions {
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
  }
  .user-chip { display:none!important; }
  .lang-switch {
    padding:3px!important;
    gap:2px!important;
    border-radius:10px!important;
  }
  .lang-btn {
    padding:6px 7px!important;
    font-size:10px!important;
    border-radius:8px!important;
  }
  .admin-notification-btn {
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
  }
  .admin-notification-menu {
    position:fixed!important;
    top:70px!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    max-height:62vh!important;
    border-radius:16px!important;
  }

  .sidebar {
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    width:min(86vw,340px)!important;
    height:100dvh!important;
    padding:18px 14px 96px!important;
    z-index:100!important;
    overflow-y:auto!important;
    transition:transform .24s ease!important;
    box-shadow:0 24px 70px rgba(2,6,23,.30)!important;
  }
  html[dir="rtl"] .sidebar {
    right:0!important;
    left:auto!important;
    transform:translateX(105%)!important;
  }
  html[dir="ltr"] .sidebar {
    left:0!important;
    right:auto!important;
    transform:translateX(-105%)!important;
  }
  html[dir="rtl"] body.admin-mobile-menu-open .sidebar,
  html[dir="ltr"] body.admin-mobile-menu-open .sidebar {
    transform:translateX(0)!important;
  }
  body.admin-mobile-menu-open { overflow:hidden!important; }

  .sidebar-section-title { display:block!important; }
  .sidebar-section { display:block!important; margin-top:10px!important; }
  .sidebar a {
    display:flex!important;
    max-width:none!important;
    width:100%!important;
    margin:0 0 4px!important;
    padding:10px 11px!important;
    min-height:44px!important;
  }

  .admin-sidebar-backdrop {
    position:fixed!important;
    inset:0!important;
    z-index:90!important;
    background:rgba(2,6,23,.45)!important;
    backdrop-filter:blur(2px)!important;
  }
  .admin-sidebar-backdrop:not([hidden]) { display:block!important; }

  .admin-mobile-nav {
    position:fixed!important;
    right:10px!important;
    left:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:80!important;
    min-height:64px!important;
    padding:7px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid #e6ebf2!important;
    border-radius:20px!important;
    box-shadow:0 12px 38px rgba(15,23,42,.16)!important;
    backdrop-filter:blur(14px)!important;
  }
  .admin-mobile-nav a,
  .admin-mobile-nav button {
    border:0!important;
    background:transparent!important;
    color:#64748b!important;
    text-decoration:none!important;
    min-width:0!important;
    min-height:50px!important;
    padding:5px 2px!important;
    border-radius:14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    font:inherit!important;
    cursor:pointer!important;
  }
  .admin-mobile-nav a > span,
  .admin-mobile-nav button > span { font-size:18px!important; line-height:1!important; }
  .admin-mobile-nav small {
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9px!important;
    font-weight:800!important;
  }
  .admin-mobile-nav a.active {
    color:#0f172a!important;
    background:#fff4cc!important;
  }

  .main {
    margin:0!important;
    padding:82px 12px 18px!important;
    min-height:auto!important;
  }
  .main > h1,
  .page-header h1 {
    font-size:22px!important;
    line-height:1.25!important;
  }
  .page-header {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin-bottom:14px!important;
  }
  .header-actions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .header-actions > * { width:100%!important; }

  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .card {
    min-width:0!important;
    padding:14px!important;
    border-radius:16px!important;
    box-shadow:0 6px 18px rgba(15,23,42,.06)!important;
  }
  .card span { font-size:11px!important; line-height:1.35!important; }
  .card strong { margin-top:7px!important; font-size:24px!important; }

  .panel {
    padding:14px!important;
    border-radius:16px!important;
    box-shadow:0 6px 18px rgba(15,23,42,.05)!important;
  }
  .dashboard-grid,
  .profile-layout { grid-template-columns:1fr!important; gap:12px!important; }

  .form-grid,
  .filters-box,
  .shift-policy-grid { grid-template-columns:1fr!important; gap:10px!important; }
  input, select, textarea, button { font-size:16px; }
  .form-group input,
  .form-group select,
  textarea,
  .filters-box input,
  .filters-box select {
    min-height:46px!important;
    border-radius:12px!important;
  }
  .primary-btn,
  .reset-btn,
  .danger-btn,
  .filters-box button,
  .search-box button {
    min-height:44px!important;
    padding:11px 14px!important;
    border-radius:12px!important;
  }

  .table-scroll {
    width:100%!important;
    max-height:68dvh!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:14px!important;
  }
  .data-table,
  .mini-table,
  .employees-table { min-width:760px!important; }
  .data-table th,
  .data-table td,
  .mini-table th,
  .mini-table td,
  .employees-table th,
  .employees-table td {
    padding:9px 10px!important;
    font-size:12px!important;
  }
  .actions-col { min-width:116px!important; }

  .days-selector { grid-template-columns:repeat(2,minmax(0,1fr))!important; }

  .mobile-full-width,
  .search-box { width:100%!important; }
}

@media (max-width: 390px) {
  .topbar { grid-template-columns:42px minmax(0,1fr) auto!important; }
  .topbar-subtitle { display:none!important; }
  .lang-switch .lang-btn { padding:6px 5px!important; font-size:9px!important; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .card { padding:12px!important; }
  .card strong { font-size:21px!important; }
  .header-actions { grid-template-columns:1fr!important; }
  .admin-mobile-nav { right:6px!important; left:6px!important; }
}


/* ADMIN MOBILE NAV V2 — drawer only, opened from top hamburger */
@media (max-width: 768px) {
  body { padding-bottom: 0 !important; }
  .admin-mobile-nav { display: none !important; }
  .sidebar { padding-bottom: 24px !important; }
}

/* ADMIN MOBILE SHELL V3 — reliable off-canvas drawer + employee cards */
@media (max-width: 768px) {
  body:not(.admin-mobile-menu-open) .sidebar {
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.admin-mobile-menu-open .sidebar {
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .sidebar {
    display:block!important;
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    width:min(84vw,320px)!important;
    max-width:320px!important;
    height:100dvh!important;
    margin:0!important;
    z-index:1000!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    transition:transform .22s ease, visibility .22s!important;
  }
  html[dir="rtl"] body:not(.admin-mobile-menu-open) .sidebar { transform:translate3d(110%,0,0)!important; right:0!important; left:auto!important; }
  html[dir="ltr"] body:not(.admin-mobile-menu-open) .sidebar { transform:translate3d(-110%,0,0)!important; left:0!important; right:auto!important; }
  body.admin-mobile-menu-open .sidebar { transform:translate3d(0,0,0)!important; }
  .admin-sidebar-backdrop { z-index:999!important; }

  .topbar {
    grid-template-columns:44px minmax(0,1fr) auto!important;
    height:64px!important;
  }
  html[dir="rtl"] .mobile-menu-btn { grid-column:1!important; grid-row:1!important; }
  html[dir="rtl"] .topbar-brand-copy { grid-column:2!important; grid-row:1!important; }
  html[dir="rtl"] .topbar-actions { grid-column:3!important; grid-row:1!important; }
  .mobile-menu-btn { visibility:visible!important; opacity:1!important; }
  .topbar-actions .lang-switch { display:none!important; }
  .main { margin:0!important; width:100%!important; padding:78px 10px 18px!important; }

  .employees-desktop-table { display:none!important; }
  .employees-mobile-list { display:grid!important; gap:10px!important; }
  .employee-mobile-card {
    background:#fff; border:1px solid #e7ebf1; border-radius:15px; padding:13px;
    box-shadow:0 4px 14px rgba(15,23,42,.05); min-width:0;
  }
  .employee-mobile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .employee-mobile-name { font-size:14px; font-weight:900; color:#0f172a; line-height:1.4; overflow-wrap:anywhere; }
  .employee-mobile-id { flex:0 0 auto; font-size:12px; font-weight:900; color:#0b2342; background:#eef3f9; border-radius:999px; padding:5px 9px; }
  .employee-mobile-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
  .employee-mobile-field { min-width:0; background:#f8fafc; border-radius:10px; padding:8px 9px; }
  .employee-mobile-field small { display:block; color:#7b8798; font-size:9px; font-weight:800; margin-bottom:3px; }
  .employee-mobile-field strong { display:block; color:#1f2937; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
  .employee-mobile-status { margin-top:10px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
  .employee-mobile-actions { margin-top:11px; display:grid; grid-template-columns:1fr auto; gap:7px; }
  .employee-mobile-actions .small-btn { min-height:40px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; }
  .employee-mobile-more summary { list-style:none; cursor:pointer; min-height:40px; padding:10px 12px; border-radius:10px; background:#eef2f7; color:#0f172a; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; }
  .employee-mobile-more summary::-webkit-details-marker { display:none; }
  .employee-mobile-more[open] { grid-column:1/-1; }
  .employee-mobile-more .table-actions { margin-top:8px; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; }
  .employee-mobile-more form, .employee-mobile-more .small-btn { width:100%!important; }
  .table-panel { padding:10px!important; }
}
@media (min-width:769px) { .employees-mobile-list { display:none!important; } }