/* ============================================================ FermaVet — style karty hodowcy (Django + HTMX + Alpine) Ten sam wygląd co w prototypie React. Motyw przełączasz atrybutem data-theme na .fd-root (Alpine). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); .fd-root{ --ink:#14403C;--ink2:#0F2E2B;--accent:#D99A2B;--paper:#E7EAE3;--card:#FCFCF9; --line:#D4D8CF;--muted:#59635C;--text:#1E2724; --green:#2F8457;--amber:#C98A1E;--red:#BC3F2A; background:var(--paper);color:var(--text); font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased; min-height:100vh; } .fd-root[data-theme="grafit"]{--ink:#30343A;--ink2:#202327;--accent:#E0782E;--paper:#ECECEA;--card:#FCFCFB;--line:#D8D8D4;--muted:#5E6167;--text:#24262A;} .fd-root[data-theme="bialy"]{--ink:#1A1A1A;--ink2:#111111;--accent:#2563EB;--paper:#F8F8F8;--card:#FFFFFF;--line:#E4E4E4;--muted:#909090;--text:#1A1A1A;--green:#16A34A;--amber:#D97706;--red:#DC2626;} .fd-root[data-theme="pastel"]{--ink:#4A7C6F;--ink2:#325A50;--accent:#B87FA0;--paper:#F0EDE8;--card:#FDFCF9;--line:#DDD9D0;--muted:#8A8A80;--text:#3A3832;--green:#5A9E6F;--amber:#C49A30;--red:#B84040;} .fd-root[data-theme="orange"]{--ink:#7A3E1A;--ink2:#5C2E10;--accent:#E07830;--paper:#F6EEE0;--card:#FFFCF6;--line:#E8D8BC;--muted:#8A7060;--text:#2A1E10;--green:#4A8A50;--amber:#D08020;--red:#C04030;} /* === MOTYW CIEMNY === */ .fd-root[data-theme="ciemny"]{ --ink:#62C294;--ink2:#3DA870;--accent:#D4922A; --paper:#0C1210;--card:#131A15;--line:#1E2C22; --muted:#5E7A6A;--text:#A8BFAF; --green:#3DA870;--amber:#C98A1E;--red:#C44038; } /* nav i cardhead mają własne ciemne tło (--ink jest tu kolorem tekstu) */ .fd-root[data-theme="ciemny"] .fd-nav{background:#080D09 !important;} .fd-root[data-theme="ciemny"] .fd-cardhead{background:#080D09 !important;} /* przyciski primary — ciemnozielone tło */ .fd-root[data-theme="ciemny"] .fd-btn-primary{background:#1A5C3A;color:#fff;} .fd-root[data-theme="ciemny"] .fd-btn-primary:hover{background:#114A2C;} /* ghost button na ciemnym tle */ .fd-root[data-theme="ciemny"] .fd-btn-ghost{border-color:var(--line);color:var(--ink);} .fd-root[data-theme="ciemny"] .fd-btn-ghost:hover{background:var(--line);} /* pigułki — przezroczyste tła */ .fd-root[data-theme="ciemny"] .fd-pill.green{background:rgba(61,168,112,.14);color:#52C48A;} .fd-root[data-theme="ciemny"] .fd-pill.amber{background:rgba(201,138,30,.14);color:#D4A030;} .fd-root[data-theme="ciemny"] .fd-pill.red{background:rgba(196,64,56,.14);color:#D96058;} .fd-root[data-theme="ciemny"] .fd-pill.muted{background:rgba(94,122,106,.14);color:#7A9A88;} /* alert karencji */ .fd-root[data-theme="ciemny"] .fd-alert{background:#180E0C;border-color:#3A1E18;border-left-color:var(--red);} .fd-root[data-theme="ciemny"] .fd-alert-body{color:#B89090;} .fd-root[data-theme="ciemny"] .fd-alert-body strong{color:#D08878;} /* formularz */ .fd-root[data-theme="ciemny"] .fd-input, .fd-root[data-theme="ciemny"] .fd-select, .fd-root[data-theme="ciemny"] .fd-textarea{background:#0A100C;color:var(--text);border-color:var(--line);} .fd-root[data-theme="ciemny"] .fd-input:focus, .fd-root[data-theme="ciemny"] .fd-select:focus, .fd-root[data-theme="ciemny"] .fd-textarea:focus{background:#0F160F;outline-color:var(--ink);} .fd-root *{box-sizing:border-box;} .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;} .muted{color:var(--muted);} button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .fd-wrap{max-width:1080px;margin:0 auto;padding:28px 26px 60px;} /* nagłówek widoku */ .fd-vhead{margin-bottom:20px;} .fd-vhead h1{font-family:'Space Grotesk';font-size:23px;font-weight:600;margin:0;color:var(--ink);} .fd-vhead p{margin:4px 0 0;font-size:13.5px;color:var(--muted);} /* pasek motywu */ .fd-themebar{display:flex;gap:8px;align-items:center;margin-bottom:18px;} .fd-themebar span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);} .fd-swatch{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;opacity:.6;} .fd-swatch.on{opacity:1;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink);} /* nagłówek karty */ .fd-cardhead{display:flex;gap:24px;flex-wrap:wrap;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:20px;} .fd-ch-eyebrow{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.6);} .fd-ch-h{font-family:'Space Grotesk';font-size:22px;font-weight:600;margin-top:2px;} .fd-ch-facts{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;} .fd-fact-k{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.55);} .fd-fact-v{font-family:Inter,sans-serif;font-size:15px;font-weight:500;margin-top:2px;} /* alert */ .fd-alert{background:#FBEDE6;border:1px solid #E9C4B4;border-left:4px solid var(--red);border-radius:12px;padding:16px 18px;margin-bottom:20px;} .fd-alert-tag{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:6px;} .fd-alert-body{font-size:15px;line-height:1.55;color:#5A3128;} .fd-alert-body strong{color:#7A2A18;} .fd-cta{margin-top:12px;background:var(--red);color:#fff;border:none;padding:8px 15px;border-radius:7px;font-family:Inter;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;} .fd-cta:hover{filter:brightness(.92);} /* karta / sekcja */ .fd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;} .fd-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:10px;} .fd-card-head h3{font-family:'Space Grotesk';font-size:16px;font-weight:600;margin:0;color:var(--ink);} .fd-card-hint{font-size:11px;color:var(--muted);text-align:right;} .fd-mini-h{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;} .fd-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} /* pigułki statusów */ .fd-pill{font-family:'JetBrains Mono';font-size:12px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block;} .fd-pill.green{background:#DFF0E4;color:var(--green);} .fd-pill.amber{background:#F6E9CE;color:var(--amber);} .fd-pill.red{background:#F6DDD5;color:var(--red);} .fd-pill.muted{background:#E7EAE3;color:var(--muted);} /* tabele */ .fd-scrollx{overflow-x:auto;} .fd-table{display:flex;flex-direction:column;min-width:100%;} .fd-tr{display:grid;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px;} .fd-tr:last-child{border-bottom:none;} .fd-th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;} .fd-td-name{font-weight:600;color:var(--ink);} .fd-table.wagi .fd-tr{grid-template-columns:.6fr 1fr 1.1fr 1fr 1fr 1.1fr;} .fd-table.upadki .fd-tr{grid-template-columns:.7fr .5fr .7fr .8fr .7fr .7fr .9fr .7fr .8fr .8fr .8fr;min-width:820px;} .fd-note-line{font-size:13px;color:var(--muted);margin:12px 0 0;font-style:italic;} .fd-prose{font-size:14px;line-height:1.6;color:var(--text);margin:0 0 8px;} .fd-legend-box{display:flex;flex-direction:column;justify-content:center;} /* ulepszenia */ .fd-improve{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .fd-improve-item{background:var(--paper);border-radius:10px;padding:12px 14px;} .fd-improve-h{font-weight:600;font-size:14px;color:var(--ink);margin-bottom:3px;} .fd-improve-t{font-size:13px;color:var(--muted);line-height:1.5;} /* telefon — szybki wpis */ .fd-phone{width:340px;background:var(--ink2);border-radius:32px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.22);} .fd-phone-top{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:8px 12px 12px;font-size:13px;font-weight:600;} .fd-phone-day{font-family:'JetBrains Mono';font-size:12px;color:var(--accent);} .fd-phone-body{background:var(--card);border-radius:22px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;} .fd-step label,.fd-field label{font-size:12.5px;color:var(--muted);font-weight:500;display:block;margin-bottom:6px;} .fd-step-row{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;} .fd-step-row button{background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:22px;color:var(--ink);cursor:pointer;height:52px;} .fd-step-row button:hover{background:var(--line);} .fd-step-row input{text-align:center;font-family:'JetBrains Mono';font-size:22px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:10px;background:var(--paper);width:100%;} .fd-field input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-family:Inter;font-size:15px;color:var(--text);} .fd-phone-sum{background:var(--paper);border-radius:10px;padding:12px;text-align:center;font-size:13.5px;color:var(--text);} .fd-phone-sum strong{color:var(--ink);font-family:'JetBrains Mono';} .fd-phone-save{background:var(--ink);color:#fff;border:none;padding:15px;border-radius:12px;font-family:Inter;font-size:15px;font-weight:600;cursor:pointer;} .fd-phone-save:hover{background:var(--ink2);} /* Kafelek stada */ .fd-flock-stats{display:grid;grid-template-columns:repeat(4,1fr);} .fd-flock-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 8px;border-right:1px solid var(--line);text-align:center;} .fd-flock-stat:last-child{border-right:none;} .fd-flock-stat-val{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;} .fd-flock-stat-val.red{color:var(--red);} .fd-flock-stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:4px;} @media(max-width:900px){ .fd-grid-2,.fd-improve{grid-template-columns:1fr;} .fd-cardhead{gap:14px;} .fd-ch-facts{margin-left:0;gap:16px;} } @media(max-width:520px){ .fd-flock-stat{padding:14px 4px;} .fd-flock-stat-val{font-size:20px;} } /* === Panel admina SaaS === */ .fd-saas-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;} .fd-saas-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin:0;color:var(--ink);} .fd-saas-subtitle{font-size:13px;color:var(--muted);margin-top:2px;} .fd-saas-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:28px;} .fd-saas-stat{padding:16px 18px;text-align:center;} .fd-saas-stat-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;color:var(--ink);} .fd-saas-stat-lbl{font-size:12px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.4px;} /* === Nagłówki sekcji === */ .fd-section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;} .fd-section-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;margin:0;color:var(--ink);} .fd-section-sub{font-size:13px;color:var(--muted);} /* === Listy kart === */ .fd-col-list{display:flex;flex-direction:column;gap:8px;} .fd-col-list-lg{display:flex;flex-direction:column;gap:12px;} .fd-client-row{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;} .fd-client-name{font-weight:600;color:var(--ink);font-size:15px;} .fd-client-meta{font-size:12px;color:var(--muted);margin-top:2px;} /* === Wiersz info pod kartą stada === */ .fd-info-row{display:flex;gap:0;border-top:1px solid var(--line);flex-wrap:wrap;} .fd-info-cell{flex:1;padding:8px 14px;border-right:1px solid var(--line);min-width:100px;} .fd-info-cell:last-child{border-right:none;} .fd-info-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;} .fd-flock-footer{padding:12px 16px;border-top:1px solid var(--line);} /* === Formularze — globalny wzorzec (fd-form-wrap / fd-field-g / fd-label) === Styl obowiązujący dla wszystkich formularzy w FermaPRO. Używaj tego wzorca przy każdym nowym module zamiast tworzyć własny. Zapis:
/