/* SozeeWorks Design System - Material Design 3 (Material You) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* M3 Color Tokens - Purple Seed */
  --md-primary: #6750A4;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #EADDFF;
  --md-on-primary-container: #21005D;
  --md-secondary: #625B71;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #E8DEF8;
  --md-on-secondary-container: #1D192B;
  --md-tertiary: #7D5260;
  --md-tertiary-container: #FFD8E4;
  --md-on-tertiary-container: #31111D;
  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;
  /* Extended palette - accent & harmonized colors */
  --md-accent-teal: #006B5E;
  --md-accent-teal-container: #C4F5EB;
  --md-on-accent-teal-container: #00201B;
  --md-accent-blue: #3F5F90;
  --md-accent-blue-container: #D6E3FF;
  --md-on-accent-blue-container: #001B3D;
  --md-accent-amber: #7B5800;
  --md-accent-amber-container: #FFDEA6;
  --md-on-accent-amber-container: #271900;
  --md-surface: #FEF7FF;
  --md-surface-dim: #DED8E1;
  --md-surface-bright: #FEF7FF;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F7F2FA;
  --md-surface-container: #F3EDF7;
  --md-surface-container-high: #ECE6F0;
  --md-surface-container-highest: #E6E0E9;
  --md-on-surface: #1D1B20;
  --md-on-surface-variant: #49454F;
  --md-outline: #79747E;
  --md-outline-variant: #CAC4D0;
  --md-inverse-surface: #322F35;
  --md-inverse-on-surface: #F5EFF7;
  /* Elevation */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  /* Shape Scale */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;
}

/* === Role-specific Color Overrides === */
/* admin = Purple (default :root) */

/* masteradmin = Deep Red / Crimson */
body[data-role="masteradmin"] {
  --md-primary: #9C2B2E;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FFDAD6;
  --md-on-primary-container: #410002;
  --md-secondary: #775654;
  --md-secondary-container: #FFDAD6;
  --md-on-secondary-container: #2C1514;
  --md-surface: #FFFBFF;
  --md-surface-dim: #E4D7D6;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #FEF1F0;
  --md-surface-container: #F8EBEA;
  --md-surface-container-high: #F2E5E4;
  --md-surface-container-highest: #ECDFDF;
}

/* front = Indigo Blue */
body[data-role="front"] {
  --md-primary: #4355B9;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #DEE0FF;
  --md-on-primary-container: #00105C;
  --md-secondary: #5B5D72;
  --md-secondary-container: #DFE1F9;
  --md-on-secondary-container: #181A2C;
  --md-surface: #FBF8FF;
  --md-surface-dim: #DBD8E0;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F5F2FA;
  --md-surface-container: #EFECF4;
  --md-surface-container-high: #EAE7EF;
  --md-surface-container-highest: #E4E1E9;
}

/* manager = Teal */
body[data-role="manager"] {
  --md-primary: #006B5E;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #7EF8E4;
  --md-on-primary-container: #00201B;
  --md-secondary: #4B635D;
  --md-secondary-container: #CDE8E0;
  --md-on-secondary-container: #07201B;
  --md-surface: #F4FBF8;
  --md-surface-dim: #D5DBD8;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #EFF5F2;
  --md-surface-container: #E9EFEC;
  --md-surface-container-high: #E3EAE7;
  --md-surface-container-highest: #DEE4E1;
}

/* staff = Warm Orange */
body[data-role="staff"] {
  --md-primary: #8B5000;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FFDCB8;
  --md-on-primary-container: #2D1600;
  --md-secondary: #735A42;
  --md-secondary-container: #FFDCBE;
  --md-on-secondary-container: #2A1706;
  --md-surface: #FFF8F4;
  --md-surface-dim: #E1D8D0;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #FBF2EA;
  --md-surface-container: #F5ECE4;
  --md-surface-container-high: #EFE7DF;
  --md-surface-container-highest: #EAE1D9;
}

* { font-family: 'Noto Sans JP', 'Roboto', system-ui, sans-serif; }
body { background: var(--md-surface); color: var(--md-on-surface); }

/* Material Symbols base */
.material-symbols-rounded { vertical-align: middle; line-height: 1; display: inline-block; }

/* === Navigation Drawer (Sidebar) === */
.sw-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 50px;
  border-radius: var(--md-shape-full);
  font-size: 13px; font-weight: 500;
  color: var(--md-on-surface-variant);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  text-decoration: none; cursor: pointer;
}
.sw-sidebar-item:hover:not(.active) { background: var(--md-surface-container-high); }
.sw-sidebar-item.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

/* === Cards - M3 Filled/Elevated === */
.sw-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elevation-1);
  border: none;
  border-image: none;
}
.sw-card-plain {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elevation-1);
}
.sw-card-outlined {
  background: var(--md-surface);
  border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-variant);
}
.sw-card-tonal {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-md);
}

