/*
 * SEYLAC UI REFRESH 2026
 * Visual-only enhancement layer. It deliberately leaves routes, controllers,
 * request names and database behavior untouched.
 */
:root{
  --blue:#1738ff;
  --blue-strong:#0f2fe8;
  --blue-soft:#edf2ff;
  --blue-softer:#f6f8ff;
  --navy:#071433;
  --ink:#0b1635;
  --ink-2:#293451;
  --muted:#707b96;
  --muted-2:#98a1b5;
  --line:#e1e7f0;
  --line-strong:#d2dbea;
  --surface:#ffffff;
  --surface-2:#f8faff;
  --canvas:#f3f6fb;
  --green:#058b62;
  --green-soft:#e8f8f2;
  --red:#d13f4b;
  --red-soft:#fff0f2;
  --amber:#a96b00;
  --amber-soft:#fff7e7;
  --shadow-xs:0 1px 2px rgba(13,28,67,.04);
  --shadow-sm:0 8px 24px rgba(16,35,82,.055);
  --shadow-md:0 18px 52px rgba(15,34,85,.09);
  --shadow-lg:0 28px 90px rgba(6,20,58,.18);
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --sidebar-width:282px;
}

html{background:var(--canvas);-webkit-text-size-adjust:100%}
body.seylac-app{
  color:var(--ink);
  background:
    radial-gradient(circle at 88% -10%,rgba(23,56,255,.07),transparent 30rem),
    var(--canvas);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.dialog-open,body.sidebar-open{overflow:hidden}
.ui-icon{display:block;flex:0 0 auto}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(23,56,255,.22);
  outline-offset:2px;
}

