/* ============================================================
   iOS-style design system for Store Management System
   ============================================================ */

:root {
  --ios-blue: #007AFF;
  --ios-blue-dark: #0060DF;
  --ios-green: #34C759;
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;
  --ios-yellow: #FFCC00;
  --ios-gray: #8E8E93;
  --ios-gray2: #AEAEB2;
  --ios-gray3: #C7C7CC;
  --ios-gray4: #D1D1D6;
  --ios-gray5: #E5E5EA;
  --ios-gray6: #F2F2F7;

  --bg-primary: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-grouped: #FFFFFF;
  --text-primary: #1C1C1E;
  --text-secondary: #6C6C70;
  --text-tertiary: #AEAEB2;
  --separator: rgba(60, 60, 67, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.78);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ios-blue); text-decoration: none; }
a:hover { color: var(--ios-blue-dark); }

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---------------- Top bar (global) ---------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 18px;
  background: var(--ios-blue);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
}

.topbar-icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.16); }

.ios-menu-toggle {
  display: none;
  background: rgba(255,255,255,0.16);
  border: none;
  color: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  flex-shrink: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.topbar-brand-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.topbar-search {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.topbar-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  padding: 0 16px;
  height: 38px;
  width: 100%;
  max-width: 520px;
  color: rgba(255,255,255,0.85);
}
.topbar-search-inner input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  width: 100%;
  font-family: var(--font-sans);
}
.topbar-search-inner input::placeholder { color: rgba(255,255,255,0.75); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin-left: 6px;
}
.topbar-user:hover { background: rgba(255,255,255,0.14); }
.topbar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--ios-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.topbar-user-text { line-height: 1.25; white-space: nowrap; }
.topbar-user-name { font-size: 13px; font-weight: 700; }
.topbar-user-role { font-size: 11px; color: rgba(255,255,255,0.75); }

/* ---------------- Sidebar (iOS "Settings" style split view) ---------------- */

.ios-sidebar {
  width: 258px;
  flex: 0 0 258px;
  min-width: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  padding: 16px 12px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
}

.ios-sidebar-nav { flex: 1; }

.ios-nav-group {
  margin-bottom: 16px;
}

.ios-nav-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  padding: 6px 12px 6px;
  white-space: nowrap;
  overflow: hidden;
}

.ios-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

.ios-nav-link .glyph {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ios-nav-link:hover {
  background: var(--ios-gray6);
  color: var(--text-primary);
}
.ios-nav-link:hover .glyph { color: var(--text-primary); }

.ios-nav-link.active {
  background: rgba(0, 122, 255, 0.1);
  color: var(--ios-blue);
  border-left-color: var(--ios-blue);
  font-weight: 700;
}
.ios-nav-link.active .glyph { color: var(--ios-blue); }

.ios-sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid var(--separator);
  margin-top: 8px;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
}
.ios-sidebar-collapse:hover { color: var(--text-primary); }
.ios-sidebar-collapse .glyph {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.ios-sidebar.collapsed { width: 72px; flex: 0 0 72px; }
.ios-sidebar.collapsed .ios-nav-label,
.ios-sidebar.collapsed .ios-sidebar-collapse .label { display: none; }
.ios-sidebar.collapsed .ios-nav-link { font-size: 0; justify-content: center; padding: 10px; border-left: none; }
.ios-sidebar.collapsed .ios-nav-link.active { border-left: none; background: rgba(0,122,255,0.12); }
.ios-sidebar.collapsed .ios-sidebar-collapse { justify-content: center; }
.ios-sidebar.collapsed .ios-sidebar-collapse .glyph { transform: rotate(180deg); }

/* ---------------- Main content ---------------- */

.ios-main {
  flex: 1;
  min-width: 0;
  padding: 28px 34px 60px;
}

.ios-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.ios-page-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0;
}

.ios-page-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

/* ---------------- Cards ---------------- */

.ios-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--separator);
}

.ios-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ios-card-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

/* Grouped inset list, like iOS Settings rows */

.ios-list {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--separator);
}

.ios-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--separator);
  color: var(--text-primary);
}

.ios-list-row:last-child { border-bottom: none; }

.ios-list-row.link:hover { background: var(--ios-gray6); }

.ios-list-row .row-main { min-width: 0; }
.ios-list-row .row-title { font-weight: 600; font-size: 15px; }
.ios-list-row .row-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.ios-list-row .chevron { color: var(--ios-gray3); font-size: 14px; }

