/* ==========================================================================
   GFR Finance — admin & client portal
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap');

:root {
  --navy-900: #071523;
  --navy-800: #0b1f33;
  --steel-600: #2f4a63;
  --ink: #16202c;
  --body: #38495b;
  --muted: #6b7c8d;
  --line: #dde3ea;
  --line-soft: #eaeef3;
  --paper: #f4f6f8;
  --white: #fff;
  --gold-500: #a8873f;
  --gold-400: #bb9d5c;
  --ok: #1f6b4a;
  --warn: #8a6a1f;
  --bad: #8b2e2e;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(11,31,51,.06), 0 4px 14px rgba(11,31,51,.05);
}

* , *::before, *::after { box-sizing: border-box; }

body.portal {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--steel-600); text-decoration: none; }
a:hover { color: var(--navy-800); }

h1, h2, h3 { margin: 0 0 0.6em; font-family: var(--font-display); font-weight: 500; color: var(--navy-800); line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.authpage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}
.authpage__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.6rem;
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
}
.authpage__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--aside-image);
  opacity: 0.25;
}
.authpage__aside > * { position: relative; z-index: 2; }
.authpage__aside h2 { color: #fff; font-size: 1.9rem; max-width: 22ch; }
.authpage__aside p { max-width: 40ch; }
.authpage__logo { height: 44px; width: auto; }
.authpage__facts { list-style: none; margin: 1.6rem 0 0; padding: 0; font-size: 0.86rem; }
.authpage__facts li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; }
.authpage__facts li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold-400);
  border-bottom: 1.5px solid var(--gold-400);
  transform: rotate(-45deg);
}
.authpage__main {
  display: grid;
  place-items: center;
  padding: 2.6rem 1.6rem;
  background: var(--white);
}
.authcard { width: min(400px, 100%); }
.authcard h1 { margin-bottom: 0.4rem; }
.authcard__intro { color: var(--muted); margin-bottom: 1.8rem; }
.authcard__foot { margin-top: 1.6rem; font-size: 0.85rem; color: var(--muted); }

/* ---------------------------------------------------------------- Shell --- */