/* === Tabs - M3 Secondary Tabs === */
.sw-tab-pill {
  font-weight: 500; font-size: 14px;
  color: var(--md-on-surface-variant);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  border-radius: var(--md-shape-full);
}
.sw-tab-pill.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
  box-shadow: none;
}
.sw-tab.active {
  border-bottom: 3px solid var(--md-primary);
  color: var(--md-primary);
  font-weight: 600;
}

/* === Badges / Chips - M3 Tonal Chips === */
.sw-badge {
  padding: 2px 12px; border-radius: var(--md-shape-full);
  font-size: 0.75rem; font-weight: 500; display: inline-block;
  letter-spacing: 0.02em;
}
.sw-badge-green { background: var(--md-accent-teal-container); color: var(--md-on-accent-teal-container); }
.sw-badge-red { background: var(--md-error-container); color: var(--md-on-error-container); }
.sw-badge-yellow { background: var(--md-accent-amber-container); color: var(--md-on-accent-amber-container); }
.sw-badge-blue { background: var(--md-accent-blue-container); color: var(--md-on-accent-blue-container); }
.sw-badge-purple { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.sw-badge-orange { background: #FFDCC2; color: #2E1500; }
.sw-badge-gray { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.sw-badge-pink { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* === Buttons - M3 Variants === */
.sw-btn {
  padding: 10px 24px; border-radius: var(--md-shape-full);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border: none; outline: none; position: relative; overflow: hidden;
}
.sw-btn::after {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity 0.2s;
}
.sw-btn:hover::after { opacity: 0.08; }
.sw-btn:active::after { opacity: 0.12; }

/* Filled button (primary) */
.sw-btn-primary {
  background: var(--md-primary); color: var(--md-on-primary);
  box-shadow: var(--md-elevation-1);
}
.sw-btn-primary:hover { box-shadow: var(--md-elevation-2); }

/* Tonal button (secondary) */
.sw-btn-secondary {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border: none;
}

/* Outlined button */
.sw-btn-outlined {
  background: transparent; color: var(--md-primary);
  border: 1px solid var(--md-outline);
}

/* Text button */
.sw-btn-text {
  background: transparent; color: var(--md-primary);
  padding: 10px 16px;
}

/* Danger / Error button */
.sw-btn-danger {
  background: var(--md-error-container); color: var(--md-on-error-container);
}

/* Small button */
.sw-btn-sm {
  padding: 6px 16px; font-size: 12px;
  border-radius: var(--md-shape-full);
}

/* FAB */
.sw-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  width: 56px; height: 56px;
  border-radius: var(--md-shape-lg);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  box-shadow: var(--md-elevation-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  transition: box-shadow 0.2s;
}
.sw-fab:hover { box-shadow: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3); }

/* Extended FAB */
.sw-fab-extended {
  width: auto; padding: 0 20px; gap: 12px;
  border-radius: var(--md-shape-lg);
  font-size: 14px; font-weight: 500;
}

/* === Table - M3 Data Table === */
.sw-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.sw-table thead tr {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
}
.sw-table thead th {
  padding: 12px 16px; text-align: left;
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--md-outline-variant);
}
.sw-table tbody tr {
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background 0.15s;
}
.sw-table tbody tr:hover { background: rgba(103, 80, 164, 0.04); }
.sw-table tbody td { padding: 12px 16px; }

/* === Form Fields - M3 Outlined === */
.sw-input {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  font-size: 14px; background: transparent;
  color: var(--md-on-surface);
  transition: all 0.15s;
  outline: none;
}
.sw-input:focus {
  border-color: var(--md-primary);
  border-width: 2px; padding: 11px 15px;
  box-shadow: none;
}
.sw-input::placeholder { color: var(--md-on-surface-variant); }
.sw-label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--md-on-surface-variant);
  margin-bottom: 6px; letter-spacing: 0.04em;
}

/* === Page Header === */
.sw-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.sw-page-title {
  font-size: 24px; font-weight: 600;
  color: var(--md-on-surface);
  letter-spacing: -0.01em;
}
.sw-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Scrollbar - M3 style === */
.sw-scroll::-webkit-scrollbar { height: 4px; width: 4px; }
.sw-scroll::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant); border-radius: var(--md-shape-full);
}
.sw-scroll::-webkit-scrollbar-track { background: transparent; }

/* === Print === */
@media print { .no-print { display: none !important; } }

/* === Bottom Navigation - M3 === */
.sw-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--md-surface-container);
  box-shadow: 0 -1px 0 var(--md-outline-variant);
  z-index: 50;
}
.sw-bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 16px; gap: 4px;
  font-size: 12px; font-weight: 500;
  color: var(--md-on-surface-variant);
  transition: all 0.2s; cursor: pointer;
  position: relative;
}
.sw-bottom-nav-item.active {
  color: var(--md-on-secondary-container);
}
.sw-bottom-nav-item.active::before {
  content: ''; position: absolute; top: 8px;
  width: 64px; height: 32px;
  border-radius: var(--md-shape-full);
  background: var(--md-secondary-container);
  z-index: -1;
}