/* Buttons and fields */
.btn{
  min-height:46px;
  padding:0 18px;
  border-radius:13px;
  font-size:13px;
  font-weight:760;
  letter-spacing:-.01em;
  box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#294aff);box-shadow:0 12px 27px rgba(23,56,255,.2)}
.btn-primary:hover{background:linear-gradient(135deg,var(--blue-strong),#2444f0);box-shadow:0 15px 32px rgba(23,56,255,.24)}
.btn-secondary{background:rgba(255,255,255,.94);border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{border-color:#b8c3d6;background:#fff}
.btn-danger{background:var(--red-soft);border-color:#ffd5da;color:#b52f3a}
.btn-sm{min-height:40px;padding:0 14px;border-radius:11px}
.link-button,.link-danger{font-size:12px;min-height:34px;display:inline-flex;align-items:center}

input,select,textarea,.form-control{
  min-width:0;
  border-color:var(--line-strong);
  border-radius:13px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(7,20,51,.015);
}
input,select,.form-control{min-height:48px;padding-inline:14px}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f7891' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:42px;
}
textarea{min-height:112px;padding:13px 14px;line-height:1.55}
input::placeholder,textarea::placeholder{color:#9aa3b5}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:#7890ff;
  box-shadow:0 0 0 4px rgba(23,56,255,.09);
}
label,.form-label{gap:8px;color:#34405e;font-size:12px;font-weight:720;letter-spacing:-.005em}
.form-grid{gap:17px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-group{margin-bottom:17px}
.file-label{border-color:#bcc9df;background:var(--surface-2);padding:16px}
.checkbox,.checkbox-row{font-weight:650;color:var(--ink-2)}
.checkbox input,.checkbox-row input{accent-color:var(--blue)}
.field-help{line-height:1.55}

/* Main frame */
.app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.sidebar{
  width:var(--sidebar-width);
  padding:22px 17px 18px;
  border-right:1px solid rgba(215,223,237,.9);
  box-shadow:8px 0 40px rgba(26,45,91,.025);
}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:0 8px 21px}
.sidebar-close{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.brand-sm{font-size:21px}
.brand-mark{width:42px;height:42px;border-radius:13px;box-shadow:0 11px 24px rgba(23,56,255,.2)}
.company-switcher{
  margin:17px 2px 20px;
  padding:14px 15px;
  border-color:#dbe2ee;
  border-radius:15px;
  background:linear-gradient(145deg,#f8faff,#f2f5fb);
}
.company-switcher small{font-size:9px;color:#7f899e}
.company-switcher strong{font-size:13px;margin-top:6px}
.company-options{min-width:220px;border-radius:14px;box-shadow:var(--shadow-md)}
.company-option{min-height:40px;font-weight:650;color:var(--ink)}
.nav-label{padding-inline:11px;margin-top:10px;color:#8d97ab}
.side-nav{gap:4px}
.side-link{
  min-height:45px;
  padding:0 12px;
  border-radius:12px;
  gap:11px;
  font-size:12px;
  color:#5d6881;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.side-link:hover{background:#f3f6fb;transform:translateX(1px)}
.side-link.active{background:linear-gradient(90deg,#e8eeff,#f0f4ff);color:var(--blue)}
.side-icon{width:30px;height:30px;border-radius:9px;background:#f0f3f8;color:#64718d}
.side-link.active .side-icon{background:#dce5ff;color:var(--blue)}
.sidebar-user{padding:17px 5px 0}
.avatar{border-radius:12px;box-shadow:0 9px 20px rgba(23,56,255,.18)}
.logout-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px}
.logout-btn:hover{background:#f1f4f9;color:var(--red)}
.sidebar-backdrop{display:none}

.app-main{grid-column:2;min-width:0}
.topbar{
  height:76px;
  padding:0 32px;
  border-bottom-color:rgba(218,225,237,.9);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  transition:box-shadow .2s ease;
}
.topbar.is-scrolled{box-shadow:0 10px 30px rgba(16,35,82,.06)}
.topbar-left{min-width:0}
.topbar-title{min-width:0}
.topbar-title strong{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span{font-size:10px}
.topbar-actions{gap:9px}
.top-action{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border-radius:11px;
  color:var(--blue);
  font-size:12px;
}
.top-action:hover{background:var(--blue-soft)}
.status-badge,.role-badge{min-height:34px;padding:0 12px}
.status-badge{gap:7px}
.status-badge i{width:7px;height:7px;border-radius:50%;background:#12a376;box-shadow:0 0 0 4px rgba(18,163,118,.1)}
.mobile-menu{width:43px;height:43px;border-radius:13px;color:var(--ink)}

.app-content{width:100%;max-width:1580px;padding:34px 36px 60px}
.app-content>*{min-width:0}
.page-head{align-items:center;margin-bottom:26px}
.page-head>div:first-child{min-width:0}
.page-head h1{font-size:clamp(31px,3vw,42px);line-height:1.05;letter-spacing:-.055em;margin-bottom:10px}
.page-head p{font-size:14px;max-width:720px}
.eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:11px}
.page-actions{justify-content:flex-end}
.alert{box-shadow:var(--shadow-xs);border-radius:15px}

/* Surface and data components */
.panel,.card,.card-pad{
  border-color:var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  background:rgba(255,255,255,.96);
}
.panel{padding:24px}
.card-pad{padding:24px}
.panel-head{align-items:center;margin-bottom:20px}
.panel-head h2{font-size:19px;line-height:1.2}
.panel-head p{font-size:12px;line-height:1.5}
.panel-head>a{display:inline-flex;align-items:center;min-height:32px}
.two-col{gap:20px}
.split-grid,.dashboard-grid{gap:20px;margin-bottom:20px}
.dashboard-grid{grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr)}
.dashboard-grid.lower{grid-template-columns:repeat(2,minmax(0,1fr))}

.metric-grid{gap:16px;margin-bottom:20px}
.metric-card{
  min-height:168px;
  padding:22px;
  border-radius:20px;
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.metric-card::after{
  content:"";
  position:absolute;
  width:120px;height:120px;border-radius:50%;
  right:-65px;top:-70px;
  background:rgba(23,56,255,.055);
}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-2)}
.metric-top i{font-style:normal;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.metric-card>strong{font-size:28px;margin:22px 0 6px;position:relative;z-index:1}
.metric-card>small{font-size:11px}

.metric-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 18px;
}
.metric-strip>div{
  min-height:105px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:var(--shadow-xs);
}
.metric-strip span,.metric-strip strong{display:block}
.metric-strip span{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.metric-strip strong{font-size:22px;letter-spacing:-.04em;margin-top:9px}

.accounting-summary{gap:14px}
.summary-tile{border-radius:18px;box-shadow:var(--shadow-xs);padding:19px}
.summary-tile strong{font-size:25px}
.account-strip{gap:15px}
.account-card{border-radius:19px;padding:20px;box-shadow:var(--shadow-xs)}
.account-card h3{font-size:15px}
.account-card>strong{font-size:25px}

.toolbar{margin-bottom:18px;gap:12px;align-items:center}
.search-form{
  width:min(100%,780px);
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(165px,210px) auto;
  gap:10px;
}
.search-form input,.search-form select,.search-form button{width:100%}
.inline-filter{flex-wrap:wrap}
.date-filter{border-radius:17px!important}

.table-wrap{
  width:100%;
  border-radius:16px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#cbd4e5 transparent;
}
.panel>.table-wrap{margin:-4px 0}
table{min-width:650px}
th{
  padding:13px 14px;
  font-size:9px;
  color:#8791a6;
  background:#fbfcfe;
  border-bottom-color:#dfe5ef;
}
th:first-child{border-radius:11px 0 0 11px}
th:last-child{border-radius:0 11px 11px 0}
td{padding:15px 14px;font-size:12px;border-bottom-color:#edf1f6}
tbody tr{transition:background .14s ease}
tbody tr:not(.empty-row):hover{background:#fafbfe}
.cell-sub{font-size:10px!important;line-height:1.45}
.empty-cell{font-size:12px;padding:54px 20px!important}
.table-link{font-weight:760}
.row-menu>div{border-radius:13px;box-shadow:var(--shadow-md)}
.pagination{font-size:11px}

.status{min-height:28px;padding:0 10px;font-size:9px;letter-spacing:.01em}
.empty-state{border-radius:17px;line-height:1.6}

/* Dashboard */
.chart-panel{min-height:385px}
.bar-chart{height:250px;gap:20px;padding:26px 12px 0}
.bar{width:12px}
.chart-legend{margin-top:16px}
.quick-panel{padding-bottom:10px}
.quick-action{
  min-height:76px;
  padding:13px 4px;
  border-radius:13px;
  border-bottom:0;
  margin-bottom:4px;
  transition:background .16s ease,transform .16s ease;
}
.quick-action:hover{background:#f7f9fe;transform:translateX(2px)}
.quick-action>span{width:44px;height:44px;border-radius:13px}
.quick-action strong{font-size:13px}
.quick-action small{font-size:10px}
.activity-item{padding:14px 0}

/* Invoicing */
.invoice-builder{display:grid;gap:20px}
.invoice-builder>.panel,.invoice-builder>.split-grid{margin:0}
.invoice-lines{border:1px solid var(--line);border-radius:16px}
.invoice-lines table{min-width:900px}
.invoice-lines th{background:#f8faff}
.invoice-lines td{padding:11px 9px;vertical-align:top}
.invoice-lines td:first-child{min-width:280px}
.invoice-lines td:nth-child(2){width:110px}
.invoice-lines td:nth-child(3){width:150px}
.invoice-lines td:nth-child(4),.invoice-lines td:nth-child(5){width:125px}
.product-picker{margin-top:8px;min-height:42px;font-size:11px}
.remove-line{
  width:36px;height:36px;border:1px solid #ffd4d8;border-radius:10px;
  background:var(--red-soft);color:var(--red);font-size:19px;
}
.invoice-summary{
  align-self:start;
  position:sticky;
  top:96px;
  padding:25px;
  background:linear-gradient(160deg,#fff,#f8faff);
}
.invoice-summary>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  color:var(--muted);
}
.invoice-summary>div strong{font-size:15px;color:var(--ink)}
.invoice-summary .summary-total{margin-top:5px;padding-top:17px;border-top:1px solid var(--line);color:var(--ink);font-weight:750}
.invoice-summary .summary-total strong{font-size:22px;letter-spacing:-.035em}
.invoice-summary .btn{margin-top:15px}
.invoice-page{border-radius:24px;box-shadow:var(--shadow-md)}

/* Forms, lists and cards */
.product-grid,.card-grid,.integration-grid{gap:16px}
.mini-card,.integration-card{border-radius:19px;padding:20px;box-shadow:var(--shadow-xs);background:#fff}
.mini-card h3{font-size:15px}
.mini-card p,.integration-card p{font-size:11px;line-height:1.65}
.info-banner,.warning-banner,.security-panel{
  border-radius:17px;
  padding:16px 18px;
  margin-bottom:18px;
  line-height:1.55;
}
.warning-banner{background:var(--amber-soft);border:1px solid #f5deb2;color:#73500e}
.banking-actions{display:flex;gap:10px;flex-wrap:wrap}
.compact-list>div{padding:14px 0}

.card-showcase{gap:20px}
.payment-card{height:242px;border-radius:24px;box-shadow:0 25px 55px rgba(15,39,123,.25)}
.card-details{min-width:0}
.stat-row>div{padding:15px;border-radius:14px}

.journal-editor,.budget-editor{border-radius:16px}
.journal-row,.budget-row{padding:10px}
.progress{height:8px}

.report-tabs{gap:9px;padding-bottom:3px}
.report-tabs a{min-height:38px;display:flex;align-items:center;padding:0 14px;border-radius:999px;font-size:10px}
.report-tabs a:hover{border-color:#b9c5da;background:#fff}
.report-section{border-radius:20px}
.aging-grid{gap:12px}
.aging-grid>div{background:#fff;border-radius:16px;padding:17px;box-shadow:var(--shadow-xs)}
.net-result{border-radius:15px;background:var(--blue-soft)}

/* AI */
.ai-layout{gap:20px;height:calc(100dvh - 145px)}
.ai-history,.ai-chat{border-radius:22px}
.ai-chat-head{padding:20px 22px}
.ai-orb{width:44px;height:44px;border-radius:14px}
.ai-messages{padding:24px}
.ai-message>div:last-child{padding:14px 16px;border-radius:16px}
.ai-message p{font-size:12px}
.ai-composer{margin:0 20px 12px;border-radius:17px;padding:11px;box-shadow:0 -10px 35px rgba(12,33,80,.055)}
.prompt-chips button{min-height:36px;padding:0 13px;font-weight:650}

/* Native dialog / modal */
dialog.modal{
  inset:0;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:24px;
  border:0!important;
  outline:0!important;
  background:transparent;
  overflow:hidden;
}
dialog.modal[open]{display:flex;align-items:center;justify-content:center}
dialog.modal::backdrop{background:rgba(5,15,43,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.modal-card{
  width:min(100%,660px);
  max-height:calc(100dvh - 48px);
  padding:26px;
  border:1px solid rgba(222,228,239,.95);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow-lg);
  overflow:auto;
  overscroll-behavior:contain;
}
.modal-card.wide{width:min(100%,960px);max-width:960px}
.modal-head{position:sticky;top:-26px;z-index:4;margin:-26px -26px 22px;padding:24px 26px 18px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.modal-head h2{font-size:23px}
.modal-head p{font-size:11px;line-height:1.5}
.modal-head>button{width:38px;height:38px;border-radius:12px;color:#5e6880;display:grid;place-items:center}
.modal-head>button:hover{background:#e9edf4;color:var(--ink)}
.modal-card>.btn:last-child{margin-top:7px}

/* Settings/team compatibility */
.card-title{margin-bottom:18px}
.card-title h2,.card-title h3{margin:0}
.member-cell{gap:11px}
.member-avatar{width:40px;height:40px;border-radius:12px}
.inline-form{gap:8px}
.settings-layout{gap:20px}
.settings-save{border-radius:20px}
.danger-zone{padding-top:10px}

@media (max-width:1280px){
  :root{--sidebar-width:264px}
  .app-content{padding-inline:28px}
  .dashboard-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)}
  .metric-card{padding:19px}
  .metric-card>strong{font-size:25px}
}

@media (max-width:1100px){
  .metric-grid,.account-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-grid,.dashboard-grid.lower,.split-grid,.accounting-grid{grid-template-columns:1fr}
  .invoice-summary{position:static}
  .card-showcase{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  .form-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:960px){
  .app-shell{display:block}
  .app-main{grid-column:auto}
  .sidebar{
    width:min(86vw,310px);
    transform:translateX(-105%);
    transition:transform .24s cubic-bezier(.2,.8,.2,1);
    box-shadow:none;
    z-index:100;
  }
  body.sidebar-open .sidebar,.sidebar.open{transform:translateX(0);box-shadow:35px 0 95px rgba(5,16,48,.22)}
  .sidebar-close{display:grid;place-items:center}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    border:0;
    background:rgba(6,17,48,.42);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  body.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
  .mobile-menu{display:grid;place-items:center;flex:0 0 auto}
  .topbar{padding-inline:18px}
  .topbar-actions .top-action{display:inline-flex}
  .app-content{padding:27px 20px 55px}
  .page-head{align-items:flex-start}
  .page-actions{width:auto}
  .ai-layout{height:auto;grid-template-columns:1fr}
  .ai-history{display:none}
  .ai-chat{height:calc(100dvh - 130px)}
}

@media (max-width:720px){
  body.seylac-app{font-size:13px}
  .topbar{height:72px;padding-inline:14px}
  .topbar-left,.topbar-actions{gap:8px}
  .topbar-title strong{max-width:150px;font-size:12px}
  .topbar-title span{display:none}
  .top-action{padding:0 7px;font-size:12px}
  .status-badge{padding:0 10px}
  .role-badge{display:none}
  .app-content{padding:23px 15px 48px}
  .page-head{flex-direction:column;gap:18px;margin-bottom:22px}
  .page-head h1{font-size:32px}
  .page-head p{font-size:13px}
  .page-head>.btn,.page-head>.page-actions{width:100%}
  .page-head>.btn{justify-content:center}
  .page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .page-actions .btn{width:100%;padding-inline:10px}
  .panel,.card-pad{padding:19px;border-radius:18px}
  .panel-head{align-items:flex-start;gap:12px}
  .panel-head h2{font-size:18px}

  .metric-grid,.metric-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .metric-card{min-height:142px;padding:16px;border-radius:17px}
  .metric-top{font-size:11px}
  .metric-top i{width:32px;height:32px}
  .metric-card>strong{font-size:21px;margin:18px 0 5px;white-space:nowrap}
  .metric-card>small{font-size:9px;line-height:1.4}
  .metric-strip{grid-template-columns:1fr;gap:10px}
  .metric-strip>div{min-height:84px;padding:15px 17px}
  .metric-strip strong{font-size:20px}

  .toolbar{align-items:stretch}
  .search-form{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .search-form input{grid-column:1/-1}
  .search-form select{grid-column:1}
  .search-form button{grid-column:2;min-width:96px}
  .inline-filter,.date-filter{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .inline-filter>*:first-child,.date-filter>*:first-child{grid-column:1/-1}

  /* Generic mobile table cards, data-label values are supplied by the UI JS. */
  .table-wrap:has(.responsive-data-table){overflow:visible;border-radius:0}
  .responsive-data-table{min-width:0!important;border-collapse:separate;border-spacing:0 11px}
  .responsive-data-table thead{display:none}
  .responsive-data-table tbody{display:grid;gap:11px}
  .responsive-data-table tbody tr{
    display:block;
    padding:8px 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow-xs);
  }
  .responsive-data-table tbody tr:hover{background:#fff}
  .responsive-data-table td{
    display:grid;
    grid-template-columns:minmax(96px,.75fr) minmax(0,1.25fr);
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 0;
    border-bottom:1px solid #edf1f6;
    text-align:left!important;
    overflow-wrap:anywhere;
  }
  .responsive-data-table td:last-child{border-bottom:0}
  .responsive-data-table td::before{
    content:attr(data-label);
    color:#8993a7;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .responsive-data-table td.num{justify-content:stretch}
  .responsive-data-table .empty-row{padding:0}
  .responsive-data-table .empty-row td{
    display:block;
    padding:34px 18px!important;
    text-align:center!important;
    border:0;
  }
  .responsive-data-table .empty-row td::before{display:none}
  .responsive-data-table .row-menu{justify-self:end}
  .pagination{margin-top:14px}

  .chart-panel{min-height:auto}
  .bar-chart{height:220px;gap:10px;padding-inline:0}
  .bar{width:9px}
  .quick-action{min-height:72px}
  .dashboard-grid.lower{gap:14px}

  .form-grid,.form-grid.three{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .invoice-builder{gap:14px}
  .invoice-lines{overflow:visible;border:0}
  .invoice-lines table,.invoice-lines tbody{display:block;min-width:0;width:100%}
  .invoice-lines thead{display:none}
  .invoice-lines tbody{display:grid;gap:12px}
  .invoice-lines .line-row{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:var(--shadow-xs);
  }
  .invoice-lines .line-row td{display:block;width:auto!important;min-width:0!important;padding:0;border:0}
  .invoice-lines .line-row td::before{display:block;margin-bottom:6px;color:#8993a7;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  .invoice-lines .line-row td:nth-child(1){grid-column:1/-1;padding-right:42px}
  .invoice-lines .line-row td:nth-child(1)::before{content:"Description"}
  .invoice-lines .line-row td:nth-child(2)::before{content:"Quantity"}
  .invoice-lines .line-row td:nth-child(3)::before{content:"Price"}
  .invoice-lines .line-row td:nth-child(4)::before{content:"Discount %"}
  .invoice-lines .line-row td:nth-child(5)::before{content:"VAT %"}
  .invoice-lines .line-row td:last-child{position:absolute;right:14px;top:14px}
  .invoice-lines .line-row td:last-child::before{display:none}
  .invoice-lines input,.invoice-lines select{min-height:44px}
  .invoice-summary{padding:20px}

  .account-strip,.card-grid,.product-grid,.integration-grid{grid-template-columns:1fr}
  .banking-actions{display:grid;grid-template-columns:1fr}
  .banking-actions .btn{width:100%}
  .card-showcase{grid-template-columns:1fr}
  .payment-card{max-width:none;width:100%;height:224px;padding:21px}
  .accounting-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .summary-tile{padding:15px}
  .summary-tile strong{font-size:20px}
  .aging-grid,.aging-grid.three{grid-template-columns:1fr}
  .report-columns,.report-columns.three{grid-template-columns:1fr}
  .settings-layout{grid-template-columns:1fr}
  .settings-save{grid-column:auto;align-items:flex-start;flex-direction:column;gap:15px}

  dialog.modal{padding:0;align-items:flex-end!important}
  .modal-card,.modal-card.wide{
    width:100%;
    max-width:none;
    max-height:91dvh;
    border-radius:25px 25px 0 0;
    border-bottom:0;
    padding:22px 17px calc(22px + env(safe-area-inset-bottom));
  }
  .modal-head{
    top:-22px;
    margin:-22px -17px 19px;
    padding:19px 17px 15px;
    border-radius:25px 25px 0 0;
  }
  .modal-head::before{
    content:"";
    position:absolute;
    top:7px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;border-radius:999px;background:#d9dfeb;
  }
  .modal-head h2{font-size:22px;margin-top:5px}
  .modal-head>button{margin-top:3px}
  .ai-chat{height:calc(100dvh - 112px)}
  .ai-messages{padding:17px}
  .ai-message>div:last-child{max-width:88%}
  .ai-composer{margin-inline:12px}
}

@media (max-width:480px){
  .topbar-title strong{max-width:132px}
  .top-action span{display:inline}
  .status-badge span{display:none}
  .status-badge{width:34px;padding:0;justify-content:center}
  .status-badge i{margin:0}
  .app-content{padding-inline:12px}
  .page-head h1{font-size:29px}
  .page-actions{grid-template-columns:1fr 1fr}
  .btn{min-height:45px;padding-inline:13px}
  .metric-grid,.metric-grid.three{grid-template-columns:1fr 1fr}
  .metric-card{min-height:135px;padding:14px}
  .metric-card>strong{font-size:19px}
  .metric-top i{display:none}
  .panel{padding:17px}
  .panel-head{flex-direction:column}
  .panel-head>a,.panel-head>form,.panel-head>.page-actions{width:100%}
  .panel-head form select{width:100%}
  .search-form{grid-template-columns:minmax(0,1fr) auto}
  .responsive-data-table td{grid-template-columns:86px minmax(0,1fr);gap:8px}
  .invoice-lines .line-row{grid-template-columns:1fr}
  .invoice-lines .line-row td:nth-child(1){grid-column:auto}
  .accounting-summary{grid-template-columns:1fr 1fr}
  .journal-total{align-items:flex-end;flex-direction:column;gap:7px}
  .payment-card{height:215px}
  .card-number{font-size:15px}
}

@media (max-width:370px){
  .topbar-title{display:none}
  .metric-grid,.metric-grid.three,.accounting-summary{grid-template-columns:1fr}
  .page-actions{grid-template-columns:1fr}
}

@media print{
  .sidebar-backdrop{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* SEYLAC INVOICE WIDTH FIX V2 */
body.route-invoices-create .app-main{
    min-width:0;
    overflow-x:hidden;
}

body.route-invoices-create .app-content{
    width:100%;
    max-width:1320px;
    margin-inline:auto;
    overflow-x:clip;
}

body.route-invoices-create .invoice-builder,
body.route-invoices-create .invoice-builder > *,
body.route-invoices-create .invoice-builder .panel,
body.route-invoices-create .invoice-builder .split-grid{
    width:100%;
    max-width:100%;
    min-width:0;
}

body.route-invoices-create .form-grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

body.route-invoices-create .invoice-lines{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

body.route-invoices-create .invoice-lines table{
    width:100%;
    min-width:900px;
    table-layout:fixed;
}

body.route-invoices-create .invoice-lines th:first-child,
body.route-invoices-create .invoice-lines td:first-child{
    width:36%;
}

body.route-invoices-create .invoice-lines th:nth-child(2),
body.route-invoices-create .invoice-lines td:nth-child(2){
    width:11%;
}

body.route-invoices-create .invoice-lines th:nth-child(3),
body.route-invoices-create .invoice-lines td:nth-child(3){
    width:16%;
}

body.route-invoices-create .invoice-lines th:nth-child(4),
body.route-invoices-create .invoice-lines td:nth-child(4),
body.route-invoices-create .invoice-lines th:nth-child(5),
body.route-invoices-create .invoice-lines td:nth-child(5){
    width:14%;
}

body.route-invoices-create .invoice-lines th:last-child,
body.route-invoices-create .invoice-lines td:last-child{
    width:64px;
}

body.route-invoices-create .invoice-lines input,
body.route-invoices-create .invoice-lines select,
body.route-invoices-create textarea{
    width:100%;
    max-width:100%;
    min-width:0;
}

body.route-invoices-create .split-grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,340px);
    align-items:start;
}

body.route-invoices-create .invoice-summary{
    width:100%;
    min-width:0;
    position:sticky;
    top:96px;
}

body.route-invoices-create .invoice-summary > div{
    width:100%;
}

body.route-invoices-create .invoice-summary .btn{
    width:100%;
}

@media (max-width:1250px){
    body.route-invoices-create .app-content{
        max-width:100%;
    }

    body.route-invoices-create .form-grid.three{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    body.route-invoices-create .split-grid{
        grid-template-columns:1fr;
    }

    body.route-invoices-create .invoice-summary{
        position:static;
    }
}

@media (max-width:720px){
    body.route-invoices-create .form-grid.three{
        grid-template-columns:1fr;
    }

    body.route-invoices-create .invoice-lines table{
        min-width:0;
        table-layout:auto;
    }
}
/* END SEYLAC INVOICE WIDTH FIX V2 */