.portal__wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  padding: 1.5rem 0 1.2rem;
}
.sidebar__brand { padding: 0 1.5rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar__brand img { height: 38px; width: auto; }
.sidebar__role {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.sidebar__nav { flex: 1; padding: 1rem 0.8rem; overflow-y: auto; }
.sidebar__group {
  margin: 1.1rem 0 0.4rem;
  padding: 0 0.7rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
.sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.89rem;
  font-weight: 500;
}
.sidebar__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sidebar__link.is-active { background: var(--gold-500); color: #fff; font-weight: 600; }
.sidebar__count {
  min-width: 22px;
  padding: 0.05rem 0.35rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.sidebar__link.is-active .sidebar__count { background: rgba(0, 0, 0, 0.22); }
.sidebar__foot { padding: 1rem 1.5rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 0.82rem; }
.sidebar__foot a { display: block; color: rgba(255,255,255,.6); margin-bottom: 0.35rem; }
.sidebar__foot a:hover { color: var(--gold-400); }

.portal__main { display: flex; flex-direction: column; min-width: 0; }

.portalbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.1rem 1.8rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.portalbar h1 { margin: 0; font-size: 1.28rem; }
.portalbar__meta { display: flex; align-items: center; gap: 1rem; font-size: 0.84rem; color: var(--muted); }
.portalbar__user { font-weight: 600; color: var(--ink); }

.portal__body { flex: 1; padding: 1.8rem; }
.portal__body > * + * { margin-top: 1.6rem; }

.portalmenu { display: none; }

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

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.panel__head h2 { margin: 0; font-size: 1.06rem; }
.panel__head .note { margin: 0; font-size: 0.8rem; }
.panel__body { padding: 1.4rem; }
.panel__body--flush { padding: 0; }

.kpigrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.kpi {
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-500);
}
.kpi span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi strong { font-family: var(--font-display); font-size: 1.75rem; color: var(--navy-800); line-height: 1; }
.kpi small { display: block; margin-top: 0.35rem; font-size: 0.76rem; color: var(--muted); }
.kpi--alert { border-top-color: var(--bad); }
.kpi--ok { border-top-color: var(--ok); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.6rem; }
.grid2--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grid2 > * { margin: 0 !important; }

/* --------------------------------------------------------------- Tables --- */

.table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.table th, .table td { padding: 0.75rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table thead th {
  background: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.table tbody tr:hover { background: #fafbfc; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.right, .table th.right { text-align: right; }
.table td.nowrap { white-space: nowrap; }
.tablescroll { overflow-x: auto; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  background: #eef1f5;
  color: var(--steel-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.badge--ok { background: #e6f2ec; color: var(--ok); }
.badge--no { background: #f8e9e9; color: var(--bad); }
.badge--wait { background: #f7f1de; color: var(--warn); }
.badge--info { background: #e7edf4; color: var(--steel-600); }

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

label { display: block; margin-bottom: 0.35rem; font-size: 0.79rem; font-weight: 600; color: var(--navy-800); }

input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.62rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c8d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px;
  padding-right: 2rem;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--steel-600);
  box-shadow: 0 0 0 3px rgba(47, 74, 99, .12);
}
input[type="file"] { padding: 0.5rem; border: 1px dashed var(--line); background: var(--white); font-size: 0.85rem; }

.field { margin-bottom: 0.95rem; }
.row, .fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: 0.02em; }
input:disabled, select:disabled, textarea:disabled { background: var(--paper); color: var(--muted); cursor: not-allowed; }
.inlineform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.inlineform .field { margin-bottom: 0; }
.inlineform input, .inlineform select { min-width: 150px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.62rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--navy-800); color: #fff; }
.btn--primary:hover { background: var(--steel-600); color: #fff; }
.btn--gold { background: var(--gold-500); color: #fff; }
.btn--gold:hover { background: #96793d; color: #fff; }
.btn--outline { background: transparent; border-color: var(--line); color: var(--navy-800); }
.btn--outline:hover { background: var(--paper); }
.btn--danger { background: #f8e9e9; color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }
.btn--ok { background: #e6f2ec; color: var(--ok); }
.btn--ok:hover { background: var(--ok); color: #fff; }
.btn--sm { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
.btn--block { width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.alert {
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left-width: 3px;
  font-size: 0.88rem;
}
.alert--success { border-left-color: var(--ok); }
.alert--error { border-left-color: var(--bad); }
.alert--info { border-left-color: var(--steel-600); }

.note { font-size: 0.8rem; color: var(--muted); }
.empty { padding: 2rem 1.4rem; text-align: center; color: var(--muted); }
.center { text-align: center; }

/* ----------------------------------------------------------- Definitions -- */

.deflist { margin: 0; }
.deflist > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.87rem;
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--muted); }
.deflist dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }

.ibanbox {
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--navy-800);
  word-break: break-all;
}

/* -------------------------------------------------------------- Timeline -- */

.progress { display: grid; grid-auto-flow: column; gap: 0; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.progress li {
  position: relative;
  padding: 0.9rem 0.6rem 0.9rem 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  border-top: 3px solid var(--line);
}
.progress li.is-done { border-top-color: var(--ok); color: var(--ink); font-weight: 600; }
.progress li.is-current { border-top-color: var(--gold-500); color: var(--navy-800); font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.1rem 1.5rem;
  border-left: 1px solid var(--line);
  font-size: 0.87rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline time { display: block; font-size: 0.75rem; color: var(--muted); }

.msg {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.msg:last-child { border-bottom: 0; }
.msg--unread { background: #fbf8f1; border-left: 2px solid var(--gold-500); }
.msg--own { background: #f7f9fb; border-left: 2px solid var(--steel-400); }
.msg__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.msg__head strong { font-size: 0.94rem; color: var(--navy-800); }
.msg__head time { font-size: 0.76rem; color: var(--muted); }
.msg__body { font-size: 0.88rem; white-space: pre-line; }

/* ------------------------------------------------------------------ Chat -- */

.chatgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 480px; }
.chatlist { border-right: 1px solid var(--line); overflow-y: auto; max-height: 620px; }
.chatlist a {
  display: block;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
}
.chatlist a:hover { background: var(--paper); }
.chatlist a.is-active { background: var(--paper); border-left: 2px solid var(--gold-500); }
.chatlist strong { display: block; font-size: 0.88rem; color: var(--navy-800); }
.chatlist span { display: block; font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlist em { font-style: normal; font-size: 0.72rem; color: var(--gold-500); font-weight: 700; }

.chatthread { display: flex; flex-direction: column; }
.chatthread__body { flex: 1; padding: 1.2rem; background: var(--paper); max-height: 520px; overflow-y: auto; }
.chatthread__form { display: flex; gap: 0.5rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); }
.chatthread__form input { flex: 1; }
.bubble {
  max-width: 76%;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.87rem;
}
.bubble--admin { margin-left: auto; background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.bubble time { display: block; margin-top: 0.2rem; font-size: 0.68rem; opacity: 0.6; }

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

@media (max-width: 1100px) {
  .grid2--wide { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .portal__wrap { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 264px;
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
  }
  .sidebar.is-open { transform: none; }
  .portalmenu { display: inline-flex; }
  .portal__body { padding: 1.2rem; }
  .portalbar { padding: 0.9rem 1.2rem; }
  .authpage { grid-template-columns: 1fr; }
  .authpage__aside { display: none; }
  .chatgrid { grid-template-columns: 1fr; }
  .chatlist { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media print {
  .sidebar, .portalbar, .btnrow, .btn { display: none !important; }
  .portal__wrap { grid-template-columns: 1fr; }
  body.portal { background: #fff; }
}