/* =========================================================================
 * User Central – Light Financial Dashboard Theme
 *
 * This stylesheet defines a clean light theme inspired by modern financial
 * dashboards. It uses soft backgrounds, subtle shadows, rounded corners and
 * coloured KPI cards. The layout is grid-based with a left sidebar and a
 * top bar containing search and user info.
 * ========================================================================= */

/* Base reset */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }

/* Colour palette variables */
:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-soft: #fbfcfd;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e5e7eb;
  --brand: #059669;
  --brand-dark: #047857;
  --brand-50: #ecfdf5;
  --green-grad: linear-gradient(135deg,#A7F3D0,#ECFCEB);
  --light-green-grad: linear-gradient(135deg,#DCFCE7,#F0FDF4);
  --yellow-grad: linear-gradient(135deg,#FEF9C3,#FFFBEB);
  --blue-grad: linear-gradient(135deg,#DBEAFE,#EFF6FF);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.1);
  --radius: 12px;
}

body { background: var(--bg); color: var(--text); font-size:14px; line-height:1.45; }

/* Layout grid */
.app {
  display:grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  min-height:100vh;
}

/* Sidebar */
.sidebar {
  grid-column:1;
  grid-row:1 / span 2;
  background: var(--panel);
  border-right:1px solid var(--line);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  color: var(--brand-dark);
}
.brand .logo {
  width:22px; height:22px; border-radius:999px;
  background: var(--brand-50);
  display:grid; place-items:center;
  color: var(--brand-dark);
}

.section-title {
  font-size:11px;
  font-weight:600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin:6px 4px 4px;
}

.nav {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  font-weight:500;
  color:#334155;
  transition: background .2s;
}
.nav a:hover {
  background: #f0f9ff;
}
.nav a.active {
  background: var(--brand-50);
  color: var(--brand-dark);
  border:1px solid #bbf7d0;
}

/* Topbar */
.topbar {
  grid-column:2; grid-row:1;
  background: var(--panel);
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.search {
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--panel-soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}
.search input {
  flex:1;
  border:0;
  outline:0;
  background: transparent;
  font:inherit;
  color:inherit;
}
.actions {
  display:flex;
  align-items:center;
  gap:12px;
}
.badge {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#EEF2F7;
  border:1px solid var(--line);
  font-size:12px;
  color:#334155;
}
.avatar {
  width:30px; height:30px; border-radius:999px;
  background:#e5e7eb;
  display:inline-block;
}

/* Main area */
.main {
  grid-column:2;
  grid-row:2;
  padding:20px;
}
.container { max-width:1280px; margin:0 auto; }

/* Grids and cards */
.grid {
  display:grid;
  gap:16px;
}
.grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-sm);
}
.card .title {
  font-size:13px;
  font-weight:600;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom:6px;
  letter-spacing:.04em;
}
.card .value {
  font-size:26px;
  font-weight:800;
  margin-bottom:4px;
}
.card .subtitle {
  font-size:12px;
  color: var(--muted);
}

/* KPI variants with gradient backgrounds */
.kpi {
  color:#065f46;
  border:none;
  box-shadow:none;
  border-radius:var(--radius);
}
.kpi.green { background: var(--green-grad); }
.kpi.lightgreen { background: var(--light-green-grad); color:#166534; }
.kpi.yellow { background: var(--yellow-grad); color:#92400e; }
.kpi.blue { background: var(--blue-grad); color:#1e40af; }

/* Flex helpers */
.flex { display:flex; gap:16px; }
.flex-1 { flex:1; }

/* Table styles */
.table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table th, .table td {
  padding:8px 10px;
  border-bottom:1px solid var(--line);
}
.table thead th {
  font-weight:700;
  color:#0f172a;
  background:#f8fafc;
}
.table tr:hover td {
  background:#fafafa;
}

/* Form layouts */
.form-row {
  display:grid;
  gap:12px;
}
.form-1 { grid-template-columns: 1fr; }
.form-2 { grid-template-columns: repeat(2,1fr); }
.form-3 { grid-template-columns: repeat(3,1fr); }
.input, select, textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--panel-soft);
  font:inherit;
  color:inherit;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px solid var(--brand-dark);
  background:var(--brand);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.btn:hover {
  background: var(--brand-dark);
}

/* Additional form styles for consistent inputs and layouts */
/* General form container with vertical spacing */
.form {
  display: grid;
  gap: 12px;
}
/* Two-column form layout */
.form.form-2 {
  grid-template-columns: repeat(2, 1fr);
}
/* Three-column form layout */
.form.form-3 {
  grid-template-columns: repeat(3, 1fr);
}
/* Single column form layout */
.form.form-1 {
  grid-template-columns: 1fr;
}

/* Each field container stacks label above the control */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Text inputs, selects and textareas share common appearance */
.form-field .input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font: inherit;
  color: inherit;
  resize: vertical;
}

/*
 * Custom styling for <select> elements. We remove the native dropdown arrow and
 * replace it with a subtle icon while matching the appearance of our text
 * inputs. Without these rules, selects would inherit inconsistent styling
 * across browsers and stand out from other form controls.
 */
select.input,
.form-field select {
  /* Reset the native arrow/icon */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Match the padding, borders and colours of inputs */
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font: inherit;
  color: inherit;
  /* Insert a custom down-arrow icon on the right */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l5 4 5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* Leave space for the icon */
  padding-right: 38px;
}

/* Actions container aligns buttons to the end */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  grid-column: 1 / -1;
}

/* Secondary button style for less prominent actions */
.btn.secondary {
  background: #f8fafc;
  border-color: var(--line);
  color: var(--text);
}
.btn.secondary:hover {
  background: #e5e7eb;
}

/* Helper text style */
.help {
  font-size: 13px;
  color: #475569;
  margin-bottom: 8px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .app { grid-template-columns:1fr; }
  .sidebar {
    position:fixed; left:-250px; top:0; bottom:0; width:240px;
    z-index:100; transition:left .3s;
  }
  .sidebar.open { left:0; }
  .topbar { justify-content:flex-end; }
  .search { display:none; }
}