/* bf pos look for the server-rendered pages (sign-in, profile, user admin and
 * the earlier CRM). Loaded after design.css: it only re-points that design
 * system's tokens to the palette and type of the Business-Tool
 * (tool/src/template.html), so both feel like one product. */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700.woff2) format('woff2')}

:root{
  --brand-green:#183AE0; --brand-green-dark:#1330BE; --brand-green-light:#E8F3FF;
  --accent-blue:#183AE0; --accent-blue-light:#E8F3FF;
  --bg-page:#F6F7F9; --bg-card:#FFFFFF; --bg-header:#FFFFFF; --bg-input:#FFFFFF; --bg-soft:#F6F7F9; --bg-elevated:#FFFFFF;
  --text-primary:#0B1020; --text-secondary:#5B6478; --text-muted:#8A93A6;
  --border:#E6E9F0; --border-strong:#D5DAE5;
  --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(8,18,92,.04); --shadow-md:0 6px 20px rgba(8,18,92,.08);
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bf-display:'Poppins',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-green:#5B84FF;--brand-green-dark:#7598FF;--brand-green-light:#18233F;--accent-blue:#5B84FF;--accent-blue-light:#18233F;--bg-page:#0D1017;--bg-card:#151923;--bg-header:#151923;--bg-input:#10141D;--bg-soft:#10141D;--bg-elevated:#151923;--text-primary:#E9ECF3;--text-secondary:#A3ACBF;--text-muted:#727B90;--border:#252B3A;--border-strong:#323A4E;--accent-red-light:#3A1518;--accent-orange-light:#3A2A0C;--accent-purple-light:#2A1D55;color-scheme:dark}}
:root[data-theme="dark"]{--brand-green:#5B84FF;--brand-green-dark:#7598FF;--brand-green-light:#18233F;--accent-blue:#5B84FF;--accent-blue-light:#18233F;--bg-page:#0D1017;--bg-card:#151923;--bg-header:#151923;--bg-input:#10141D;--bg-soft:#10141D;--bg-elevated:#151923;--text-primary:#E9ECF3;--text-secondary:#A3ACBF;--text-muted:#727B90;--border:#252B3A;--border-strong:#323A4E;--accent-red-light:#3A1518;--accent-orange-light:#3A2A0C;--accent-purple-light:#2A1D55;color-scheme:dark}

h1,h2,h3,.page-header h1,.section-h__title,.kpi-card__value{font-family:var(--bf-display);letter-spacing:-.02em}
body{-webkit-font-smoothing:antialiased}

/* Buttons and fields as in the tool: pills, royal blue. */
.btn{border-radius:999px;font-weight:600}
.btn--primary{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.btn--primary:hover{background:var(--brand-green-dark);border-color:var(--brand-green-dark)}
.input,.select,textarea.input{border-radius:10px;border-color:var(--border);background:var(--bg-input);color:var(--text-primary)}
.card{border-radius:var(--r-xl);border-color:var(--border);box-shadow:none}
.avatar{display:inline-flex;align-items:center;justify-content:center}

/* Header: light, with the bf pos logo. */
.header{background:var(--bg-header);color:var(--text-primary);border-bottom:1px solid var(--border)}
.header__brand img{display:block;height:26px;width:auto}
.header a,.header button{color:var(--text-primary)}
.header .btn--primary{color:#fff}
.header__nav-link{color:var(--text-secondary)!important}
.header__nav-link.is-active{color:var(--brand-green)!important;border-color:var(--brand-green)!important}
.header__search-trigger{background:var(--bg-soft);border-color:var(--border);color:var(--text-secondary)}
.header__user-name,.header__logout{color:var(--text-secondary)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .header__brand img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .header__brand img{filter:brightness(0) invert(1)}

/* Sign-in pages. The text logo of the markup is replaced by the image. */
.auth-shell{background:var(--bg-page);color:var(--text-primary)}
.auth-brand__logo{font-size:0;line-height:0;width:132px;height:48px;margin:0 auto;background:url(/img/bfpos-logo.png) center/contain no-repeat}
.auth-brand__sub{color:var(--text-muted);letter-spacing:.08em}
.auth-card{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-radius:22px;box-shadow:0 12px 40px rgba(8,18,92,.08)}
.auth-card h2{color:var(--text-primary);font-family:var(--bf-display)}
.auth-card .muted,.auth-card .form-field label,.auth-footer__label,.auth-version{color:var(--text-secondary)}
.auth-footer{border-color:var(--border)}
.input--dark{background:var(--bg-input);color:var(--text-primary);border-color:var(--border)}
.input--dark:focus{border-color:var(--brand-green);outline:2px solid var(--brand-green);outline-offset:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-brand__logo{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .auth-brand__logo{filter:brightness(0) invert(1)}

/* Phones: no zoom on focus, wide tables scroll inside their card. */
@media (max-width:760px){
  .input,.select,textarea,input,select{font-size:16px}
  .card--padless{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card--padless .table{min-width:680px}
}

/* Header on phones: the two account links stay visible (the old CRM hid its
 * navigation here and used a bottom bar instead). */
@media (max-width:899px){
  .header__nav{display:flex!important;gap:14px;margin-left:12px;overflow-x:auto}
  .header__nav-link{white-space:nowrap;font-size:14px}
  .header__user-name{display:none}
  .app-shell{padding-bottom:24px}
}

/* Elements that used the old dark header colour as their own background. */
.section-h__num,.pill.is-active{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.bulk-bar{background:var(--text-primary)}
.notice{background:var(--brand-green-light);color:var(--brand-green-dark);border:1px solid var(--border);border-radius:14px;padding:12px 16px;font-size:14px}

/* Badges and the invitation box: readable in both themes (they had fixed
 * light backgrounds). */
.badge--neutral{background:var(--bg-soft);color:var(--text-secondary);border:1px solid var(--border)}
.badge--red{background:var(--accent-red-light);color:#E5484D}
.badge--orange{background:var(--accent-orange-light);color:#D9822B}
.invite-flash{background:var(--brand-green-light);border-color:var(--brand-green)}
.invite-flash__link{display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:8px 8px 8px 14px}
.invite-flash__link code{flex:1;min-width:0;font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);word-break:break-all}

/* Tables with a control in every row (users, invitations). */
.select--cell{font-size:12px;padding:4px 8px;min-width:70px}
.table--stack .badge{white-space:nowrap}
.select--role{min-width:158px}
.row-actions form{display:block;margin:3px 0}
.row-actions .btn{white-space:nowrap}

/* Where the table does not fit (phones, tablets, small laptops) each row
 * becomes a small card: label left, value right, nothing to scroll sideways. */
@media (max-width:1199px){
  .card--padless .table.table--stack{min-width:0}
  .table.table--stack,.table.table--stack tbody{display:block;width:100%}
  .table.table--stack thead,.table.table--stack td.stack-hide{display:none}
  .table.table--stack tbody tr{display:block;padding:14px 18px;border-bottom:1px solid var(--border)}
  .table.table--stack tbody tr:last-child{border-bottom:0}
  .table.table--stack tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;border:0;min-height:36px;max-width:none!important;text-align:right;overflow-wrap:anywhere}
  .table.table--stack tbody td[data-label]::before{content:attr(data-label);flex:none;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);text-align:left}
  .table.table--stack tbody td.stack-title{font-size:16px;justify-content:flex-start;text-align:left}
  .table.table--stack tbody td.row-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px;white-space:normal;padding-top:8px}
  .table.table--stack .row-actions form{margin:0}
  .select--role{min-width:0}
}
@media (min-width:700px) and (max-width:1199px){
  .table.table--stack tbody{display:grid;grid-template-columns:1fr 1fr}
  .table.table--stack tbody tr{border-right:1px solid var(--border)}
  .table.table--stack tbody tr:nth-child(2n){border-right:0}
  .table.table--stack tbody tr:last-child{border-bottom:1px solid var(--border)}
}
@media (max-width:760px){
  .select--cell{font-size:16px;padding:6px 10px}
}