/* =====================================
   WURZEL PORTAL - CORE STYLESHEET
   Clean layout · v0.1
   ===================================== */

/* ---------- GLOBAL ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at -10% -10%, rgba(11,61,145,0.06) 0%, transparent 60%),
    radial-gradient(circle at 110% -10%, rgba(128,0,0,0.06) 0%, transparent 60%),
    #f8fafc;
  color: #0f172a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a { color: #0B3D91; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Wider canvas */
.layout { max-width: 1600px; padding: 2rem; margin: 0 auto; }

.mutedSmall { font-size: .75rem; color: #94a3b8; }

/* =====================================
   TOP BAR + NAV (two-row layout)
   ===================================== */

.topbar {
  position: static;                 /* not sticky */
  top: auto;
  z-index: 1;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.topbarInner { display: flex; flex-direction: column; gap: .75rem; }

.topbarTop {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Brand */
.brandblock { display: flex; gap: .75rem; align-items: center; }

/* Real logo */
.brandlogo {
  width: 48px; height: 48px; object-fit: contain; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* Larger on login card */
.brandlogo--login { width: 56px; height: 56px; border-radius: 14px; }

/* Fallback gradient if logo missing */
.brandmark {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg,#0B3D91,#800000);
  color: #fff; font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.brandtext small { display: block; color: #64748b; font-size: .7rem; line-height: 1rem; }
.brandtext strong { display: block; font-size: 1rem; line-height: 1.2rem; color: #0f172a; }

/* User/right block */
.headerRight { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.userTop { display: flex; align-items: center; gap: .6rem; }
.userText { text-align: right; line-height: 1.1; }

/* Status badge */
.statusBadge {
  display: inline-flex; background: #d1fae5; color: #065f46;
  border-radius: 999px; font-size: .7rem; line-height: 1rem; font-weight: 700;
  padding: 3px 8px; align-items: center; gap: 6px;
}
.statusDot { width: 9px; height: 9px; background: #10b981; border-radius: 999px; }

/* User actions as subtle text */
.userActions { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.userActions.textlinks .linkAction {
  font-weight: 600;
  font-size: .8rem;
  color: #64748b;
  text-decoration: none;
  padding: .1rem 0;
}
.userActions.textlinks .linkAction:hover { color: #0f172a; text-decoration: underline; }
.userActions.textlinks .linkAction.danger { color: #64748b; }
.userActions .sep { color: #cbd5e1; padding: 0 .15rem; user-select: none; }

/* Nav row under brand/user, centered */
.navRow { display: flex; align-items: center; justify-content: center; }

/* Navbar (slimmer pill) */
.topnav {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem;
  border: 1px solid #e5e7eb;
  background: #ffffffcc;
  padding: .25rem;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15,23,42,0.05);
}
.topnav.wide { padding: .35rem .6rem; min-width: 380px; }
.topnav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  color: #0f172a; text-decoration: none; font-weight: 600; font-size: .88rem;
  border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.topnav a:hover {
  background: linear-gradient(135deg, rgba(11,61,145,.10), rgba(128,0,0,.10));
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.topnav a.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg,#0B3D91,#800000);
  box-shadow: 0 5px 14px rgba(0,0,0,.14);
}

/* ---------- DASHBOARD CARDS ---------- */

.cardGrid { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width:600px){ .cardGrid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .cardGrid { grid-template-columns: repeat(4,minmax(0,1fr)); } }

.card {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
  padding: 1rem 1.25rem; box-shadow: 0 10px 20px rgba(15,23,42,0.05);
  font-size: .8rem; line-height: 1.1rem; color: #334155;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,0.1); }
.cardLabel { font-size: .7rem; color: #64748b; font-weight: 500; }
.cardValue { font-size: 1.5rem; line-height: 1.8rem; font-weight: 600; color: #0f172a; }
.cardNote  { font-size: .65rem; color: #94a3b8; margin-top: .25rem; }

/* ---------- PANELS ---------- */

.panel {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 30px rgba(15,23,42,0.07); overflow: hidden; margin-bottom: 2rem;
}
.panelHead { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.panelHeadTitle { font-weight: 700; color: #0f172a; font-size: 1.25rem; line-height: 1.5rem; display: flex; gap: .5rem; align-items: center; }
.panelHeadTitle .sub { font-size: .8rem; }
.panelHeadRight { font-size: .65rem; color: #94a3b8; }

footer { text-align: center; font-size: .65rem; color: #94a3b8; margin-bottom: 2rem; }

/* ---------- TABLES ---------- */

.tableWrap { overflow-x:auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
thead { background: #f8fafc; color: #64748b; text-align: left; }
th, td { padding: .6rem .75rem; vertical-align: top; }
tbody tr { border-top: 1px solid #e2e8f0; color: #1e293b; }
.pill {
  display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 999px;
  font-size: .65rem; line-height: .9rem; padding: 2px 6px; color: #0f172a; font-weight: 500; white-space: nowrap;
}

/* =====================================
   LOGIN PAGE
   ===================================== */

.loginOuter {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(11,61,145,0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(128,0,0,0.08) 0%, transparent 60%),
    #f8fafc;
  padding: 2rem;
}

.loginWrapper {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 16px; border: 1px solid #cbd5e1;
  box-shadow: 0 25px 50px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  padding: 2rem 2rem 1.5rem; color: #0f172a; font-size: 0.9rem; line-height: 1.4rem;
}

.loginHeader { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }

.loginSectionTitle { font-weight: 600; font-size: 1rem; color: #0f172a; margin-bottom: .25rem; }
.loginSectionSub   { font-size: .8rem; color: #64748b; margin-bottom: 1rem; }

.formField { margin-bottom: 1rem; }
.formField label {
  display: block; font-size: .8rem; font-weight: 600; color: #0f172a; margin-bottom: .4rem;
}
.formField input {
  width: 100%; border: 1px solid #94a3b8; border-radius: 8px;
  font-size: .95rem; padding: .75rem .75rem; outline: none; background-color: #fff;
}
.formField input:focus { border-color: #0B3D91; box-shadow: 0 0 0 3px rgba(11,61,145,.2); }

/* button (login) */
button.loginBtn {
  width: 100%; background: linear-gradient(135deg,#0B3D91,#800000); border: 0; border-radius: 8px;
  color: #fff; font-size: .95rem; padding: .9rem .75rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 18px 30px rgba(0,0,0,.25); margin-top: .5rem; line-height: 1.2rem;
}
button.loginBtn:hover { filter: brightness(1.06); }

/* error box */
.loginError {
  background: #fee2e2; border: 1px solid #ef4444; color: #991b1b;
  border-radius: 8px; font-size: .85rem; line-height: 1.2rem;
  padding: .6rem .75rem; margin-bottom: 1rem; font-weight: 600;
}

/* small note in card footer (optional) */
.loginFooterNote { margin-top: 1.25rem; font-size: .75rem; color: #94a3b8; text-align: right; }

/* =====================================
   MODALS (Tasks)
   ===================================== */

.modal {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(15,23,42,.45);
  z-index: 1000; padding: 1rem;
}
.modal.show { display: flex; }

.modalCard {
  width: 100%; max-width: 640px; background: #fff;
  border-radius: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.modalHead {
  padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: #0f172a;
}
.modalBody { padding: 1rem 1.25rem; }
.modalFoot {
  padding: 1rem 1.25rem; border-top: 1px solid #e2e8f0;
  display: flex; gap: .5rem; justify-content: flex-end;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: .6rem .9rem; background: #fff; cursor: pointer; font-weight: 600;
  min-height: 44px;
}
.btn.primary {
  background: linear-gradient(135deg,#0B3D91,#800000);
  color: #fff; border: 0; box-shadow: 0 12px 24px rgba(0,0,0,.2);
}
.btn.ghost { background:#fff; color:#0f172a; }
.btn.danger { color:#b91c1c; border:1px solid #ef4444; background:#fff; }

/* textareas & selects in modal */
select, textarea {
  width: 100%; border: 1px solid #94a3b8; border-radius: 8px; background:#fff;
  font-size: .95rem; padding: .6rem .65rem;
}
textarea { min-height: 120px; resize: vertical; }

/* Row helper for paired fields */
.formRow { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }

/* Normalize control heights (select vs input) */
.modal .formField input[type="text"],
.modal .formField input[type="date"],
.modal .formField input:not([type]),
.modal .formField select {
  height: 44px;
  padding: .65rem .70rem;
  line-height: 1.2;
  border: 1px solid #94a3b8;
  border-radius: 8px;
}
.modal .formField select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
}

/* ==============================
   Customers — VIEW PAGE polish
   Scope: .customers-app .customer-view
   ============================== */

.customers-app .panel { border-radius: 18px; }
.customers-app .panelHead { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.customers-app .panelHeadLeft {
  display:flex; align-items:center; gap:.6rem; flex-wrap: wrap;
}
.customers-app .panelHeadLeft h1 {
  margin:0; font-size: clamp(20px, 2.4vw, 28px); line-height:1.15; color:#0f172a;
}
.customers-app .panelHeadLeft .pill {
  background:#f1f5f9; border:1px solid #cbd5e1; color:#0f172a; font-weight:600;
  border-radius:999px; padding:.25rem .6rem; font-size:.72rem;
}
.customers-app .panelHeadLeft .mutedSmall {
  color:#64748b; font-size:.78rem;
}
.customers-app .panelHeadRight { display:flex; gap:.5rem; flex-wrap:wrap; }
.customers-app .btn.btn-secondary { background:#fff; color:#0f172a; border:1px solid #cbd5e1; }

/* Page body width lock (keeps it slim like your screenshot) */
.customers-app .panelBody > .narrow { max-width: 900px; }

/* Section headings */
.customers-app .sectionTitle {
  font-weight: 700; color:#0f172a; font-size: 1.05rem; margin: 1rem 0 .5rem;
}
.customers-app .section {
  border-top: 1px solid #e2e8f0; padding-top: .75rem; margin-top: .75rem;
}

/* Key–Value table used in Primary contact */
.customers-app table.kv { width:100%; border-collapse: collapse; }
.customers-app table.kv tr { border-top: 1px solid #eef2f7; }
.customers-app table.kv tr:first-child { border-top: 0; }
.customers-app table.kv th,
.customers-app table.kv td { padding: .55rem .6rem; vertical-align: top; }
.customers-app table.kv th {
  width: 180px; font-weight: 600; color:#475569; background: transparent; text-align:left;
}
.customers-app table.kv td { color:#0f172a; }
.customers-app table.kv a { color:#0B3D91; text-decoration: none; }
.customers-app table.kv a:hover { text-decoration: underline; }

/* Additional contacts list + empty state */
.customers-app .addContactsHead { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.customers-app .emptyNote { color:#94a3b8; font-size:.9rem; margin:.5rem 0; }

/* Notes block */
.customers-app .notesBlock {
  border:1px dashed #e2e8f0; background:#fcfdff; border-radius: 12px;
  padding: .75rem .85rem; color:#0f172a;
}

/* Spacing beneath the main card on large screens */
.customers-app .panel { box-shadow: 0 30px 50px rgba(15,23,42,.08); }

/* Mobile tweaks */
@media (max-width: 720px){
  .customers-app table.kv th { width: 38%; }
  .customers-app .panelHead { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .customers-app .panelHeadRight { width:100%; justify-content:flex-start; }
}

/* Customers — view page padding boost */
.customers-app .panelHead { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.customers-app .panelBody { padding: 1rem 1.25rem; }

.customers-app .panelBody > .narrow{
  max-width: 1100px;
  margin: 0;              /* keep left-aligned like your screenshot */
  padding: 0 .5rem;       /* a touch of inner side padding */
}

/* Section spacing */
.customers-app .sectionTitle{ margin: 1rem 0 .6rem; }
.customers-app .section{ padding-top: 1rem; margin-top: 1rem; }

/* Key–value table cell padding */
.customers-app table.kv th,
.customers-app table.kv td{ padding: .8rem 1rem; }

/* Notes block padding */
.customers-app .notesBlock{ padding: 1rem 1.1rem; border-radius: 14px; }

/* Keep the Add contact button off the edge */
.customers-app .addContactsHead{ padding-right: .25rem; }

.user-role{font-size:.85rem;opacity:.8}

/* Flash messages */
.flash{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.85rem 1rem; margin:0 0 1rem;
  border:1px solid transparent; border-radius:12px;
  font-weight:600; line-height:1.3;
}
.flash .icon{ font-weight:900; line-height:1; margin-top:.1rem; }

/* Success (green) */
.flash.ok{
  background:#ecfdf5;           /* mint */
  color:#065f46;
  border-color:#34d399;
}

/* Error (red) */
.flash.error{
  background:#fef2f2;           /* rose */
  color:#7f1d1d;
  border-color:#f87171;
}

/* Optional dismiss button */
.flash .close{
  margin-left:auto; cursor:pointer; border:0; background:transparent;
  color:inherit; opacity:.6; font-size:1rem; line-height:1;
}
.flash .close:hover{ opacity:1; }

/* 1) Vertically center the title with the logo in the account header */
.loginHeader{
  display:flex;
  align-items:center;      /* <-- centres the brand text against the logo */
  gap:.75rem;
}

/* Optional: subtle hover so it feels interactive without becoming a button */
.loginFooterNote .linkAction:hover{
  text-decoration: underline;
}


/* Size variants */
.btn.sm{ padding:.6rem .9rem; font-size:.85rem; }
.btn.lg{ padding:.85rem 1.1rem; font-size:1rem; font-weight:700; }

/* Solid variants */
.btn.dangerFill{ background:#b91c1c; color:#fff; border:0; box-shadow:0 12px 24px rgba(0,0,0,.2); }
.btn.dangerFill:hover{ filter:brightness(.95); }
.btn.blueFill{ background:#0B3D91; color:#fff; border:0; box-shadow:0 12px 24px rgba(0,0,0,.2); }
.btn.blueFill:hover{ filter:brightness(.95); }
.panelHeadTitle.sm{ font-size: 1.05rem; line-height:1.3rem; }
.panelHeadTitle.lg{ font-size: 1.4rem; line-height:1.7rem; }