/* AgriGear cloud UI — design system (§4.1 CLAUDE.md). Παλέτα εξαγμένη από Assets/agrigear.svg (leaf #0DA027, gear #C4643B). Τα 9 σημασιολογικά κλειδιά του WPF (Themes/Light.xaml & Dark.xaml) μένουν ΑΜΕΤΑΒΛΗΤΑ ως CSS variables· από αυτά παράγονται βοηθητικά tokens (soft tints, σκιές, focus ring). Εναλλαγή θέματος με [data-theme="dark"] στο . */ :root { /* — Σημασιολογικά κλειδιά §4.1 (σταθερά) — */ --brand-primary: #0DA027; --brand-primary-hover: #0B8821; --brand-secondary: #C4643B; --brand-accent: #E07E48; --app-background: #F5F7F3; --app-surface: #FFFFFF; --text-primary: #1A211B; --text-secondary: #5E6B5F; --app-border: #E1E7E0; /* — Παράγωγα tokens — */ --surface-2: #F8FAF7; /* κεφαλίδες πινάκων, wells */ --brand-primary-soft: #E5F5E8; /* tinted φόντα (pills, hover, ενεργό nav) */ --brand-secondary-soft: #F9EAE2; --row-hover: rgba(13, 160, 39, 0.06); --ring: rgba(13, 160, 39, 0.30); /* focus ring */ --backdrop: rgba(20, 26, 20, 0.45); --shadow-s: 0 1px 2px rgba(18, 26, 18, 0.06); --shadow-m: 0 6px 24px rgba(18, 26, 18, 0.10); --radius-m: 8px; /* RadiusM §4.1 */ --radius-l: 12px; --radius-pill: 999px; --sidebar-width: 248px; --topbar-height: 54px; --footer-height: 34px; --transition: 150ms ease; } html[data-theme="dark"] { --brand-primary: #3CB85A; --brand-primary-hover: #4CC468; --brand-secondary: #D8794F; --brand-accent: #E89461; --app-background: #121512; --app-surface: #1A1F1A; --text-primary: #ECEFEC; --text-secondary: #A6B0A6; --app-border: #2B322B; --surface-2: #20261F; --brand-primary-soft: #1B3320; --brand-secondary-soft: #382318; --row-hover: rgba(60, 184, 90, 0.10); --ring: rgba(60, 184, 90, 0.38); --backdrop: rgba(0, 0, 0, 0.55); --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-m: 0 8px 28px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.45; background: var(--app-background); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--brand-primary-hover); } ::selection { background: var(--brand-primary-soft); } /* Λεπτές, θεματικές μπάρες κύλισης */ * { scrollbar-width: thin; scrollbar-color: var(--app-border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* Ενιαία ένδειξη εστίασης (πληκτρολόγιο) — ΜΟΝΟ σε διαδραστικά στοιχεία. (Το FocusOnNavigate του Blazor εστιάζει το h1 σε κάθε πλοήγηση — οι τίτλοι δεν πρέπει να δείχνουν ring.) */ :is(a, button, input, select, textarea, summary, [role="button"]):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } h1:focus, h1:focus-visible { outline: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- Τυπογραφία (§4.1) --- */ .page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 4px; } .page-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 22px; } /* full width → λιγότερες γραμμές */ /* --- App shell --- */ .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .app-body { display: flex; flex: 1; min-height: 0; } .sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--app-surface); border-right: 1px solid var(--app-border); display: flex; flex-direction: column; overflow-y: auto; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--app-border); margin-bottom: 6px; } .sidebar-brand img { width: 34px; height: 34px; flex: 0 0 34px; } .sidebar-brand .brand-text { min-width: 0; } .sidebar-brand .brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .sidebar-brand .brand-sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-secondary); letter-spacing: 0.02em; } /* Σύμπτυξη πλαϊνού μενού (desktop): πλήρες πλάτος ↔ μόνο logo + εικονίδια nav. */ .collapse-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: auto; flex: 0 0 30px; border: none; border-radius: var(--radius-m); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition); } .collapse-button:hover { background: var(--row-hover); color: var(--text-primary); } @media (min-width: 961px) { .app.sidebar-collapsed .sidebar { width: 64px; flex-basis: 64px; overflow-x: hidden; } .app.sidebar-collapsed .sidebar-brand { flex-direction: column; gap: 10px; padding: 14px 8px 12px; } .app.sidebar-collapsed .brand-text { display: none; } .app.sidebar-collapsed .collapse-button { margin-left: 0; } .app.sidebar-collapsed .nav-list { padding: 6px 8px; } .app.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 8px; } .app.sidebar-collapsed .nav-label { display: none; } .app.sidebar-collapsed .sidebar-tools { padding: 0 8px 4px; } .app.sidebar-collapsed .theme-toggle { justify-content: center; gap: 0; padding: 8px; } .app.sidebar-collapsed .dev-mode { display: none; } .app.sidebar-collapsed .user-block { justify-content: center; padding: 12px 8px; } .app.sidebar-collapsed .user-meta, .app.sidebar-collapsed .logout-link { display: none; } } /* Flex στήλη ώστε το .master-detail να απλώνεται στο διαθέσιμο ύψος (σταθερό ύψος σελίδας, χωρίς κατακόρυφη μπάρα σελίδας — λίστα & κάρτα κυλούν εσωτερικά)· οι υπόλοιπες σελίδες κυλούν κανονικά. */ .content { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px 34px; display: flex; flex-direction: column; } .content > * { flex: 0 0 auto; } /* --- Topbar (mobile shell) — κρυφό σε desktop --- */ .topbar { display: none; align-items: center; gap: 10px; height: var(--topbar-height); padding: 0 12px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); } .topbar img { width: 26px; height: 26px; } .topbar .topbar-title { font-weight: 700; font-size: 15px; } .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: var(--radius-m); background: transparent; color: var(--text-primary); cursor: pointer; } .menu-button:hover { background: var(--app-border); } .sidebar-backdrop { display: none; } /* --- Nav (§4.1: radius 8, hover → tint, επιλεγμένο → brand primary + λευκό) --- */ .nav-list { list-style: none; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-m); color: var(--text-primary); cursor: pointer; font-weight: 450; white-space: nowrap; transition: background var(--transition), color var(--transition); } .nav-item:hover { background: var(--row-hover); color: var(--text-primary); } .nav-item.active { background: var(--brand-primary); color: #FFFFFF; font-weight: 600; box-shadow: var(--shadow-s); } .nav-item .nav-icon { width: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; } .nav-icon svg { display: block; } /* --- Dev mode badge (DevModeBadge — ΜΟΝΟ dev, χωρίς OIDC) --- */ .dev-mode { padding: 0 10px 6px; } .dev-badge { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 1px dashed var(--brand-secondary); border-radius: var(--radius-pill); background: var(--brand-secondary-soft); color: var(--brand-secondary); font-size: 12px; font-weight: 700; font-family: inherit; letter-spacing: 0.04em; cursor: pointer; text-align: left; transition: filter var(--transition); } .dev-badge:hover { filter: brightness(0.96); } .dev-badge .dev-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--brand-secondary); animation: dev-pulse 2s ease-in-out infinite; } .dev-badge .dev-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes dev-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .dev-badge .dev-dot { animation: none; } } .dev-panel { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: var(--radius-m); background: var(--app-surface); box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; } .dev-panel .form-field label { font-size: 11.5px; } .dev-apply { align-self: flex-start; padding: 5px 14px; font-size: 12.5px; } .dev-chip { margin-left: auto; padding: 2px 10px; border: 1px dashed var(--brand-secondary); border-radius: var(--radius-pill); background: var(--brand-secondary-soft); color: var(--brand-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } /* --- Θέμα toggle — ίδια γεωμετρία με nav-item --- */ .sidebar-tools { padding: 0 10px 4px; } .theme-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: none; border-radius: var(--radius-m); background: transparent; color: var(--text-secondary); font-size: 13.5px; font-family: inherit; cursor: pointer; text-align: left; transition: background var(--transition), color var(--transition); } .theme-toggle:hover { background: var(--row-hover); color: var(--text-primary); } .theme-toggle .nav-icon { width: 20px; flex: 0 0 20px; display: inline-flex; justify-content: center; } /* --- User block --- */ .nav-spacer { flex: 1; } .user-block { border-top: 1px solid var(--app-border); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: 0 0 34px; box-shadow: var(--shadow-s); } .user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .user-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-tenant { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-m); color: var(--text-secondary); transition: background var(--transition), color var(--transition); } .logout-link:hover { background: var(--brand-secondary-soft); color: var(--brand-secondary); } /* --- Footer (status bar) --- */ .footer { min-height: var(--footer-height); background: var(--app-surface); border-top: 1px solid var(--app-border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 18px; font-size: 11px; color: var(--text-secondary); } .footer .center { color: var(--text-primary); font-weight: 500; text-align: center; } .footer .right { text-align: right; } /* --- Κάρτες --- */ .card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-l); padding: 20px 22px; box-shadow: var(--shadow-s); } .card > h3:first-child { margin-top: 0; font-size: 15px; letter-spacing: -0.01em; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } /* --- Starting page σύνδεσης (/login) --- */ .login-hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 480px at 15% -10%, var(--brand-primary-soft), transparent 60%), radial-gradient(700px 420px at 110% 110%, var(--brand-secondary-soft), transparent 55%), var(--app-background); padding: 24px; } .login-card { background: var(--app-surface); border: 1px solid var(--app-border); border-top: 4px solid var(--brand-primary); border-radius: var(--radius-l); max-width: 560px; width: 100%; padding: 42px 46px 24px; text-align: center; box-shadow: var(--shadow-m); } .login-logo { width: 96px; height: 96px; margin-bottom: 14px; } .login-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 6px; } .login-tagline { font-size: 14px; font-weight: 500; color: var(--text-primary); margin: 0 0 12px; } .login-description { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 26px; } .login-button { padding: 11px 46px; font-size: 15px; } .login-hint { font-size: 12px; color: var(--text-secondary); margin: 16px 0 0; } .login-footer { font-size: 11px; color: var(--text-secondary); border-top: 1px solid var(--app-border); margin: 26px -46px 0; padding: 13px 46px 0; } /* --- Πίνακας ελέγχου: stat tiles --- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; } .stat-tile { display: flex; flex-direction: column; gap: 2px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-l); padding: 16px 18px; color: var(--text-primary); box-shadow: var(--shadow-s); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .stat-tile:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-m); transform: translateY(-1px); color: var(--text-primary); } .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-primary); font-variant-numeric: tabular-nums; } .stat-label { font-size: 12px; color: var(--text-secondary); } /* --- Status pills (soft tints) --- */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; line-height: 1.5; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--app-border); white-space: nowrap; } .status-pill.ok { background: var(--brand-primary-soft); color: var(--brand-primary); border-color: transparent; } .status-pill.warn { background: var(--brand-secondary-soft); color: var(--brand-secondary); border-color: transparent; } /* --- Κουμπιά --- Κοινά traits + ΡΗΤΟ χρώμα κειμένου σε ΟΛΕΣ τις καταστάσεις: τα κουμπιά αποδίδονται και ως (PDF links, /signin) και το γενικό a:hover άλλαζε το χρώμα → «εξαφανιζόμενο» κείμενο σε hover. */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 16px; border-radius: var(--radius-m); font-size: 13.5px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; text-decoration: none; } .btn-primary { background: var(--brand-primary); border: 1px solid transparent; box-shadow: var(--shadow-s); } .btn-primary:hover:not(:disabled) { background: var(--brand-primary-hover); } .btn-primary:active:not(:disabled) { transform: translateY(0.5px); } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { color: var(--text-primary); text-decoration: none; } .btn-secondary { background: var(--app-surface); border: 1px solid var(--app-border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-secondary); } .btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: default; } .btn-danger, .btn-danger:hover { color: var(--brand-secondary); } .btn-danger:hover:not(:disabled) { background: var(--brand-secondary-soft); border-color: var(--brand-secondary); } /* Icon-only κουμπί (π.χ. επιστροφή στην προέλευση — το κείμενο ζει στο title/tooltip) */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; min-height: 34px; line-height: 0; } /* --- Toolbar (αναζήτηση/φίλτρα πάνω από τις λίστες) --- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .input { min-width: 260px; } /* --- Πεδία εισαγωγής (ενιαία: toolbar + φόρμες + inline σειρές picker) --- */ .toolbar .input, .toolbar select, .form-field input:not([type="checkbox"]), .form-field select, .form-field textarea, .row-inline input:not([type="checkbox"]) { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-m); color: var(--text-primary); min-height: 34px; padding: 6px 12px; font-size: 13.5px; font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); } .toolbar .input:focus, .toolbar select:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus, .row-inline input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--ring); } .toolbar .input::placeholder, .form-field input::placeholder, .row-inline input::placeholder { color: var(--text-secondary); opacity: 0.8; } /* Custom βέλος στα select (ενιαία εμφάνιση με τα inputs) */ .toolbar select, .form-field select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } html[data-theme="dark"] .toolbar select, html[data-theme="dark"] .form-field select { background-image: url("data:image/svg+xml;utf8,"); } /* Checkboxes στο χρώμα του brand */ input[type="checkbox"] { accent-color: var(--brand-primary); width: 15px; height: 15px; } /* Επιλογή αρχείου (ψηφιοποίηση) — themed αντί για το γυμνό native control */ input[type="file"] { width: 100%; padding: 8px; border: 1px dashed var(--app-border); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color var(--transition), background var(--transition); } input[type="file"]:hover { border-color: var(--brand-primary); } input[type="file"]:disabled { opacity: 0.55; cursor: default; } input[type="file"]::file-selector-button { margin-right: 12px; min-height: 30px; padding: 5px 14px; border: 1px solid transparent; border-radius: var(--radius-m); background: var(--brand-primary); color: #fff; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--transition); } input[type="file"]::file-selector-button:hover { background: var(--brand-primary-hover); } /* --- Master-detail (λίστα + κάρτα, όπως το desktop) --- Καταλαμβάνει ΟΛΟ το υπόλοιπο ύψος του .content (flex: 1 + minmax(0,1fr) γραμμή)· λίστα και κάρτα κυλούν εσωτερικά, ώστε η σελίδα να μη χρειάζεται δική της κατακόρυφη μπάρα. */ .master-detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); } .list-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-l); overflow: auto; /* κατακόρυφη κύλιση λίστας + οριζόντια για φαρδιούς πίνακες */ display: flex; flex-direction: column; box-shadow: var(--shadow-s); } .list-panel .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); background: var(--surface-2); border-bottom: 1px solid var(--app-border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .data-table td { padding: 9px 14px; border-bottom: 1px solid var(--app-border); } .data-table tbody tr { cursor: pointer; transition: background var(--transition); } .data-table tbody tr:hover { background: var(--row-hover); } .data-table tbody tr.selected { background: var(--brand-primary); color: #fff; } .data-table tbody tr.selected .status-pill { background: rgba(255,255,255,0.22); color: #fff; border-color: transparent; } .data-table tbody tr:last-child td { border-bottom: none; } .paginator { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--app-border); background: var(--surface-2); position: sticky; bottom: 0; /* πάντα ορατός όσο κυλά η λίστα */ margin-top: auto; /* σε κοντές λίστες κάθεται στο κάτω άκρο του panel */ z-index: 1; } .paginator-info { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* --- Κάρτα λεπτομερειών --- */ .detail-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-l); padding: 20px 22px; overflow-y: auto; /* το ύψος δίνεται από τη γραμμή του master-detail grid */ box-shadow: var(--shadow-s); } .detail-panel.static { max-height: none; } .detail-title { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 2px; } .detail-subtitle { font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; } .detail-section { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--app-border); } .detail-section::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--brand-primary); flex: 0 0 3px; } .detail-section:first-of-type { margin-top: 8px; } .field { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 3.5px 0; font-size: 13px; } .field-label { color: var(--text-secondary); } .field-value { color: var(--text-primary); overflow-wrap: anywhere; } .detail-empty { color: var(--text-secondary); font-size: 13px; padding: 28px 8px; text-align: center; } .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; } /* --- Φόρμες create/edit --- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 10px 0; } .form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .form-field label { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); } .form-span2 { grid-column: 1 / -1; } .check-label { display: flex; align-items: center; gap: 7px; font-size: 13px !important; font-weight: 450 !important; color: var(--text-primary) !important; min-height: 34px; cursor: pointer; } .form-error { color: var(--brand-secondary); background: var(--brand-secondary-soft); border-left: 3px solid var(--brand-secondary); border-radius: 0 var(--radius-m) var(--radius-m) 0; font-size: 12.5px; margin: 10px 0 0; padding: 8px 12px; } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .form-hint { font-size: 12px; color: var(--text-secondary); margin: 10px 0 0; } .picker-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--app-border); border-radius: var(--radius-m); overflow: hidden; max-height: 220px; overflow-y: auto; background: var(--app-surface); box-shadow: var(--shadow-s); } .picker-results li { padding: 7px 11px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--app-border); transition: background var(--transition); } .picker-results li:last-child { border-bottom: none; } .picker-results li:hover { background: var(--row-hover); } .picker-results li.selected { background: var(--brand-primary); color: #fff; } /* Checklist δικαιολογητικών (κάρτα υπόθεσης) */ .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { padding: 8px 0; border-bottom: 1px solid var(--app-border); display: flex; flex-direction: column; gap: 6px; } .checklist li:last-child { border-bottom: none; } .checklist-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; cursor: pointer; } .checklist-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--brand-primary); } .checklist-row .status-pill { margin-left: 6px; } .checklist .optional-tag { color: var(--text-secondary); font-style: normal; font-size: 12px; margin-left: 4px; } .checklist input[type="file"] { font-size: 12px; } .row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row-inline > .grow, .row-inline > input { flex: 1; min-width: 160px; } /* Collapsible λεπτομέρειες (π.χ. κείμενο OCR) */ details.well { margin-top: 12px; } details.well summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 4px 0; user-select: none; } details.well summary:hover { color: var(--text-primary); } details.well pre { white-space: pre-wrap; font-size: 12px; line-height: 1.5; max-height: 220px; overflow: auto; background: var(--surface-2); border: 1px solid var(--app-border); border-radius: var(--radius-m); padding: 10px 12px; margin: 6px 0 0; } /* --- Ψηφιοποίηση: προεπισκόπηση σελίδων + διαχωρισμός πολλαπλών εγγράφων --- */ .scan-preview { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px; background: var(--surface-2); border: 1px solid var(--app-border); border-radius: var(--radius-m); } .scan-preview img { width: 100%; height: auto; display: block; border: 1px solid var(--app-border); border-radius: 4px; background: #fff; } .scan-mode { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .scan-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; } .scan-page { border: 1px solid var(--app-border); border-radius: var(--radius-m); padding: 8px; background: var(--surface-2); } .scan-page.start { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); } .scan-page img { width: 100%; height: 180px; object-fit: contain; display: block; background: #fff; border: 1px solid var(--app-border); border-radius: 4px; } .scan-page-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; } .scan-page-meta .check-label { font-size: 12px; } .scan-segment { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--app-border); border-radius: var(--radius-m); } .scan-segment select { max-width: 320px; } /* --- Ψηφιοποίηση φακέλου (πολλαπλά PDF): ανάγνωση & επιβεβαίωση ανά έγγραφο --- */ /* Αναλογίες στηλών: Προεπισκόπηση 2/4 · Ανάγνωση (OCR) 1/4 · Στοιχεία φακέλου 1/4. */ .review-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1100px) { .review-grid { grid-template-columns: 1fr; } } /* Zoom προεπισκόπησης: τα controls στην κεφαλίδα του panel, οι εικόνες κλιμακώνονται σε πλάτος (>100% → οριζόντια κύλιση μέσα στο panel). */ .preview-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .preview-toolbar .zoom-level { font-size: 12.5px; color: var(--text-secondary); min-width: 44px; text-align: center; } .review-grid .scan-preview { max-height: 72vh; overflow: auto; } .review-grid .scan-preview img { width: var(--preview-zoom, 100%); max-width: none; } .doc-chips { display: flex; gap: 8px; flex-wrap: wrap; } .doc-chip { padding: 5px 12px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); color: var(--text-primary); font-size: 13px; cursor: pointer; } .doc-chip:hover { background: var(--row-hover); } .doc-chip.active { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); } .doc-chip.ok { background: var(--brand-primary-soft); border-color: var(--brand-primary); } .ocr-fields { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .ocr-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--app-border); border-radius: var(--radius-m); background: var(--surface-2); } .ocr-row.missing { border-color: var(--brand-secondary); } .ocr-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ocr-row .field-value { word-break: break-word; } .field-hint { font-size: 12px; color: var(--text-secondary); font-style: italic; } /* --- Ψηφιοποίηση φακέλου v2: κατηγοριοποίηση → ανάγνωση όλων → καρτέλες οντοτήτων --- */ .categorize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 12px; } .cat-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; border: 1px solid var(--app-border); border-radius: var(--radius-m); padding: 10px; background: var(--surface-2); } .cat-preview { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; } .cat-preview img { width: 100%; display: block; background: #fff; border: 1px solid var(--app-border); border-radius: 4px; } .cat-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cat-add { display: flex; gap: 8px; align-items: center; } .cat-add input { flex: 1; min-width: 0; } .engine-picker { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .engine-picker .check-label.disabled { opacity: .55; cursor: not-allowed; } .tab-strip { display: flex; gap: 8px; flex-wrap: wrap; } .tab-btn { padding: 6px 14px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); color: var(--text-primary); font-size: 13.5px; cursor: pointer; } .tab-btn:hover { background: var(--row-hover); } .tab-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .tab-btn .tab-count { font-size: 11.5px; opacity: .8; margin-left: 6px; } /* Πεδίο οντότητας: τιμή + κλείδωμα, πηγές/σκεπτικό ανάγνωσης, υπόδειξη διόρθωσης. */ .frow { border: 1px solid var(--app-border); border-radius: var(--radius-m); padding: 10px 12px; margin: 8px 0; background: var(--surface-2); } .frow.locked { border-color: var(--brand-primary); background: var(--brand-primary-soft); } .frow-main label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; } .frow-input { display: flex; gap: 8px; align-items: center; } .frow-input input { flex: 1; min-width: 0; } .btn-lock { white-space: nowrap; padding: 5px 12px; font-size: 12.5px; } .frow-sources { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .src-note { font-size: 12px; color: var(--text-secondary); word-break: break-word; } .src-note em { font-style: italic; } .frow-hint { margin-top: 8px; } .frow-hint input { width: 100%; font-size: 12.5px; } .doc-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; margin: 8px 0 16px; } @media (max-width: 960px) { .cat-card { grid-template-columns: 1fr; } .doc-row { grid-template-columns: 1fr; } } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--brand-primary); } .invalid { outline: 1px solid var(--brand-secondary); } .validation-message { color: var(--brand-secondary); } /* --- Blazor error UI (template) --- */ #blazor-error-ui { color-scheme: light dark; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "Παρουσιάστηκε σφάλμα."; } /* ========================================================================== Responsive ========================================================================== */ /* Tablet/στενό desktop: master-detail σε μία στήλη, κάρτα κάτω από τη λίστα — επιστροφή σε κανονική ροή σελίδας (η σελίδα κυλά, όχι τα panels). */ @media (max-width: 1100px) { .master-detail { grid-template-columns: 1fr; flex: 0 0 auto; min-height: auto; grid-template-rows: none; } .list-panel { overflow-y: visible; } .detail-panel { max-height: none; overflow-y: visible; } } /* Mobile shell: topbar με hamburger, sidebar off-canvas με backdrop (η σύμπτυξη αφορά μόνο desktop). */ @media (max-width: 960px) { .topbar { display: flex; } .collapse-button { display: none; } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: none; } .app.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-m); } .app.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: var(--backdrop); z-index: 30; border: none; padding: 0; cursor: pointer; } .content { padding: 18px 16px 28px; } .footer { grid-template-columns: 1fr auto; } .footer .right { display: none; } } @media (max-width: 640px) { .toolbar .input { min-width: 0; flex: 1 1 100%; } .toolbar select { flex: 1 1 auto; } .form-grid { grid-template-columns: 1fr; } .field { grid-template-columns: 120px 1fr; } .card-grid, .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .login-card { padding: 32px 24px 18px; } .login-footer { margin: 22px -24px 0; padding: 12px 24px 0; } .content { padding: 14px 12px 24px; } .form-actions .btn-primary, .form-actions .btn-secondary { flex: 1 1 auto; } }