.ios-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.ios-empty .icon { font-size: 34px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.ios-empty .icon svg { width: 34px; height: 34px; }

/* ---------------- Stat tiles ---------------- */

.ios-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.ios-stat-tile {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--separator);
  padding: 18px;
}

.ios-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  margin-bottom: 12px;
}

.ios-stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.ios-stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* ---------------- Buttons ---------------- */

.btn-ios {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
}
.btn-ios:active { transform: scale(0.97); }

.btn-ios-primary { background: var(--ios-blue); color: #fff; }
.btn-ios-primary:hover { background: var(--ios-blue-dark); color: #fff; }

.btn-ios-secondary { background: var(--ios-gray5); color: var(--text-primary); }
.btn-ios-secondary:hover { background: var(--ios-gray4); color: var(--text-primary); }

.btn-ios-danger { background: rgba(255,59,48,0.12); color: var(--ios-red); }
.btn-ios-danger:hover { background: rgba(255,59,48,0.2); color: var(--ios-red); }

.btn-ios-success { background: var(--ios-green); color: #fff; }
.btn-ios-success:hover { background: #28A745; color: #fff; }

.btn-ios-sm { padding: 6px 14px; font-size: 13px; }

/* ---------------- Forms ---------------- */

.ios-form-group { margin-bottom: 16px; }

.ios-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
}

.form-check-input { width: 18px; height: 18px; }

.text-danger { color: var(--ios-red) !important; font-size: 12.5px; }
.field-validation-error { color: var(--ios-red); font-size: 12.5px; }
.input-validation-error { border-color: var(--ios-red) !important; }

/* Segmented control (used for tabs on Store details) */

.ios-segmented {
  display: inline-flex;
  background: var(--ios-gray6);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ios-segmented a {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ios-segmented a.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Badges */

.ios-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.badge-blue { background: rgba(0,122,255,0.12); color: var(--ios-blue); }
.badge-green { background: rgba(52,199,89,0.14); color: #248A3D; }
.badge-red { background: rgba(255,59,48,0.12); color: var(--ios-red); }
.badge-orange { background: rgba(255,149,0,0.14); color: #B25000; }
.badge-gray { background: var(--ios-gray5); color: var(--text-secondary); }

/* Avatar */

.ios-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--ios-blue), #5AC8FA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ios-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ios-avatar-placeholder {
  width: 62%;
  height: 62%;
  opacity: 0.9;
}

/* ---------------- Login page ---------------- */

.ios-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #EAF3FF 0%, #F2F2F7 45%, #EAFBEF 100%);
  padding: 20px;
}

.ios-auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  padding: 36px 32px;
  border: 1px solid var(--separator);
}

.ios-auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(155deg, #34C759, #0AA33E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 18px;
  box-shadow: 0 10px 24px rgba(52,199,89,0.35);
}

.ios-auth-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.ios-auth-subtitle { text-align: center; color: var(--text-secondary); font-size: 13.5px; margin-bottom: 26px; }

/* Table (documents / contracts on wider screens) */

.ios-table { width: 100%; border-collapse: collapse; }
.ios-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--separator);
}
.ios-table td {
  padding: 12px;
  border-bottom: 1px solid var(--separator);
  font-size: 14.5px;
  vertical-align: middle;
}
.ios-table tr:last-child td { border-bottom: none; }

/* Alerts */
.ios-alert {
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.ios-alert-success { background: rgba(52,199,89,0.12); color: #248A3D; border-color: rgba(52,199,89,0.25); }
.ios-alert-danger { background: rgba(255,59,48,0.1); color: var(--ios-red); border-color: rgba(255,59,48,0.25); }
.ios-alert-info { background: rgba(0,122,255,0.1); color: var(--ios-blue-dark); border-color: rgba(0,122,255,0.2); }

.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* ---------------- Dashboard widgets ---------------- */

.ios-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 4px;
}

.ios-task-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin: 14px 0 6px;
}
.ios-task-group-label:first-child { margin-top: 0; }
.ios-task-group-label.overdue { color: var(--ios-red); }
.ios-task-group-label.due-today { color: #FF9500; }

.ios-task-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--separator);
  font-size: 14px;
}
.ios-task-row:last-child { border-bottom: none; }
.ios-task-row .task-name { font-weight: 500; }
.ios-task-row .task-due { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.ios-task-row .task-due.overdue { color: var(--ios-red); font-weight: 600; }

.ios-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.ios-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--text-primary);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ios-tile:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); color: var(--text-primary); }
.ios-tile .tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0,122,255,0.12);
  color: var(--ios-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.ios-tile .tile-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.ios-tile .tile-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.ios-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 14px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  padding: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.ios-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ios-checkbox-item input { margin: 0; }

/* ---------------- Contacts-module sidebar & breadcrumb ---------------- */

.ios-sidebar-section-title {
  font-size: 20px;
  font-weight: 800;
  padding: 6px 12px 14px;
}
.ios-sidebar.collapsed .ios-sidebar-section-title { display: none; }

.ios-breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ios-breadcrumb span { margin: 0 4px; }

/* ---------------- Contacts workspace (3-pane) ---------------- */

.ios-contacts-workspace {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1200px) {
  .ios-contacts-workspace { grid-template-columns: 1fr; }
}

.ios-contacts-list-pane, .ios-contacts-detail-pane, .ios-contacts-documents-pane {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-anchor: none;
}

.ios-contacts-detail-pane.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  max-height: 100vh;
  width: 100vw;
  margin: 0;
  border-radius: 0;
  padding: 24px 34px;
}
body.contact-pane-fullscreen-active { overflow: hidden; }

