*{
box-sizing:border-box
}


:root{

--dark:#101828;
--blue:#315efb;
--background:#f5f6f8;
--line:#e4e7ec;
--text:#182230;
--muted:#667085;
--green:#067647;
--green-light:#ecfdf3;
--orange:#b54708;
--orange-light:#fffaeb;
--purple:#6941c6

}


body{

margin:0;
background:var(--background);
color:var(--text);

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif

}


.hidden{
display:none!important
}


header{

background:var(--dark);
color:#fff;

padding:15px 26px;

display:flex;
justify-content:space-between;
align-items:center;

gap:20px

}


.logo{

font-size:21px;
font-weight:800

}


.subtitle{

font-size:11px;
color:#98a2b3;
margin-top:3px

}


.header-controls{

display:flex;
align-items:flex-end;
gap:12px

}


.header-controls label{

color:#d0d5dd

}


.header-controls select{

min-width:170px

}


nav{

background:#fff;

border-bottom:
1px solid var(--line);

padding:0 26px;

display:flex;
gap:4px;

overflow:auto

}


.nav-btn{

width:auto;

background:#fff;
color:#475467;

border:0;
border-bottom:3px solid transparent;

border-radius:0;

padding:15px 16px;

font-weight:700;
cursor:pointer;

white-space:nowrap

}


.nav-btn.active{

color:var(--blue);

border-bottom-color:
var(--blue)

}


.container{

max-width:1500px;

margin:24px auto;

padding:
0 20px 70px

}


.page{
display:none
}


.page.active{
display:block
}


.page-title{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-bottom:18px

}


h1{

font-size:27px;
margin:0

}


h2{

font-size:18px;
margin:0 0 18px

}


h3{

font-size:15px;
margin:0 0 14px

}


.muted{

color:var(--muted);

font-size:12px;

margin-top:5px

}


.layout{

display:grid;

grid-template-columns:
minmax(0,2fr)
minmax(330px,1fr);

gap:20px

}


.card{

background:#fff;

border:
1px solid var(--line);

border-radius:14px;

padding:21px;

margin-bottom:18px

}


.production-card{

border-left:
5px solid var(--blue)

}


.cover-card{

border-left:
5px solid var(--purple)

}


.materials-card{

border-left:
5px solid #039855

}


.postpress-card{

border-left:
5px solid #f79009

}


.design-card{

border-left:
5px solid #875bf7

}


.section{

border-top:
1px solid #eaecf0;

margin-top:22px;

padding-top:21px

}


.grid{

display:grid;

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:15px

}


.grid3{

display:grid;

grid-template-columns:
repeat(3,minmax(0,1fr));

gap:15px

}


.grid4{

display:grid;

grid-template-columns:
repeat(4,minmax(0,1fr));

gap:12px

}


.dimensions-grid{

display:grid;

grid-template-columns:
repeat(3,minmax(120px,1fr));

gap:10px;

grid-column:
span 2

}


.top-gap{

margin-top:15px

}


label{

display:block;

font-size:12px;

font-weight:700;

margin-bottom:6px

}


input,
select,
textarea{

width:100%;

padding:11px;

border:
1px solid #d0d5dd;

border-radius:9px;

background:#fff;

font-size:14px

}


input:focus,
select:focus,
textarea:focus{

outline:
2px solid #dbe5ff;

border-color:
var(--blue)

}


input[readonly]{

background:#f9fafb

}


button{

border:0;

border-radius:9px;

padding:11px 15px;

background:var(--blue);

color:#fff;

font-weight:700;

cursor:pointer

}


button:hover{

opacity:.94

}


.gray{

background:#f2f4f7;
color:#344054

}


.green{

background:#079455

}


.dark{

background:#101828

}


.red{

background:#b42318

}


.actions{

display:flex;

gap:9px;

flex-wrap:wrap;

margin-top:16px

}


.field-with-button{

display:flex;

gap:8px;

align-items:flex-end

}


.field-with-button>div{

flex:1

}


.field-with-button button{

background:#f2f4f7;
color:#344054;

padding:
10px 12px

}


.checkbox-line{

display:flex;

align-items:center;

gap:9px;

height:43px

}


.checkbox-line input{

width:auto

}


.hint{

color:var(--muted);

font-size:11px;

line-height:1.45;

margin-top:5px

}


.section-description{

margin-bottom:14px

}


.metrics{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:10px;

margin-top:18px

}


.metric{

background:#f8fafc;

border:
1px solid #eaecf0;

border-radius:10px;

padding:13px

}


.metric span{

display:block;

color:#667085;

font-size:11px;

margin-bottom:7px

}


.metric strong{

font-size:19px

}


.flow{

margin-top:15px;

padding:13px;

background:#eef4ff;

border:
1px solid #b2ccff;

border-radius:10px;

font-size:12px;

color:#3538cd;

line-height:1.6

}


.special{

margin-top:14px;

padding:13px;

background:#fff4ed;

border:
1px solid #ffd6ae;

border-radius:10px;

font-size:12px;

color:#9c2a10;

line-height:1.55

}


.sticky{

position:sticky;

top:20px

}


.result-line{

display:flex;

justify-content:space-between;

gap:15px;

padding:11px 0;

border-bottom:
1px solid #eaecf0

}


