453 lines
31 KiB
CSS
453 lines
31 KiB
CSS
:root{
|
|
--bg:#f7f0e8;
|
|
--surface:#ffffff;
|
|
--surface-alt:#efe1d2;
|
|
--surface-raised:#fffaf5;
|
|
--border:#e2d0bd;
|
|
--ink:#3a332c;
|
|
--ink-soft:#7a6c60;
|
|
--ink-faint:#a89c8f;
|
|
--accent:#b48f8e;
|
|
--accent-ink:#7c5c5a;
|
|
--accent-tint:#e9dad7;
|
|
--gold:#b8975a;
|
|
--ok:#6f8f5c; --ok-tint:#e3ead9;
|
|
--warn:#c08a3e; --warn-tint:#f3e4cd;
|
|
--critical:#b5533f;--critical-tint:#f3ded8;
|
|
--tab-1:#b48f8e; --tab-2:#c98a86; --tab-3:#c4a05a;
|
|
--tab-4:#7f9a6e; --tab-5:#5f97a0; --tab-6:#ba6b4f;
|
|
--tab-7:#9b7fa0; --tab-8:#ad7a5c; --tab-9:#6f7f8c; --tab-10:#5f7a9a;
|
|
--shadow:0 1px 2px rgba(58,41,30,.06),0 6px 18px rgba(58,41,30,.07);
|
|
--radius-s:7px; --radius-m:12px; --radius-l:20px;
|
|
--font-display:'Dancing Script',cursive;
|
|
--font-head:'Montserrat',system-ui,sans-serif;
|
|
--font-body:'Source Sans Pro',system-ui,sans-serif;
|
|
}
|
|
@media (prefers-color-scheme:dark){
|
|
:root:not([data-theme="light"]){
|
|
--bg:#211b17; --surface:#2a2320; --surface-alt:#2e2621;
|
|
--surface-raised:#332a24; --border:#463b32;
|
|
--ink:#f1e6da; --ink-soft:#c8b6a6; --ink-faint:#8f8074;
|
|
--accent:#dfb0ac; --accent-ink:#f1d7d3; --accent-tint:#453431;
|
|
--gold:#d8b978;
|
|
--ok:#96b481; --ok-tint:#33402c;
|
|
--warn:#dcac63; --warn-tint:#453824;
|
|
--critical:#d98871; --critical-tint:#452f2a;
|
|
--tab-1:#d3a6a4; --tab-2:#dba09b; --tab-3:#d4b170;
|
|
--tab-4:#9bb787; --tab-5:#7bb2ba; --tab-6:#d1866a;
|
|
--tab-7:#b598ba; --tab-8:#c2926f; --tab-9:#8b9aa6; --tab-10:#8fa8c4;
|
|
--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.35);
|
|
}
|
|
}
|
|
:root[data-theme="dark"]{
|
|
--bg:#211b17; --surface:#2a2320; --surface-alt:#2e2621;
|
|
--surface-raised:#332a24; --border:#463b32;
|
|
--ink:#f1e6da; --ink-soft:#c8b6a6; --ink-faint:#8f8074;
|
|
--accent:#dfb0ac; --accent-ink:#f1d7d3; --accent-tint:#453431;
|
|
--gold:#d8b978;
|
|
--ok:#96b481; --ok-tint:#33402c;
|
|
--warn:#dcac63; --warn-tint:#453824;
|
|
--critical:#d98871; --critical-tint:#452f2a;
|
|
--tab-1:#d3a6a4; --tab-2:#dba09b; --tab-3:#d4b170;
|
|
--tab-4:#9bb787; --tab-5:#7bb2ba; --tab-6:#d1866a;
|
|
--tab-7:#b598ba; --tab-8:#c2926f; --tab-9:#8b9aa6; --tab-10:#8fa8c4;
|
|
--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.35);
|
|
}
|
|
|
|
*{box-sizing:border-box;}
|
|
/* An element's own `display` rule (author CSS) always wins over the browser's
|
|
default `[hidden]{display:none}` (user-agent CSS), regardless of selector
|
|
specificity — origin beats specificity in the cascade. Several elements here
|
|
toggle visibility via the `hidden` attribute *and* declare their own `display`
|
|
(.modal-overlay, .empty-state), so without this !important safety net they'd
|
|
stay visually active — and, for a `position:fixed` overlay, silently swallow
|
|
every click on the page — even while `hidden` reads true. */
|
|
[hidden]{ display:none !important; }
|
|
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }
|
|
html,body{height:100%;}
|
|
body{
|
|
margin:0; background:var(--bg); color:var(--ink);
|
|
font-family:var(--font-body); font-size:15px; line-height:1.55;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
h1,h2,h3{font-family:var(--font-head); text-wrap:balance; margin:0;}
|
|
button, input, textarea, select{font-family:inherit; color:inherit;}
|
|
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
|
|
::selection{background:var(--accent-tint); color:var(--ink);}
|
|
|
|
.app{ display:grid; grid-template-rows:auto 1fr; height:100vh; }
|
|
|
|
.topbar{
|
|
display:flex; align-items:center; gap:16px; padding:12px 20px;
|
|
background:var(--surface); border-bottom:1px solid var(--border);
|
|
}
|
|
.brandmark{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
|
|
.brand-logo{ height:40px; width:auto; display:block; }
|
|
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--accent-ink); line-height:1; }
|
|
.brand-sub{ font-family:var(--font-head); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
|
|
.view-switch{ display:flex; gap:2px; background:var(--surface-alt); border-radius:99px; padding:3px; flex-shrink:0; }
|
|
.view-switch-btn{ display:flex; align-items:center; gap:6px; border:0; background:transparent; padding:7px 14px; border-radius:99px; font-family:var(--font-head); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
|
|
.view-switch-btn svg{ width:14px; height:14px; }
|
|
.view-switch-btn.active{ background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow); }
|
|
.crumb{ font-family:var(--font-head); font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
|
|
.crumb b{ color:var(--ink); font-weight:600; }
|
|
.topbar-spacer{ flex:1; }
|
|
|
|
.shell{ display:grid; grid-template-columns:272px 1fr; min-height:0; }
|
|
|
|
.directory{
|
|
background:var(--surface-alt); border-right:1px solid var(--border);
|
|
padding:16px 14px; overflow-y:auto; display:flex; flex-direction:column;
|
|
}
|
|
.search{
|
|
display:flex; align-items:center; gap:8px; background:var(--surface);
|
|
border:1px solid var(--border); border-radius:var(--radius-m); padding:9px 12px;
|
|
margin-bottom:10px; color:var(--ink-faint);
|
|
}
|
|
.search input{ border:0; background:transparent; outline:0; width:100%; font-size:13.5px; color:var(--ink); }
|
|
.btn.block{ width:100%; justify-content:center; margin-bottom:16px; }
|
|
.owner-group{ margin-bottom:14px; }
|
|
.owner-name-row{ display:flex; align-items:center; gap:6px; padding:0 8px 6px; }
|
|
.owner-name{
|
|
font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.06em;
|
|
color:var(--ink-faint); text-transform:uppercase; flex:1;
|
|
}
|
|
.add-animal-btn{ background:none; border:0; color:var(--ink-faint); cursor:pointer; padding:2px 4px; border-radius:5px; flex-shrink:0; }
|
|
.add-animal-btn:hover{ color:var(--accent-ink); background:var(--surface); }
|
|
.add-animal-btn.danger:hover{ color:var(--critical); background:var(--critical-tint); }
|
|
.add-animal-btn svg{ width:13px; height:13px; display:block; }
|
|
.animal-row{
|
|
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
|
|
padding:9px 8px; border-radius:var(--radius-m); border:1px solid transparent;
|
|
background:transparent; cursor:pointer; margin-bottom:2px;
|
|
}
|
|
.animal-row:hover{ background:var(--surface); }
|
|
.animal-row.active{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
|
|
.animal-avatar{
|
|
width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
|
|
flex-shrink:0; color:#fff;
|
|
}
|
|
.animal-avatar svg{ width:18px; height:18px; }
|
|
.animal-meta{ min-width:0; }
|
|
.animal-meta .nm{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:4px; }
|
|
.animal-meta .sp{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.animal-row.deceased .animal-avatar{ opacity:.55; }
|
|
.animal-row.deceased .nm{ color:var(--ink-soft); }
|
|
.rip-mark{ width:12px; height:12px; color:var(--ink-faint); flex-shrink:0; }
|
|
.empty-owners{ font-size:12.5px; color:var(--ink-faint); padding:8px; }
|
|
|
|
.main{ overflow-y:auto; padding:22px 28px 60px; }
|
|
.empty-state{
|
|
height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|
gap:14px; color:var(--ink-faint); text-align:center;
|
|
}
|
|
.empty-state svg{ color:var(--ink-faint); }
|
|
.empty-state p{ max-width:280px; font-size:14px; line-height:1.6; }
|
|
|
|
.folder-head{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
|
|
.folder-title{ display:flex; align-items:center; gap:14px; }
|
|
.folder-title .avatar-lg{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
|
|
.folder-title .avatar-lg svg{ width:28px; height:28px; }
|
|
.folder-title h1{ font-size:26px; font-weight:700; }
|
|
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
|
|
.chip{ font-size:11.5px; font-family:var(--font-head); font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); padding:4px 10px; border-radius:99px; display:inline-flex; align-items:center; gap:4px; }
|
|
.chip svg{ width:11px; height:11px; }
|
|
.chip.deceased-chip{ color:var(--ink-faint); background:var(--surface-alt); }
|
|
.owner-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:12px 14px; min-width:220px; box-shadow:var(--shadow); }
|
|
.owner-card .lbl{ font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
|
|
.owner-card .nm{ font-weight:700; font-size:14.5px; margin-bottom:5px; }
|
|
.owner-card .line{ display:flex; gap:7px; align-items:center; font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
|
|
.owner-card .line svg{ width:13px; height:13px; flex-shrink:0; opacity:.7; }
|
|
|
|
.tabstrip{ display:flex; flex-wrap:wrap; gap:3px; border-bottom:1px solid var(--border); margin-bottom:20px; }
|
|
.tab{
|
|
display:flex; align-items:center; gap:7px; padding:10px 13px; border:0; background:transparent;
|
|
font-family:var(--font-head); font-size:12.5px; font-weight:600; color:var(--ink-soft);
|
|
border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; margin-bottom:-1px;
|
|
}
|
|
.tab svg{ width:15px; height:15px; }
|
|
.tab:hover{ color:var(--ink); }
|
|
.tab.active{ color:var(--ink); border-bottom-color:var(--tab-color); }
|
|
|
|
.panel{ display:none; }
|
|
.panel.active{ display:block; }
|
|
|
|
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px; box-shadow:var(--shadow); }
|
|
.card + .card{ margin-top:14px; }
|
|
.card h3{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
|
|
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
|
|
.field .lbl{ font-size:11px; color:var(--ink-faint); margin-bottom:3px; font-family:var(--font-head); font-weight:600; letter-spacing:.03em; }
|
|
.field .val{ font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; padding:4px 6px; margin:-4px -6px; border-radius:6px; cursor:text; }
|
|
.field .val:hover{ background:var(--surface-alt); }
|
|
.field input.edit-val{
|
|
width:100%; font-size:14.5px; font-weight:600; font-family:inherit; border:1px solid var(--accent); border-radius:6px;
|
|
padding:4px 6px; outline:0; background:var(--surface);
|
|
}
|
|
.prose{ font-size:14.5px; line-height:1.7; color:var(--ink); white-space:pre-wrap; }
|
|
.anamnese-box{
|
|
width:100%; min-height:160px; border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px;
|
|
font-family:var(--font-body); font-size:14.5px; line-height:1.7; background:var(--surface); outline:0; resize:vertical;
|
|
}
|
|
.anamnese-box:focus{ border-color:var(--accent); }
|
|
.hint{ font-size:11.5px; color:var(--ink-faint); margin-top:8px; }
|
|
|
|
.anamnese-toggle{ display:flex; align-items:center; justify-content:space-between; }
|
|
.anamnese-toggle p{ margin:0; font-size:12.5px; color:var(--ink-faint); }
|
|
.af-section-grid{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
|
|
.af-section h4{
|
|
font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
|
|
color:var(--accent-ink); background:var(--accent-tint); display:inline-block; padding:4px 10px; border-radius:99px; margin-bottom:12px;
|
|
}
|
|
.af-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
|
|
.af-field{ display:flex; flex-direction:column; gap:4px; }
|
|
.af-field.af-wide{ grid-column:1 / -1; }
|
|
.af-field label{ font-size:11px; font-family:var(--font-head); font-weight:600; color:var(--ink-soft); }
|
|
.af-field input[type=text]{ border:1px solid var(--border); border-radius:var(--radius-s); padding:7px 9px; font-size:13px; background:var(--surface); outline:0; }
|
|
.af-field input[type=text]:focus{ border-color:var(--accent); }
|
|
.af-field textarea{ border:1px solid var(--border); border-radius:var(--radius-s); padding:8px 9px; font-size:13px; background:var(--surface); outline:0; min-height:56px; resize:vertical; font-family:inherit; }
|
|
.af-field textarea:focus{ border-color:var(--accent); }
|
|
.af-options{ display:flex; flex-wrap:wrap; gap:6px 14px; padding-top:2px; }
|
|
.af-opt{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink); cursor:pointer; }
|
|
.af-opt input{ accent-color:var(--accent); }
|
|
.af-pairs{ display:flex; flex-direction:column; gap:6px; }
|
|
.af-pair{ display:flex; align-items:center; gap:14px; font-size:12.5px; }
|
|
.af-pair .af-opt{ min-width:110px; }
|
|
|
|
.consent-list{ display:flex; flex-direction:column; gap:0; margin-top:4px; }
|
|
.consent-item{ display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--border); align-items:flex-start; }
|
|
.consent-item:first-child{ border-top:0; }
|
|
.consent-item input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
|
|
.consent-item span{ font-size:13px; line-height:1.5; }
|
|
|
|
.btn{
|
|
font-family:var(--font-head); font-size:12.5px; font-weight:600; padding:8px 14px;
|
|
border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface);
|
|
cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:var(--ink);
|
|
}
|
|
.btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
|
|
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
|
|
.btn.primary:hover{ filter:brightness(1.05); color:#fff; }
|
|
.btn.danger{ background:var(--critical); border-color:var(--critical); color:#fff; }
|
|
.btn.danger:hover{ filter:brightness(1.05); color:#fff; }
|
|
.btn.ghost{ background:transparent; border-color:transparent; }
|
|
.btn svg{ width:14px; height:14px; }
|
|
|
|
.note-composer{ display:flex; gap:8px; margin-bottom:14px; }
|
|
.note-composer input{ flex:1; border:1px solid var(--border); border-radius:var(--radius-s); padding:9px 12px; background:var(--surface); font-size:13.5px; outline:0; }
|
|
.note{ display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--border); }
|
|
.note:first-child{ border-top:0; }
|
|
.note .date{ font-family:var(--font-head); font-size:11px; color:var(--ink-faint); width:78px; flex-shrink:0; padding-top:1px; font-variant-numeric:tabular-nums; }
|
|
|
|
.timeline{ position:relative; padding-left:22px; }
|
|
.timeline::before{ content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--border); }
|
|
.tl-item{ position:relative; padding-bottom:18px; }
|
|
.tl-item:last-child{ padding-bottom:0; }
|
|
.tl-item::before{ content:""; position:absolute; left:-22px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--tab-5); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border); }
|
|
.tl-item .date{ font-family:var(--font-head); font-size:11px; font-weight:700; color:var(--ink-faint); letter-spacing:.03em; }
|
|
.tl-item h4{ font-size:14px; margin:2px 0 3px; }
|
|
.tl-item p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
|
|
.composer-2{ display:grid; grid-template-columns:1fr 2fr auto; gap:8px; margin-bottom:16px; }
|
|
.composer-2 input{ border:1px solid var(--border); border-radius:var(--radius-s); padding:9px 12px; background:var(--surface); font-size:13.5px; outline:0; }
|
|
|
|
.lab-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
|
|
.lab-table th{ text-align:left; font-family:var(--font-head); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--border); }
|
|
.lab-table td{ padding:8px 8px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
|
|
.lab-add-row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-top:10px; }
|
|
.lab-add-row input{ border:1px solid var(--border); border-radius:var(--radius-s); padding:7px 9px; background:var(--surface); font-size:12.5px; outline:0; }
|
|
.card-head-row{ display:flex; align-items:center; justify-content:space-between; }
|
|
.card-head-row .btn{ padding:5px 9px; font-size:11px; }
|
|
|
|
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
|
|
.photo-tile{ aspect-ratio:1; border-radius:var(--radius-s); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); overflow:hidden; background:var(--surface-alt); position:relative; }
|
|
.photo-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
|
|
.photo-tile .fn{ position:absolute; bottom:0; left:0; right:0; font-size:9.5px; background:rgba(0,0,0,.45); color:#fff; padding:3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.photo-tile svg{ width:26px; height:26px; }
|
|
.photo-tile.add{ background:var(--surface-alt); border-style:dashed; cursor:pointer; flex-direction:column; gap:6px; font-size:11px; font-family:var(--font-head); font-weight:600; }
|
|
.photo-tile.add:hover{ border-color:var(--accent); color:var(--accent-ink); }
|
|
|
|
.doc-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid var(--border); }
|
|
.doc-row:first-child{ border-top:0; }
|
|
.doc-icon{ width:34px; height:34px; border-radius:8px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-soft); }
|
|
.doc-icon svg{ width:16px; height:16px; }
|
|
.doc-name{ font-weight:600; font-size:13.5px; }
|
|
.doc-meta{ font-size:11.5px; color:var(--ink-faint); }
|
|
.doc-row .btn{ margin-left:auto; }
|
|
.dropzone{ border:1.5px dashed var(--border); border-radius:var(--radius-m); padding:22px; text-align:center; color:var(--ink-faint); font-size:13px; margin-bottom:14px; background:var(--surface-alt); cursor:pointer; }
|
|
.dropzone:hover{ border-color:var(--accent); color:var(--accent-ink); }
|
|
.dropzone b{ color:var(--accent-ink); font-weight:600; }
|
|
|
|
.consent-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
|
|
.consent-row:first-child{ border-top:0; }
|
|
.consent-row .t{ font-weight:600; font-size:13.5px; }
|
|
.consent-row .d{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
|
|
.badge-ok{ display:flex; align-items:center; gap:5px; font-family:var(--font-head); font-size:11.5px; font-weight:700; color:var(--ok); background:var(--ok-tint); padding:5px 10px; border-radius:99px; white-space:nowrap; border:0; cursor:pointer; }
|
|
.badge-off{ display:flex; align-items:center; gap:5px; font-family:var(--font-head); font-size:11.5px; font-weight:700; color:var(--ink-faint); background:var(--surface-alt); padding:5px 10px; border-radius:99px; white-space:nowrap; border:0; cursor:pointer; }
|
|
.badge-ok svg, .badge-off svg{ width:12px; height:12px; }
|
|
.sig-box{ border:1px solid var(--border); border-radius:var(--radius-s); padding:6px; margin-top:10px; background:var(--surface-alt); }
|
|
.sig-box img{ width:100%; display:block; max-height:90px; object-fit:contain; }
|
|
.sig-pad-wrap{ margin-top:10px; }
|
|
.sig-pad{ width:100%; height:160px; border:1px solid var(--border); border-radius:var(--radius-s); background:#fff; touch-action:none; cursor:crosshair; }
|
|
.sig-actions{ display:flex; gap:8px; margin-top:8px; }
|
|
|
|
.bm-layout{ display:grid; grid-template-columns:1fr 260px; gap:18px; align-items:start; }
|
|
.bm-hint{ font-size:12.5px; color:var(--ink-faint); margin-bottom:10px; }
|
|
.bm-stage{ position:relative; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-m); aspect-ratio:16/10.5; cursor:crosshair; overflow:hidden; }
|
|
.bm-stage svg.silhouette{ position:absolute; inset:0; width:100%; height:100%; }
|
|
.bm-stage img.silhouette{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
|
|
.bm-pin{ position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; }
|
|
.bm-pin span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:rotate(45deg); font-family:var(--font-head); font-size:9px; font-weight:800; color:#fff; }
|
|
.bm-pop{ position:absolute; width:248px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:11px; z-index:10; }
|
|
.bm-pop textarea{ width:100%; border:1px solid var(--border); border-radius:var(--radius-s); padding:7px 9px; font-size:12.5px; resize:none; height:52px; outline:0; background:var(--surface); margin-bottom:8px; }
|
|
.sev-row{ display:flex; gap:5px; margin-bottom:9px; }
|
|
.sev-btn{ flex:1; font-size:10.5px; font-family:var(--font-head); font-weight:700; padding:6px 4px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; color:var(--ink-soft); }
|
|
.sev-btn.sel-ok{ border-color:var(--ok); background:var(--ok-tint); color:var(--ok); }
|
|
.sev-btn.sel-warn{ border-color:var(--warn); background:var(--warn-tint); color:var(--warn); }
|
|
.sev-btn.sel-critical{ border-color:var(--critical); background:var(--critical-tint); color:var(--critical); }
|
|
|
|
.quicktype-row{ display:flex; flex-wrap:wrap; gap:7px; }
|
|
.quicktype-chip{ font-family:var(--font-head); font-size:12px; font-weight:600; padding:7px 14px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:border-color .12s, color .12s, background .12s; }
|
|
.quicktype-chip:hover{ border-color:var(--accent); color:var(--accent-ink); }
|
|
.quicktype-chip.active{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); }
|
|
|
|
/* Toggle-chip checkbox (Ernährungsplan Tage/Tageszeiten) — same visual language as
|
|
.quicktype-chip but backed by a real (visually hidden) checkbox input. */
|
|
.chip-check{ position:relative; display:inline-flex; }
|
|
.chip-check input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
|
|
.chip-check span{ font-family:var(--font-head); font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink-soft); white-space:nowrap; pointer-events:none; transition:border-color .12s, color .12s, background .12s; }
|
|
.chip-check:has(input:checked) span{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); }
|
|
|
|
.fp-row{ border:1px solid var(--border); border-radius:var(--radius-m); padding:13px 14px; margin-bottom:10px; background:var(--surface-alt); }
|
|
.fp-row-head{ display:flex; gap:8px; margin-bottom:12px; }
|
|
.fp-row-head input{ flex:1; border:1px solid var(--border); border-radius:var(--radius-s); padding:8px 10px; font-size:13px; background:var(--surface); outline:0; }
|
|
.fp-row-head input:focus{ border-color:var(--accent); }
|
|
.fp-row-remove{ flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface); color:var(--ink-soft); cursor:pointer; }
|
|
.fp-row-remove svg{ width:15px; height:15px; }
|
|
.fp-row-remove:hover{ border-color:var(--critical); color:var(--critical); }
|
|
.fp-row-grid{ display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-start; }
|
|
.fp-field{ display:flex; flex-direction:column; gap:6px; }
|
|
.fp-field .lbl{ font-size:10.5px; font-family:var(--font-head); font-weight:600; color:var(--ink-faint); letter-spacing:.03em; }
|
|
.fp-field .chips{ display:flex; flex-wrap:wrap; gap:5px; }
|
|
.fp-field .fp-menge{ width:120px; border:1px solid var(--border); border-radius:var(--radius-s); padding:7px 9px; font-size:12.5px; background:var(--surface); outline:0; }
|
|
.fp-field .fp-menge:focus{ border-color:var(--accent); }
|
|
.bm-pop-actions{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
|
|
.bm-pop-actions .btn.danger{ margin-right:auto; }
|
|
.bm-pop-actions .btn{ padding:6px 11px; font-size:11.5px; white-space:nowrap; }
|
|
.finding-list h3{ margin-bottom:10px; }
|
|
.finding{ display:flex; gap:9px; padding:9px 0; border-top:1px solid var(--border); align-items:flex-start; }
|
|
.finding:first-child{ border-top:0; }
|
|
.finding .sw{ width:10px; height:10px; border-radius:50%; margin-top:4px; flex-shrink:0; }
|
|
.finding .tx{ font-size:12.5px; line-height:1.45; }
|
|
.finding .rm{ margin-left:auto; background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px; flex-shrink:0; }
|
|
.finding .rm:hover{ color:var(--critical); }
|
|
|
|
.modal-overlay{ position:fixed; inset:0; background:rgba(33,27,23,.42); display:flex; align-items:center; justify-content:center; z-index:100; }
|
|
.modal-card{ width:380px; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--surface); border-radius:var(--radius-l); border:1px solid var(--border); box-shadow:var(--shadow); padding:22px; }
|
|
.modal-card h2{ font-size:17px; margin-bottom:16px; }
|
|
.modal-field{ margin-bottom:12px; }
|
|
.modal-field .lbl{ font-size:11px; font-family:var(--font-head); font-weight:600; color:var(--ink-faint); letter-spacing:.03em; margin-bottom:4px; display:block; }
|
|
.modal-field input, .modal-field select{ width:100%; border:1px solid var(--border); border-radius:var(--radius-s); padding:9px 11px; font-size:13.5px; outline:0; background:var(--surface); }
|
|
.modal-field input:focus, .modal-field select:focus{ border-color:var(--accent); }
|
|
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
|
|
.modal-card.wide{ width:460px; }
|
|
.modal-card.xwide{ width:640px; }
|
|
.settings-tabstrip{ display:flex; gap:3px; border-bottom:1px solid var(--border); margin-bottom:18px; }
|
|
.settings-panel{ display:none; }
|
|
.settings-panel.active{ display:block; }
|
|
.backup-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
|
|
.backup-row:last-child{ border-bottom:0; }
|
|
.backup-row .d{ font-size:13px; }
|
|
.backup-row .d small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:1px; }
|
|
.modal-field .modal-hint{ font-size:11px; color:var(--ink-faint); margin-top:6px; }
|
|
.modal-field label.check-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink); cursor:pointer; }
|
|
.modal-field label.check-row input{ width:auto; accent-color:var(--accent); }
|
|
.modal-status{ font-size:12px; border-radius:var(--radius-s); padding:8px 10px; margin-top:10px; }
|
|
.modal-status.ok{ background:var(--ok-tint); color:var(--ok); }
|
|
.modal-status.error{ background:var(--critical-tint); color:var(--critical); }
|
|
|
|
.icon-btn{ padding:8px; }
|
|
.icon-btn svg{ width:17px; height:17px; }
|
|
|
|
.contract-text{ max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-s); padding:14px 16px; background:var(--surface-alt); font-size:12.5px; line-height:1.65; }
|
|
.contract-text h4{ font-family:var(--font-head); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--accent-ink); margin:14px 0 4px; }
|
|
.contract-text h4:first-child{ margin-top:0; }
|
|
.contract-text p{ margin:0 0 8px; }
|
|
.confirm-row{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
|
|
.confirm-row input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
|
|
.confirm-row span{ font-size:12.5px; line-height:1.5; }
|
|
|
|
.email-status{ font-size:12px; border-radius:var(--radius-s); padding:8px 11px; margin-top:10px; }
|
|
.email-status.ok{ background:var(--ok-tint); color:var(--ok); }
|
|
.email-status.error{ background:var(--critical-tint); color:var(--critical); }
|
|
.email-status.pending{ background:var(--surface-alt); color:var(--ink-faint); }
|
|
|
|
.cal-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
|
|
.cal-head h1{ font-size:24px; font-weight:700; min-width:220px; }
|
|
.cal-nav{ display:flex; align-items:center; gap:4px; }
|
|
.cal-nav-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); cursor:pointer; color:var(--ink-soft); }
|
|
.cal-nav-btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
|
|
.cal-nav-btn svg{ width:15px; height:15px; }
|
|
.cal-head-spacer{ flex:1; }
|
|
|
|
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
|
|
.cal-dow{ font-family:var(--font-head); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding-bottom:4px; }
|
|
.cal-day{
|
|
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
|
|
min-height:104px; padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
|
|
}
|
|
.cal-day:hover{ border-color:var(--accent); }
|
|
.cal-day.other-month{ background:var(--surface-alt); opacity:.55; }
|
|
.cal-day.today{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
|
|
.cal-day-num{ font-family:var(--font-head); font-size:12px; font-weight:700; color:var(--ink-soft); }
|
|
.cal-day.today .cal-day-num{ color:var(--accent-ink); }
|
|
.cal-appt{
|
|
font-size:10.5px; font-family:var(--font-head); font-weight:600; padding:3px 6px; border-radius:6px;
|
|
background:var(--accent-tint); color:var(--accent-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
|
cursor:pointer;
|
|
}
|
|
.cal-appt:hover{ filter:brightness(.97); }
|
|
.cal-appt-more{ font-size:10px; color:var(--ink-faint); font-family:var(--font-head); font-weight:600; padding:0 6px; }
|
|
|
|
.agenda-card{ margin-top:20px; }
|
|
.agenda-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); cursor:pointer; }
|
|
.agenda-item:first-child{ border-top:0; }
|
|
.agenda-item:hover .agenda-title{ color:var(--accent-ink); }
|
|
.agenda-date{ font-family:var(--font-head); font-size:11px; color:var(--ink-faint); width:100px; flex-shrink:0; line-height:1.4; font-variant-numeric:tabular-nums; }
|
|
.agenda-title{ font-weight:600; font-size:13.5px; }
|
|
.agenda-sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
|
|
|
|
@media (max-width:880px){
|
|
.shell{ grid-template-columns:1fr; }
|
|
.bm-layout{ grid-template-columns:1fr; }
|
|
|
|
/* Master/detail on narrow screens: show either the Besitzer/Tier-Liste or the
|
|
geöffnete Mappe, never a half-hidden mix of both — body[data-view] + .has-animal
|
|
are kept up to date in app.js (switchView/renderFolder/back button). */
|
|
body[data-view="patients"]:not(.has-animal) .main{ display:none; }
|
|
body[data-view="patients"].has-animal .directory{ display:none; }
|
|
body[data-view="calendar"] .directory,
|
|
body[data-view="remedies"] .directory{ display:none; }
|
|
|
|
#mobile-back-btn{ display:none; }
|
|
body[data-view="patients"].has-animal #mobile-back-btn{ display:flex; }
|
|
|
|
.topbar{ flex-wrap:wrap; row-gap:8px; padding:10px 14px; }
|
|
.brand-sub{ display:none; }
|
|
.view-switch-btn{ padding:6px 9px; font-size:11px; }
|
|
.crumb{ font-size:12px; }
|
|
.crumb span{ display:none; } /* keep just the animal name (the <b>) on narrow screens */
|
|
|
|
.tabstrip{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
|
.tab{ flex-shrink:0; }
|
|
|
|
.grid-2{ grid-template-columns:1fr; }
|
|
.af-grid{ grid-template-columns:1fr; }
|
|
.composer-2{ grid-template-columns:1fr; }
|
|
.lab-add-row{ grid-template-columns:1fr; }
|
|
.folder-head{ flex-direction:column; }
|
|
.owner-card{ min-width:0; width:100%; }
|
|
|
|
.settings-tabstrip{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
|
|
|
body{ overflow-x:hidden; }
|
|
}
|