.ios-contact-row { border-bottom: 1px solid var(--separator); }
.ios-contact-row:last-child { border-bottom: none; }
.ios-contact-row-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.ios-contact-row-link:hover { background: var(--ios-gray6); color: var(--text-primary); }
.ios-contact-row.selected .ios-contact-row-link { background: rgba(0,122,255,0.1); }
.ios-contact-row.selected .row-title { color: var(--ios-blue); }

.ios-contact-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ios-contact-name { font-size: 20px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.ios-favorite-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ios-yellow);
  line-height: 1;
  padding: 0;
}

.ios-contact-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--text-secondary);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--separator);
}

.ios-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 18px;
}
.ios-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-tertiary); margin-bottom: 3px; }
.ios-field-value { font-size: 14px; color: var(--text-primary); }

.ios-tabstrip {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 16px;
  overflow-x: auto;
}
.ios-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  margin-right: 14px;
}
.ios-tab-btn:hover { color: var(--text-primary); }
.ios-tab-btn.active { color: var(--ios-blue); border-bottom-color: var(--ios-blue); }

.ios-tab-panel { display: none; }
.ios-tab-panel.active { display: block; }

/* Secondary filter strip - a row of filter chips nested one level under an
   .ios-tabstrip (e.g. Sent/Received under Emails, PDF/Word/Excel under
   Documents). Deliberately a *pill/segmented* look rather than the parent's
   underline tabs, so the two levels never read as "two stacked identical
   tab bars" - the eye immediately knows which one is the page-level tab
   and which is the filter underneath it. */
.ios-subtab-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  background: var(--ios-gray6);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 14px;
}
.ios-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.ios-subtab-btn:hover { color: var(--text-primary); }
.ios-subtab-btn.active {
  background: var(--bg-elevated);
  color: var(--ios-blue);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* ---------------- Outlook-style email list + modal ---------------- */

.outlook-list { display: flex; flex-direction: column; }

.outlook-date-group {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  padding: 14px 6px 6px;
}
.outlook-date-group:first-child { padding-top: 2px; }

.outlook-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--separator);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.outlook-row:hover { background: var(--ios-gray6); }
.outlook-row:last-child { border-bottom: none; }
.outlook-row.selected { background: rgba(0,122,255,0.1); }

