/* =========
   Courier UI (Light)
   Shared styling for Admin + Merchant portal
   ========= */

:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(2, 8, 23, .08);
  --shadow-sm: 0 6px 18px rgba(2, 8, 23, .06);

  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;

  --radius: 14px;
  --radius-sm: 10px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* Accessibility: screen-reader only */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



/* Layout */
.kt-shell{
  min-height: 100vh;
  display:flex;
}
.kt-sidebar{
  width: 280px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.kt-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.kt-header{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.kt-header__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--text);
}
.kt-content{
  padding: 18px;
  max-width: 1200px;
}

/* Brand */
.kt-brand{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
.kt-brand__title{
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 18px;
}
.kt-brand__sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

/* Nav */
.kt-nav{ display:flex; flex-direction:column; gap: 6px; }
.kt-nav__link{
  text-decoration:none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 750;
  font-size: 13px;
}
.kt-nav__link:hover{
  background: #f3f6ff;
  border-color: #dbeafe;
}
.kt-nav__link.is-active{
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* Sidebar footer */
.kt-sidebar__footer{
  margin-top:auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.kt-user{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.kt-user__name{ font-weight: 900; font-size: 13px; }
.kt-user__email{ color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Typography / page top */
.kt-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.kt-h1{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.03em;
}
.kt-subtitle{
  margin: 6px 0 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}
.kt-row{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

/* Cards */
.kt-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.kt-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.kt-card__body{
  padding: 16px;
}

/* Tables */
.kt-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
}
.kt-table thead th{
  text-align:left;
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
  padding: 12px 16px;
  background: #fbfdff;
  border-bottom: 1px solid var(--border);
}
.kt-table tbody td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.kt-table tbody tr:hover td{
  background: #fafcff;
}
.kt-table tbody tr:last-child td{ border-bottom: none; }

/* Buttons */
.kt-btn{
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 850;
  font-size: 13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.kt-btn:hover{ box-shadow: var(--shadow-sm); }
.kt-btn--block{ width:100%; }

.kt-btn--primary{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.kt-btn--primary:hover{ background: var(--primary-600); border-color: var(--primary-600); }

.kt-btn--danger{
  background: var(--danger);
  border-color: var(--danger);
  color:#fff;
}
.kt-btn--ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.kt-btn--ghost:hover{
  background:#f8fafc;
}

/* Badges */
.kt-badge{
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: #fff;
}
.kt-badge--muted{
  background:#f8fafc;
}

/* Alerts */
.kt-alert{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 650;
}
.kt-alert--success{ border-color:#bbf7d0; background:#f0fdf4; color:#14532d; }
.kt-alert--danger{ border-color:#fecaca; background:#fef2f2; color:#7f1d1d; }

/* Forms */
.kt-form{ display:grid; gap: 12px; }
.kt-field label{
  display:block;
  font-weight: 850;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.kt-input, .kt-select, .kt-textarea{
  width:100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.kt-input:focus, .kt-select:focus, .kt-textarea:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.kt-textarea{ min-height: 110px; resize: vertical; }

/* Responsive */
@media (max-width: 980px){
  .kt-sidebar{ width: 240px; }
  .kt-content{ padding: 14px; }
}
@media (max-width: 820px){
  .kt-shell{ flex-direction:column; }
  .kt-sidebar{ width:auto; border-right:0; border-bottom:1px solid var(--border); }
  .kt-topbar{ align-items:flex-start; flex-direction:column; }
}