.result-line span{

color:#667085;

font-size:13px

}


.result-line strong{

text-align:right

}


.client-price{

font-size:15px

}


.total-box{

background:var(--green-light);

border-radius:11px;

padding:17px;

margin-top:16px;

margin-bottom:8px

}


.total-box span{

font-size:12px

}


.total-box strong{

display:block;

font-size:28px;

color:var(--green);

margin-top:5px

}


.table-scroll{

overflow:auto;

border:
1px solid #eaecf0;

border-radius:10px

}


table{

width:100%;

border-collapse:collapse;

font-size:11px

}


th,
td{

padding:9px;

border-bottom:
1px solid #eaecf0;

text-align:left;

vertical-align:middle

}


th{

background:#f9fafb;

white-space:nowrap

}


td input,
td select{

min-width:110px;

padding:8px;

font-size:11px

}


.delete-row{

background:#fef3f2;
color:#b42318;

padding:8px 10px

}


.contractor-input{

min-width:130px

}


.align-bottom{

display:flex;

align-items:flex-end

}


.kpi-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:12px;

margin-bottom:18px

}


.kpi{

background:#fff;

border:
1px solid var(--line);

border-radius:12px;

padding:16px

}


.kpi span{

font-size:11px;

color:#667085

}


.kpi strong{

display:block;

font-size:23px;

margin-top:7px

}


.tariff-section{

margin-bottom:18px

}


.tariff-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px

}


.permission-note{

padding:12px;

background:#f9fafb;

border:
1px solid #eaecf0;

border-radius:9px;

font-size:12px;

color:#475467;

margin-bottom:16px

}


@media(max-width:1050px){

.layout,
.grid,
.grid3,
.grid4,
.metrics,
.kpi-grid{

grid-template-columns:1fr

}


.dimensions-grid{

grid-template-columns:
repeat(2,minmax(0,1fr));

grid-column:auto

}


.sticky{

position:static

}

}


@media(max-width:650px){

header{

align-items:flex-start;
flex-direction:column

}


.header-controls{

width:100%;
flex-direction:column;
align-items:stretch

}


.dimensions-grid{

grid-template-columns:1fr

}


.container{

padding:
0 12px 50px

}

}


@media print{

header,
nav,
.no-print,
.actions,
button{

display:none!important

}


body{

background:#fff

}


.container{

max-width:none;
margin:0

}


.layout{

grid-template-columns:1fr

}


.card{

break-inside:avoid

}

}

/* =========================================================
   AUTH / SUPABASE
   ========================================================= */

.auth-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#f5f6f8;
}

.auth-screen.hidden{
  display:none!important;
}

.auth-card{
  width:min(430px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  box-shadow:0 18px 50px rgba(16,24,40,.08);
}

.auth-brand{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--blue);
  margin-bottom:18px;
}

.auth-card h1{
  font-size:26px;
}

.auth-subtitle{
  margin-bottom:22px;
}

.auth-form{
  display:grid;
  gap:15px;
}

.auth-form button{
  width:100%;
  margin-top:4px;
}

.auth-error{
  padding:10px 12px;
  border:1px solid #fecdca;
  border-radius:9px;
  background:#fef3f2;
  color:#b42318;
  font-size:12px;
  line-height:1.45;
}

.user-summary{
  display:flex;
  align-items:center;
  gap:14px;
}

.header-user-name{
  font-size:13px;
  font-weight:800;
  text-align:right;
}

.header-user-role{
  margin-top:3px;
  font-size:11px;
  color:#98a2b3;
  text-align:right;
}

.header-logout{
  width:auto;
  white-space:nowrap;
}

.sync-status{
  font-size:11px;
  color:#98a2b3;
}

@media(max-width:650px){
  .user-summary{
    width:100%;
    justify-content:space-between;
  }

  .header-user-name,
  .header-user-role{
    text-align:left;
  }
}


/* ===== V2 brand / role visibility ===== */
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo-box{background:transparent;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center}
.brand-logo-img{display:block;width:220px;max-height:70px;object-fit:contain}
body.role-manager .internal-cost-row{display:none}
body.role-manager #priceRuleHint{display:none}
body.role-chief .commercial-secret,body.role-manager .commercial-secret{display:none!important}
.validation-error{margin:12px 0;padding:12px 14px;border:1px solid #fda29b;background:#fef3f2;color:#b42318;border-radius:10px;font-weight:600}
.validation-warning{margin:12px 0;padding:12px 14px;border:1px solid #fedf89;background:#fffaeb;color:#b54708;border-radius:10px;font-weight:600}
.manager-paper-note{font-size:11px;color:var(--muted);margin-top:5px}
.postpress-price-note{font-size:11px;color:var(--muted);margin-left:auto}
@media(max-width:900px){.brand-logo-box{display:none}.brand-wrap{gap:0}}

body.role-manager table:has(#extraMaterialsBody) th:nth-child(4),body.role-manager #extraMaterialsBody td:nth-child(4){display:none}
body.role-chief .sticky .client-price,body.role-chief .sticky .manager-summary-row,body.role-chief .sticky .total-box,body.role-chief #priceRuleHint{display:none}