.outlook-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.outlook-row-icon.received { background: rgba(52,199,89,0.15); color: var(--ios-green, #34C759); }
.outlook-row-icon.sent { background: rgba(0,122,255,0.12); color: var(--ios-blue); }
.outlook-row-icon.reply { background: rgba(175,82,222,0.15); color: #AF52DE; }
.outlook-row-icon.forward { background: rgba(255,149,0,0.15); color: var(--ios-orange, #FF9500); }

.outlook-row-main { flex: 1; min-width: 0; }

.outlook-row-reply-btn {
  flex-shrink: 0;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-gray6);
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}
.outlook-row-reply-btn:hover { background: rgba(0,122,255,0.15); color: var(--ios-blue); }

.outlook-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; }
.outlook-row-sender { font-weight: 500; font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outlook-row-flags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; color: var(--text-secondary); }
.outlook-paperclip { display: inline-flex; color: var(--text-tertiary); }
.outlook-paperclip svg { width: 13px; height: 13px; }
.outlook-row-date { flex-shrink: 0; }
.outlook-row-subject { font-size: 13.5px; font-weight: 400; color: var(--text-primary); margin-bottom: 2px; }
.outlook-row-preview {
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unread emails render bold (sender + subject), like Outlook; read ones don't. */
.outlook-row.unread { position: relative; }
.outlook-row.unread::before {
  content: ''; position: absolute; left: -2px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ios-blue);
}
.outlook-row.unread .outlook-row-sender,
.outlook-row.unread .outlook-row-subject { font-weight: 700; }

.outlook-search { position: relative; margin-bottom: 10px; }
.outlook-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-tertiary); pointer-events: none;
}
.outlook-search input {
  width: 100%; padding: 8px 32px 8px 32px; font-size: 13px;
  border: 1px solid var(--separator); border-radius: var(--radius-sm);
  background: var(--ios-gray6); color: var(--text-primary);
}
.outlook-search input:focus { outline: none; border-color: var(--ios-blue); background: var(--bg-elevated); }
.outlook-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; background: none; cursor: pointer;
  color: var(--text-tertiary); display: none; align-items: center; justify-content: center; border-radius: 50%;
}
.outlook-search-clear:hover { background: var(--ios-gray5); color: var(--text-primary); }
.outlook-search-clear svg { position: static; transform: none; width: 12px; height: 12px; }

.outlook-row mark, .document-row mark {
  background: rgba(255, 204, 0, 0.55);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.outlook-loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
}
.outlook-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--ios-gray4); border-top-color: var(--ios-blue);
  animation: outlook-spin 0.7s linear infinite;
}
@keyframes outlook-spin { to { transform: rotate(360deg); } }

.outlook-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.outlook-modal {
  background: var(--card-bg, #fff);
  border-radius: var(--radius-lg, 14px);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.outlook-modal-overlay.fullscreen-active { padding: 0; }
.outlook-modal.fullscreen {
  max-width: 100vw;
  width: 100vw;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
}

.outlook-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.outlook-modal-subject { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.outlook-modal-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.outlook-modal-close-btn, .outlook-modal-maximize-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ios-gray6); border: none; cursor: pointer; color: var(--text-secondary);
}
.outlook-modal-close-btn:hover, .outlook-modal-maximize-btn:hover { background: var(--ios-gray5); color: var(--text-primary); }

.outlook-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-primary);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--separator);
}
.outlook-modal-meta-label { font-weight: 700; color: var(--text-secondary); display: inline-block; min-width: 46px; }

.outlook-modal-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.outlook-modal-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ios-gray6);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.outlook-modal-attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.outlook-modal-attachment-dl { font-size: 12px; font-weight: 700; color: var(--ios-blue); flex-shrink: 0; }

.outlook-modal-tabstrip { margin-bottom: 12px; }

.outlook-modal-loading { font-size: 13px; color: var(--text-secondary); padding: 10px 0; }

/* ---------------- Documents tab (attachments) ---------------- */

.document-filter-bar { margin-bottom: 12px; }
.document-type-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.document-search { margin-bottom: 0; }

.document-list { display: flex; flex-direction: column; }

.document-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 10px 0;
  border-bottom: 1px solid var(--separator);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.document-row:hover { background: var(--ios-gray6); }
.document-row:last-child { border-bottom: none; }
.document-row-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.document-row-main { flex: 1; min-width: 0; }
.document-row-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-row-sub { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-row-dl { flex-shrink: 0; white-space: nowrap; align-self: center; }

.document-row-title-line { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.document-row-title-input {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
}
.document-row-title-input:hover, .document-row-title-input:focus {
  border-color: var(--separator);
  background: var(--card-bg, #fff);
  outline: none;
}
.document-row-title-save {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  color: var(--ios-blue);
}
.document-row-title-save:hover { background: var(--ios-gray6); }
.document-row-title-save:disabled { opacity: 0.6; cursor: default; }

.ios-tag-chip {
  display: inline-block;
  background: var(--ios-gray6);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.task-check-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ios-blue);
  line-height: 1;
  padding: 0;
}

.ios-task-row .task-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--ios-gray3);
  flex-shrink: 0;
  margin-right: 4px;
}

