html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ==========================================================================
   EPaaS Portal Unified Stylesheet (merged site.css + crud-components.css)
   ========================================================================== */

/* ---------------------------
   Design Tokens
   --------------------------- */
:root {
  /* Spacing */
  --ep-spacing-xs: .25rem;
  --ep-spacing-sm: .5rem;
  --ep-spacing-md: .75rem;
  --ep-spacing-lg: 1rem;
  --ep-spacing-xl: 1.5rem;
  --ep-spacing-2xl: 2rem;

  /* Radius */
  --ep-radius-sm: .375rem;
  --ep-radius-md: .5rem;
  --ep-radius-lg: .75rem;

  /* Neutral Palette */
  --ep-gray-50: #f8fafc;
  --ep-gray-100: #f1f5f9;
  --ep-gray-200: #e2e8f0;
  --ep-gray-300: #cbd5e1;
  --ep-gray-400: #94a3b8;
  --ep-gray-500: #64748b;
  --ep-gray-600: #475569;
  --ep-gray-700: #334155;
  --ep-gray-800: #1e293b;
  --ep-gray-900: #0f172a;

  /* Brand */
  --ep-brand-50: #eff6ff;
  --ep-brand-100: #dbeafe;
  --ep-brand-500: #3b82f6;
  --ep-brand-600: #2563eb;
  --ep-brand-700: #1d4ed8;

  /* Semantic */
  --ep-success-50: #f0fdf4;
  --ep-success-100: #dcfce7;
  --ep-success-600: #16a34a;
  --ep-success-700: #15803d;

  --ep-danger-50: #fef2f2;
  --ep-danger-100: #fee2e2;
  --ep-danger-600: #dc2626;
  --ep-danger-700: #b91c1c;

  --ep-warning-50: #fffbeb;
  --ep-warning-100: #fef3c7;
  --ep-warning-600: #f59e0b;
  --ep-warning-700: #b45309;

  /* Tables */
  --ep-table-border: var(--ep-gray-200);
  --ep-table-header-bg: var(--ep-gray-50);
  --ep-table-header-text: var(--ep-gray-700);
  --ep-table-row-hover-bg: var(--ep-gray-50);
  --ep-table-cell-padding-y: .75rem;
  --ep-table-cell-padding-x: 1rem;

  /* Inputs */
  --ep-input-border: var(--ep-gray-300);
  --ep-input-border-focus: var(--ep-brand-500);
  --ep-input-bg: #fff;
  --ep-input-text: var(--ep-gray-900);
  --ep-input-padding-y: .5rem;
  --ep-input-padding-x: .75rem;
  --ep-input-radius: var(--ep-radius-md);

  /* Buttons */
  --ep-btn-padding-y: .5rem;
  --ep-btn-padding-x: 1rem;
  --ep-btn-radius: var(--ep-radius-md);
  --ep-btn-font-weight: 500;

  /* Cards */
  --ep-card-bg: #fff;
  --ep-card-border: var(--ep-gray-200);
  --ep-card-padding: 1.5rem;
  --ep-card-radius: var(--ep-radius-lg);
  --ep-card-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

/* ---------------------------
   Base / Layout
   --------------------------- */
html { font-size:14px; position:relative; min-height:100%; }
@media (min-width:768px){ html { font-size:16px; } }
body { margin-bottom:60px; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem #258cfb;
}

/* ---------------------------
   Center Color Schemes
   --------------------------- */
/* FooCenter (teal) */
.bg-foocenter-600 { background:#14b8a6; }
.bg-foocenter-700 { background:#0f766e; }
.text-foocenter-700 { color:#0f766e; }
.text-foocenter-600 { color:#14b8a6; }
.border-foocenter-600 { border-color:#14b8a6; }
.hover\:bg-foocenter-700:hover { background:#0f766e; }
.hover\:text-foocenter-700:hover { color:#0f766e; }
.bg-foocenter-50 { background:#f0fdfa; }

/* Super Admin (blue) */
.bg-superadmincenter-600 { background:#3b82f6; }
.bg-superadmincenter-700 { background:#2563eb; }
.text-superadmincenter-700 { color:#2563eb; }
.text-superadmincenter-600 { color:#3b82f6; }
.border-superadmincenter-600 { border-color:#3b82f6; }
.hover\:bg-superadmincenter-700:hover { background:#2563eb; }
.hover\:text-superadmincenter-700:hover { color:#2563eb; }
.bg-superadmincenter-50 { background:#eff6ff; }

/* Management (green) */
.bg-managementcenter-600 { background:#16a34a; }
.bg-managementcenter-700 { background:#15803d; }
.text-managementcenter-700 { color:#15803d; }
.text-managementcenter-600 { color:#16a34a; }
.border-managementcenter-600 { border-color:#16a34a; }
.hover\:bg-managementcenter-700:hover { background:#15803d; }
.hover\:text-managementcenter-700:hover { color:#15803d; }
.bg-managementcenter-50 { background:#f0fdf4; }

/* Project (orange) */
.bg-projectcenter-600 { background:#ea580c; }
.bg-projectcenter-700 { background:#c2410c; }
.text-projectcenter-700 { color:#c2410c; }
.text-projectcenter-600 { color:#ea580c; }
.border-projectcenter-600 { border-color:#ea580c; }
.hover\:bg-projectcenter-700:hover { background:#c2410c; }
.hover\:text-projectcenter-700:hover { color:#c2410c; }
.bg-projectcenter-50 { background:#fff7ed; }

/* Development (purple) */
.bg-developmentcenter-600 { background:#9333ea; }
.bg-developmentcenter-700 { background:#7e22ce; }
.text-developmentcenter-700 { color:#7e22ce; }
.text-developmentcenter-600 { color:#9333ea; }
.border-developmentcenter-600 { border-color:#9333ea; }
.hover\:bg-developmentcenter-700:hover { background:#7e22ce; }
.hover\:text-developmentcenter-700:hover { color:#7e22ce; }
.bg-developmentcenter-50 { background:#faf5ff; }

/* ---------------------------
   Page Title
   --------------------------- */
.ep-page-title {
  font-size:1.875rem;
  font-weight:700;
  color:var(--ep-gray-800);
  margin-bottom:var(--ep-spacing-xl);
  line-height:1.2;
}

/* ---------------------------
   Toolbar
   --------------------------- */
.ep-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ep-spacing-lg);
  margin-bottom:var(--ep-spacing-xl);
  flex-wrap:wrap;
}
.ep-toolbar-count {
  color:var(--ep-gray-600);
  font-size:.875rem;
  margin:0;
}
.ep-toolbar-filters {
  display:flex;
  align-items:center;
  gap:var(--ep-spacing-md);
  flex-wrap:wrap;
  flex:1;
}

/* ---------------------------
   Cards
   --------------------------- */
.ep-card {
  background:var(--ep-card-bg);
  border:1px solid var(--ep-card-border);
  border-radius:var(--ep-card-radius);
  padding:var(--ep-card-padding);
  box-shadow:var(--ep-card-shadow);
}

/* ---------------------------
   Forms
   --------------------------- */
.ep-label {
  display:block;
  font-size:.875rem;
  font-weight:500;
  color:var(--ep-gray-700);
  margin-bottom:var(--ep-spacing-sm);
}
.ep-input {
  width:100%;
  padding:var(--ep-input-padding-y) var(--ep-input-padding-x);
  font-size:.875rem;
  color:var(--ep-input-text);
  background:var(--ep-input-bg);
  border:1px solid var(--ep-input-border);
  border-radius:var(--ep-input-radius);
  transition:border-color .15s, box-shadow .15s;
}
.ep-input:focus {
  outline:none;
  border-color:var(--ep-input-border-focus);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.ep-input::placeholder { color:var(--ep-gray-400); }
.ep-input:disabled {
  background:var(--ep-gray-50);
  color:var(--ep-gray-500);
  cursor:not-allowed;
}

/* ---------------------------
   Buttons
   --------------------------- */
.ep-btn-primary,
.ep-btn-secondary,
.ep-btn-danger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--ep-btn-padding-y) var(--ep-btn-padding-x);
  font-size:.875rem;
  font-weight:var(--ep-btn-font-weight);
  line-height:1.5;
  border-radius:var(--ep-btn-radius);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s, border-color .15s, transform .1s;
  white-space:nowrap;
  border:1px solid transparent;
}
.ep-btn-primary {
  background:var(--ep-brand-600);
  color:#fff;
}
.ep-btn-primary:hover { background:var(--ep-brand-700); }
.ep-btn-primary:active { transform:translateY(1px); }
.ep-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.ep-btn-secondary {
  background:#fff;
  color:var(--ep-gray-700);
  border-color:var(--ep-gray-300);
}
.ep-btn-secondary:hover { background:var(--ep-gray-50); border-color:var(--ep-gray-400); }
.ep-btn-secondary:active { transform:translateY(1px); }
.ep-btn-secondary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.ep-btn-danger {
  background:var(--ep-danger-600);
  color:#fff;
}
.ep-btn-danger:hover { background:var(--ep-danger-700); }
.ep-btn-danger:active { transform:translateY(1px); }
.ep-btn-danger:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ---------------------------
   Links
   --------------------------- */
.ep-link-muted,
.ep-link-danger {
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  transition:color .15s;
}
.ep-link-muted { color:var(--ep-gray-600); }
.ep-link-muted:hover { color:var(--ep-gray-900); text-decoration:underline; }
.ep-link-danger { color:var(--ep-danger-600); }
.ep-link-danger:hover { color:var(--ep-danger-700); text-decoration:underline; }

/* ---------------------------
   Tables
   --------------------------- */
.ep-table-container {
  background:var(--ep-card-bg);
  border:1px solid var(--ep-table-border);
  border-radius:var(--ep-card-radius);
  overflow:hidden;
  box-shadow:var(--ep-card-shadow);
}
.ep-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.875rem;
}
.ep-thead {
  background:var(--ep-table-header-bg);
  border-bottom:2px solid var(--ep-table-border);
}
.ep-th {
  padding:var(--ep-table-cell-padding-y) var(--ep-table-cell-padding-x);
  text-align:left;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ep-table-header-text);
  white-space:nowrap;
  user-select:none;
}
.ep-th.sortable,
.ep-th--sortable {
  cursor:pointer;
  transition:background-color .15s;
}
.ep-th.sortable:hover,
.ep-th--sortable:hover { background:var(--ep-gray-100); }
.ep-th--right { text-align:right; }
.ep-th--center { text-align:center; }

.ep-sort-indicator {
  display:inline-block;
  margin-left:.35rem;
  font-size:.7rem;
  line-height:1;
  color:var(--ep-gray-500);
  transition:transform .15s;
}
.ep-th--sortable.is-asc .ep-sort-indicator,
.ep-th--sortable.is-desc .ep-sort-indicator {
  color:var(--ep-brand-600);
}
.ep-th--sortable.is-desc .ep-sort-indicator {
  transform:rotate(180deg);
}

.ep-td {
  padding:var(--ep-table-cell-padding-y) var(--ep-table-cell-padding-x);
  color:var(--ep-gray-700);
  border-bottom:1px solid var(--ep-table-border);
  vertical-align:middle;
}
.ep-td--strong { font-weight:600; color:var(--ep-gray-900); }
.ep-td--muted { color:var(--ep-gray-500); }
.ep-td--right { text-align:right; }
.ep-td--center { text-align:center; }
.ep-td--actions { white-space:nowrap; text-align:right; }

.ep-row-actions {
  display:flex;
  gap:var(--ep-spacing-md);
  justify-content:flex-end;
}

.ep-table tbody tr {
  transition:background-color .15s;
}
.ep-table tbody tr:hover {
  background:var(--ep-table-row-hover-bg);
}
.ep-table tbody tr:last-child .ep-td,
.ep-table tbody tr:last-child .ep-td--strong,
.ep-table tbody tr:last-child .ep-td--muted { border-bottom:none; }

/* Legacy aliases (phase out) */
.ep-tr-hover {} /* kept noop */
/* Provide full box metrics so legacy classes render identically to .ep-td */
.ep-td-strong,
.ep-td-muted,
.ep-td-actions {
  padding: var(--ep-table-cell-padding-y) var(--ep-table-cell-padding-x);
  border-bottom: 1px solid var(--ep-table-border);
  vertical-align: middle;
}
.ep-td-strong { font-weight:600; color:var(--ep-gray-900); }
.ep-td-muted  { color:var(--ep-gray-500); }
.ep-td-actions { text-align:right; white-space:nowrap; }

/* Ensure last-row cleanup also applies to legacy classes */
.ep-table tbody tr:last-child .ep-td-strong,
.ep-table tbody tr:last-child .ep-td-muted {
  border-bottom: none;
}

/* ---------------------------
   Badges
   --------------------------- */
.ep-badge {
  display:inline-flex;
  align-items:center;
  padding:.25rem .625rem;
  font-size:.75rem;
  font-weight:500;
  line-height:1;
  border-radius:9999px;
  white-space:nowrap;
  background:var(--ep-gray-100);
  color:var(--ep-gray-700);
}
.ep-badge-blue { background:#dbeafe; color:#1e40af; }
.ep-badge-purple { background:#e9d5ff; color:#6b21a8; }
.ep-badge-indigo { background:#e0e7ff; color:#4338ca; }
.ep-badge-orange { background:#fed7aa; color:#9a3412; }
.ep-badge-yellow { background:#fef3c7; color:#92400e; }
.ep-badge-green { background:#d1fae5; color:#065f46; }
.ep-badge-red { background:#fee2e2; color:#991b1b; }
.ep-badge-gray { background:var(--ep-gray-100); color:var(--ep-gray-700); }

/* ---------------------------
   Pagination
   --------------------------- */
.ep-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--ep-spacing-xl);
  gap:var(--ep-spacing-lg);
  flex-wrap:wrap;
}
.ep-pagination-info {
  font-size:.875rem;
  color:var(--ep-gray-600);
}
.ep-pagination-info strong {
  font-weight:600;
  color:var(--ep-gray-900);
}
.ep-pagination-nav {
  display:flex;
  gap:var(--ep-spacing-xs);
  flex-wrap:wrap;
}
.ep-pagination-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.25rem;
  height:2.25rem;
  padding:0 var(--ep-spacing-sm);
  font-size:.875rem;
  font-weight:500;
  color:var(--ep-gray-700);
  background:#fff;
  border:1px solid var(--ep-gray-300);
  border-radius:var(--ep-radius-md);
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s, border-color .15s, color .15s;
}
.ep-pagination-btn:hover:not(:disabled):not(.active):not(.ep-pagination-btn--active) {
  background:var(--ep-gray-50);
  border-color:var(--ep-gray-400);
}
.ep-pagination-btn.active,
.ep-pagination-btn--active,
.ep-pagination-btn[aria-current="page"] {
  background:var(--ep-brand-600);
  border-color:var(--ep-brand-600);
  color:#fff;
  font-weight:600;
}
.ep-pagination-btn:disabled,
.ep-pagination-btn[aria-disabled="true"] {
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------------------------
   Utilities
   --------------------------- */
.ep-text-right { text-align:right !important; }
.ep-text-center { text-align:center !important; }
.ep-text-ellipsis {
  max-width:28ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------------------------
   Responsive
   --------------------------- */
@media (max-width:768px){
  .ep-toolbar { flex-direction:column; align-items:stretch; }
  .ep-toolbar-filters { flex-direction:column; align-items:stretch; }
  .ep-table-container { overflow-x:auto; }
  .ep-table { min-width:600px; }
  .ep-pagination { flex-direction:column; align-items:stretch; }
  .ep-pagination-nav { justify-content:center; }
  .ep-pagination-info { text-align:center; }
}

/* End of unified stylesheet */