/* === Toggle Switch - M3 === */
.sw-toggle {
  position: relative; width: 52px; height: 32px;
  background: var(--md-surface-container-highest);
  border: 2px solid var(--md-outline);
  border-radius: var(--md-shape-full);
  cursor: pointer; transition: all 0.2s;
}
.sw-toggle.active {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.sw-toggle::after {
  content: ''; position: absolute;
  top: 6px; left: 6px;
  width: 16px; height: 16px;
  background: var(--md-outline);
  border-radius: var(--md-shape-full);
  transition: all 0.2s;
}
.sw-toggle.active::after {
  transform: translateX(20px);
  width: 24px; height: 24px;
  top: 2px; left: 2px;
  background: var(--md-on-primary);
}

/* === Progress Ring === */
.sw-progress-ring { transform: rotate(-90deg); }

/* === SweetAlert2 Overrides for M3 === */
.swal2-popup.sw-swal-popup {
  border-radius: var(--md-shape-xl) !important;
  background: var(--md-surface-container-low) !important;
  padding: 0 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}
.swal2-popup .sw-swal-title {
  padding: 24px 24px 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--md-on-surface) !important;
  text-align: left !important;
}
.swal2-popup .sw-swal-body {
  padding: 16px 24px !important;
  text-align: left !important;
  color: var(--md-on-surface-variant) !important;
  font-size: 14px !important;
}
.swal2-popup .sw-swal-footer {
  padding: 16px 24px 24px !important;
  border-top: none !important;
}
.swal2-popup.sw-swal-popup .swal2-actions {
  padding: 16px 24px 24px !important;
  gap: 10px !important;
  margin: 0 !important;
}
.swal2-popup.sw-swal-popup .swal2-validation-message {
  margin: 0 24px 8px !important;
  border-radius: var(--md-shape-sm) !important;
}
.swal2-popup .swal2-close {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  z-index: 10 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--md-shape-full) !important;
  color: var(--md-on-surface-variant) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  transition: background 0.15s !important;
}
.swal2-popup .swal2-close:hover {
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
}
/* Toast style */
.swal2-popup.swal2-toast {
  border-radius: var(--md-shape-sm) !important;
  background: var(--md-inverse-surface) !important;
  color: var(--md-inverse-on-surface) !important;
  box-shadow: var(--md-elevation-3) !important;
}
.swal2-popup.swal2-toast .swal2-title {
  color: var(--md-inverse-on-surface) !important;
}

/* === Divider === */
.sw-divider { border: none; border-top: 1px solid var(--md-outline-variant); margin: 0; }

/* === Surface utilities === */
.md-surface { background: var(--md-surface); }
.md-surface-container { background: var(--md-surface-container); }
.md-surface-container-low { background: var(--md-surface-container-low); }
.md-surface-container-high { background: var(--md-surface-container-high); }
.md-surface-container-highest { background: var(--md-surface-container-highest); }
.md-on-surface { color: var(--md-on-surface); }
.md-on-surface-variant { color: var(--md-on-surface-variant); }
.md-primary { color: var(--md-primary); }
.md-primary-bg { background: var(--md-primary); color: var(--md-on-primary); }
.md-primary-container { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-secondary-container { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.md-error-container { background: var(--md-error-container); color: var(--md-on-error-container); }
.md-tertiary-container { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.md-accent-teal { color: var(--md-accent-teal); }
.md-accent-teal-container { background: var(--md-accent-teal-container); color: var(--md-on-accent-teal-container); }
.md-accent-blue { color: var(--md-accent-blue); }
.md-accent-blue-container { background: var(--md-accent-blue-container); color: var(--md-on-accent-blue-container); }
.md-accent-amber { color: var(--md-accent-amber); }
.md-accent-amber-container { background: var(--md-accent-amber-container); color: var(--md-on-accent-amber-container); }

/* KPI/Stats emphasis */
.sw-stat-value { font-size: 28px; font-weight: 700; color: var(--md-primary); letter-spacing: -0.02em; }
.sw-stat-value-teal { font-size: 28px; font-weight: 700; color: var(--md-accent-teal); letter-spacing: -0.02em; }
.sw-stat-value-blue { font-size: 28px; font-weight: 700; color: var(--md-accent-blue); letter-spacing: -0.02em; }
.sw-stat-value-amber { font-size: 28px; font-weight: 700; color: var(--md-accent-amber); letter-spacing: -0.02em; }
.sw-stat-value-error { font-size: 28px; font-weight: 700; color: var(--md-error); letter-spacing: -0.02em; }