.ios-task-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }

.ios-card-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: -10px; margin-bottom: 12px; }

.ios-event-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
}
.ios-event-row:last-child { border-bottom: none; }
.ios-event-time {
  flex-shrink: 0;
  width: 68px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.ios-event-time .duration { display: block; font-weight: 400; color: var(--text-secondary); font-size: 11.5px; }
.ios-event-body {
  border-left: 3px solid var(--ios-blue);
  padding-left: 12px;
  min-width: 0;
}
.ios-event-title { font-weight: 600; font-size: 14px; }
.ios-event-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.ios-announce-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.ios-announce-row:last-child { border-bottom: none; }
.ios-announce-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ios-announce-title { font-weight: 700; font-size: 14.5px; }
.ios-announce-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.ios-announce-date { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; }

.ios-tile .tile-icon.icon-purple { background: rgba(175,82,222,0.12); color: #AF52DE; }
.ios-tile .tile-icon.icon-blue { background: rgba(0,122,255,0.12); color: var(--ios-blue); }
.ios-tile .tile-icon.icon-green { background: rgba(52,199,89,0.12); color: #248A3D; }
.ios-tile .tile-icon.icon-teal { background: rgba(48,176,199,0.14); color: #1C93A6; }
.ios-tile .tile-icon.icon-orange { background: rgba(255,149,0,0.14); color: #C36F00; }
.ios-tile .tile-icon.icon-pink { background: rgba(255,45,85,0.12); color: #FF2D55; }
.ios-tile .tile-icon.icon-yellow { background: rgba(255,204,0,0.18); color: #A9860A; }
.ios-tile .tile-icon.icon-indigo { background: rgba(88,86,214,0.12); color: #5856D6; }

/* Utility */
/* ---------------- Store Operations dashboard (StoreUser role) ---------------- */

.store-ops-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .store-ops-layout { grid-template-columns: 1fr; }
}
.store-ops-side { display: flex; flex-direction: column; gap: 20px; }

.kpi-view-toggle {
  display: flex;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.kpi-view-btn {
  background: var(--card-bg, #fff);
  border: none;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
}
.kpi-view-btn.active { background: var(--ios-blue); color: #fff; }

.kpi-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.kpi-tile {
  border: 1px solid var(--separator);
  border-radius: var(--radius-md, 12px);
  padding: 14px;
  background: var(--ios-gray6);
}
.kpi-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 10px;
}
.kpi-tile-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; }
.kpi-tile-value { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.kpi-tile-delta { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.kpi-tile-delta.good { color: var(--ios-green); }
.kpi-tile-delta.bad { color: var(--ios-red); }
.kpi-tile-delta span { color: var(--text-tertiary); font-weight: 500; margin-left: 3px; }
.kpi-tile-chart { margin-bottom: 8px; }
.kpi-tile-target { font-size: 11.5px; color: var(--text-tertiary); border-top: 1px solid var(--separator); padding-top: 8px; }

.kpi-data-good { color: var(--ios-green); font-weight: 700; }

.key-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.key-ops-card { display: block; color: var(--text-primary); }
.key-ops-card:hover { color: var(--text-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08)); }
.key-ops-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.key-ops-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.key-ops-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 10px; }
.key-ops-link { font-size: 13px; font-weight: 600; color: var(--ios-blue); }

.emergency-card { border: 1px solid rgba(255,59,48,0.25); background: rgba(255,59,48,0.04); }

.quick-fast-list { display: flex; flex-direction: column; }
.quick-fast-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--separator);
  color: var(--text-primary);
  font-size: 13.5px;
}
.quick-fast-row:last-child { border-bottom: none; }
.quick-fast-row:hover { color: var(--ios-blue); }

.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 14px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

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

@media (max-width: 900px) {
  .ios-sidebar { display: none; }
  .ios-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .topbar-search { display: none; }
  .topbar-brand-text { display: none; }
  .topbar-user-text { display: none; }
  .ios-main { padding: 20px 16px 50px; }
  .ios-page-title { font-size: 24px; }

  .ios-sidebar.open {
    display: flex;
    position: fixed;
    inset: 60px 20% 0 0;
    z-index: 45;
    height: calc(100vh - 60px);
    width: auto;
  }
  .ios-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(0,0,0,0.35);
    z-index: 42;
  }
  .ios-sidebar-backdrop.open { display: block; }
}