/* FariDocs 1.9.1 — dark-mode contrast and touch-friendly generator layout */

/* Hidden upload previews must never leak a broken-image placeholder. */
.logo-uploader img[hidden],
.signature-uploader img[hidden],
.preview-logo img[hidden],
.preview-signature-image img[hidden]{display:none!important}

/* Complete dark-mode treatment for every generator surface and field. */
html[data-theme="dark"] .generator-intro{
    border-color:#294757;
    background:radial-gradient(circle at 88% 12%,rgba(55,192,174,.12),transparent 30%),linear-gradient(125deg,#102a3a,#0b202e);
    box-shadow:0 18px 48px rgba(0,0,0,.22)
}
html[data-theme="dark"] .generator-intro h1{color:#eef8fc}
html[data-theme="dark"] .generator-intro .eyebrow{color:#66d6c7}
html[data-theme="dark"] .generator-intro p{color:#abc0cc}
html[data-theme="dark"] .item-row textarea.item-description{
    border-color:#365161;
    background:#081923;
    color:#edf7fb;
    caret-color:#66d6c7
}
html[data-theme="dark"] .item-row textarea.item-description:focus{
    border-color:#52bfb1;
    background:#0b202d;
    box-shadow:0 0 0 3px rgba(82,191,177,.16)
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .item-row input,
html[data-theme="dark"] .generator-toolbar select{caret-color:#66d6c7}
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder,
html[data-theme="dark"] .item-row input::placeholder,
html[data-theme="dark"] .item-row textarea::placeholder{color:#829aaa;opacity:1}
html[data-theme="dark"] .editable-label-row input{
    border-bottom-color:#527080!important;
    color:#dcebf2!important;
    caret-color:#66d6c7!important
}
html[data-theme="dark"] .editable-label-row input:focus{border-bottom-color:#66d6c7!important}
html[data-theme="dark"] .editable-label-row small,
html[data-theme="dark"] .signature-placeholder,
html[data-theme="dark"] .logo-placeholder{color:#a9bec9}
html[data-theme="dark"] .signature-placeholder b{background:#173447;color:#77d9ca}
html[data-theme="dark"] .item-amount{color:#e1edf3}
html[data-theme="dark"] .remove-item{color:#b5c5ce}
html[data-theme="dark"] .payment-panel small{color:#9db2be}
html[data-theme="dark"] .optional-panel .remove-option{color:#ff9a9a}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.78}
html[data-theme="dark"] select option{background:#0a1b27;color:#e5f1f7}

/* Tablet header: controls stay visible while navigation moves into one menu. */
@media(max-width:900px){
    .nav-wrap{position:relative;width:calc(100% - 28px);height:68px;gap:10px}
    .brand{margin-right:auto}
    .nav-cta{display:none}
    .theme-switch{order:2;margin-left:0}
    .language-switcher{order:3;margin-left:0}
    .nav-toggle{order:4;width:40px;height:40px;display:grid;place-items:center;margin-left:0;border:1px solid #d4e0e7;border-radius:10px;background:#f5f8fa}
    .nav-toggle span{width:20px;margin:3px}
    .main-nav{position:absolute;z-index:120;top:67px;right:0;left:0;order:5;display:none;margin:0;padding:11px;border:1px solid #d7e3e9;border-radius:0 0 14px 14px;background:#fff;box-shadow:0 18px 38px rgba(15,53,84,.16)}
    .main-nav.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
    .main-nav a{padding:11px 10px!important;border:0!important;border-radius:8px;text-align:center}
    .main-nav a::after{display:none!important}
    .main-nav a.active{background:#edf4f7;color:#123b5d}
    html[data-theme="dark"] .nav-toggle{border-color:#365160;background:#102a3a}
    html[data-theme="dark"] .main-nav{border-color:#294555;background:#0d2331;box-shadow:0 18px 38px rgba(0,0,0,.34)}
    html[data-theme="dark"] .main-nav a.active{background:#17384b;color:#f0f8fc}
}

/* Compact tablet workspace without squeezing fields or preview. */
@media(max-width:820px) and (min-width:701px){
    .generator-main{padding-inline:18px}
    .generator-intro{padding:26px}
    .generator-intro h1{font-size:29px}
    .form-section{padding:20px}
    .items-table-head,.item-row{grid-template-columns:minmax(150px,1fr) 72px 112px 96px 28px;gap:7px}
    .signature-form-grid{grid-template-columns:190px 1fr;gap:18px}
}

/* Phone layout: large touch targets, no browser auto-zoom, full-width paper. */
@media(max-width:700px){
    .generator-main{padding:20px 10px 64px}
    .generator-intro{gap:14px;padding:21px 18px;border-radius:13px}
    .generator-intro h1{margin:7px 0;font-size:clamp(24px,8vw,30px);line-height:1.14}
    .generator-intro p{font-size:12px;line-height:1.65}
    .free-usage{width:100%;min-height:57px;align-items:center}
    .generator-toolbar{gap:13px;padding:15px;border-radius:12px}
    .generator-toolbar label>span{font-size:10px}
    .generator-toolbar select,.color-control{min-height:46px}
    .form-section{padding:18px 15px;border-radius:12px}
    .section-title{align-items:flex-start;margin-bottom:18px}
    .section-title>span{flex:0 0 31px;width:31px;height:31px}
    .section-title h2{font-size:16px;line-height:1.35}
    .section-title p{margin-top:3px;font-size:10px;line-height:1.5}
    .identity-grid,.signature-form-grid{grid-template-columns:1fr;gap:15px}
    .logo-uploader,.signature-uploader{min-height:125px}
    .field>span{font-size:11px}
    .field input,.field textarea,.field select,
    .item-row input,.item-row textarea.item-description,
    .generator-toolbar select{font-size:16px!important}
    .field input,.field select,.item-row input{min-height:46px}
    .field textarea{min-height:108px;padding:12px}
    .address-input-grid textarea{min-height:124px!important}
    .editable-label-row input{min-height:34px!important;font-size:14px!important}
    .item-row{gap:10px;padding:12px}
    .item-row textarea.item-description{min-height:82px}
    .item-row output{min-height:40px;display:flex;align-items:center;padding:8px 4px;margin-top:0;text-align:left}
    .item-row .remove-item{justify-self:end;align-self:center;margin-top:0}
    .money-input,.input-prefix,.suffix-input{min-height:46px}
    .optional-buttons button,.add-item{min-height:46px;font-size:12px}
    .notes-option-buttons,.notes-option-panels{grid-template-columns:1fr}
    .mobile-actions{z-index:20;bottom:8px;gap:8px;margin-top:16px;padding:10px;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(15,53,84,.16)}
    .mobile-actions .btn{min-height:48px;padding-inline:10px;font-size:12px}
    .preview-column{padding:12px 10px 22px}
    .preview-top{position:sticky;z-index:3;top:-12px;padding:10px 2px;background:inherit}
    .preview-top button{width:38px;height:38px;border-radius:9px}
    .paper-wrap{padding:8px;overflow:hidden}
    .document-preview{width:100%;min-width:0!important;padding:18px;font-size:5.8px}
    .preview-origin-meta{gap:22px}
    .preview-bottom{gap:14px}
    html[data-theme="dark"] .mobile-actions{border-color:#365160}
}

@media(max-width:520px){
    .nav-wrap{width:calc(100% - 18px);gap:6px}
    .theme-switch{width:52px;height:34px}
    .language-switcher{padding:4px}
    .language-track{width:66px!important}
    .nav-toggle{width:36px;height:36px}
    .main-nav.open{grid-template-columns:1fr 1fr}
    .generator-toolbar,.form-section{padding-right:13px;padding-left:13px}
    .item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .mobile-actions{grid-template-columns:1fr}
}

@media(max-width:360px){
    .theme-switch{width:48px}
    .language-track{width:62px!important}
    .brand-mark{width:32px;height:32px}
    .generator-main{padding-right:7px;padding-left:7px}
    .document-preview{padding:14px;font-size:5.4px}
}