/* Motywy: domyślnie ustawiane atrybutem data-theme na */ [data-theme='dark'] { --bg: #0b1020; --fg: #e8ecf1; --muted: #99a3b2; --card: #131a2e; --acc: #5b8cff; --danger: #ff6b6b; --ok: #30d158; --warn: #f0c419; --warn-badge-text: #f0c419; --input-bg: #0f1528; --border: rgba(255, 255, 255, .12); --card-border: rgba(255, 255, 255, .06); --soft: rgba(255, 255, 255, .04); --button-text: #ffffff; } [data-theme='light'] { --bg: #f0f2f5; --fg: #1c1e21; --muted: #606770; --card: #ffffff; --acc: #1877f2; --danger: #fa383e; --ok: #00a400; --warn: #ffc107; --warn-badge-text: #d97706; --input-bg: #f0f2f5; --border: #ced0d4; --card-border: #e0e0e0; --soft: #f5f5f5; --link: #0066cc; --button-text: #ffffff; } /* Fallback jeśli brak atrybutu (traktuj jak dark) */ /*:root{ --bg:#0b1020; --fg:#e8ecf1; --muted:#99a3b2; --card:#131a2e; --acc:#5b8cff; --danger:#ff6b6b; --ok:#30d158; --warn:#f0c419; --input-bg:#0f1528; --border:rgba(255,255,255,.12); --card-border:rgba(255,255,255,.06); --soft:rgba(255,255,255,.04); }*/ * { box-sizing: border-box } html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; } body { margin: 0; padding: 0; min-height: 100vh; font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.5; display: flex; flex-direction: column; overflow-x: hidden; width: 100%; } /* Main content grows to push footer to bottom */ body > main { flex: 1; overflow-x: hidden; width: 100%; } /* Prevent horizontal scroll from text overflow */ * { word-break: break-word; overflow-wrap: break-word; } /* Exceptions for word-break */ code, pre, .code, pre code, .mono, .column-badge, .output-field-excel-name { word-break: normal; overflow-wrap: normal; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--card); backdrop-filter: saturate(120%) blur(6px); position: sticky; top: 0; border-bottom: 1px solid var(--card-border); z-index: 100; --nav-height: 60px; } .brand { font-weight: 700; color: var(--fg); text-decoration: none; font-size: 1.2rem; flex-shrink: 0; overflow: hidden; } @media (max-width: 480px) { .brand { font-size: 1rem; } } .logo { width: 150px; max-width: 150px; height: auto; color: #131a2e; display: block; } @media (max-width: 480px) { .logo { width: 120px; max-width: 120px; } } [data-theme="dark"] .logo { color: #f9fafb; } [data-theme="dark"] .theme-circle { fill: #37c871; } /* Logo wave animation */ .logo-shape { animation: logoWave 6s ease-in-out infinite; } .logo-shape-1 { animation-delay: 0s; } .logo-shape-2 { animation-delay: 0.15s; } .logo-shape-3 { animation-delay: 0.3s; } .logo-shape-4 { animation-delay: 0.45s; } .logo-shape-5 { animation-delay: 0.6s; } .logo-shape-6 { animation-delay: 0.9s; } .logo-shape-7 { animation-delay: 1.05s; } @keyframes logoWave { 0%, 70% { opacity: 1; filter: brightness(1); } 80% { opacity: 0.2; filter: brightness(2.5); } 90%, 100% { opacity: 1; filter: brightness(1); } } .nav-check { display: none } .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .hamburger { display: none; cursor: pointer; padding: 8px; border-radius: 8px } .hamburger span { display: block; width: 22px; height: 2px; background: var(--fg); opacity: .9; margin: 4px 0; border-radius: 2px } .links { display: flex; align-items: center; gap: 16px } .links a { color: var(--muted); text-decoration: none; font-weight: 500; } .links a:hover, .links a:focus-visible { color: var(--fg); } .links a:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px } #theme-toggle { margin-left: 16px; } .container { width: 1200px; max-width: 100%; margin: 24px auto; padding: 0 16px } /* Linki w treści strony (np. "Nie pamiętasz hasła?") */ .container a:not(.btn):not(.btn-primary):not(.btn-secondary) { color: var(--link); text-decoration: none; font-weight: 400; } .container a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-icon):hover { text-decoration: underline; } .container a:not(.btn):not(.btn-primary):not(.btn-secondary):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; } .nav-container { max-width: 1168px; width: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; overflow: hidden; } @media (max-width: 480px) { .nav-container { padding: 0 8px; } } .alert { background: rgba(24, 119, 242, .1); border: 1px solid rgba(24, 119, 242, .2); padding: 12px 16px; border-radius: 8px; margin: 12px 0; color: var(--acc); } .alert.error { background: rgba(250, 56, 62, .1); border-color: rgba(250, 56, 62, .2); color: var(--danger); } form { display: grid; gap: 16px; background: var(--card); padding: 24px; border-radius: 12px; border: 1px solid var(--card-border); } label { display: grid; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 500; } input, select, textarea { width: 100%; max-width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 1rem; box-sizing: border-box; } button { padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); font-size: 1rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); border-color: transparent; } button { cursor: pointer; background: var(--acc); border: none; color: var(--button-text); font-weight: 600; } button:hover { filter: brightness(1.1) } button:disabled { cursor: not-allowed; opacity: 0.5; filter: none; } button:disabled:hover { filter: none; } .btn { display: inline-block; padding: 10px 16px; margin: 4px; border-radius: 8px; background: var(--soft); color: var(--fg); text-decoration: none; border: 1px solid var(--card-border); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--soft); color: var(--fg); padding: 0; } .icon-btn:hover { filter: brightness(1.05) } .hide-sm { display: inline-flex; align-items: center } .show-sm { display: none !important } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } .pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 500; line-height: 1.4; border: 1px solid var(--card-border); background: var(--soft); color: var(--fg); width: max-content; } .pill.uploaded { background: var(--soft); color: var(--muted) } .pill.queued { background: rgba(24, 119, 242, .1); color: var(--acc); border-color: rgba(24, 119, 242, .2) } .pill.processing { background: rgba(255, 193, 7, .1); color: var(--warn); border-color: rgba(255, 193, 7, .2) } .pill.done { background: rgba(0, 164, 0, .1); color: var(--ok); border-color: rgba(0, 164, 0, .2) } .pill.failed { background: rgba(250, 56, 62, .1); color: var(--danger); border-color: rgba(250, 56, 62, .2) } .pill.stuck { background: rgba(255, 193, 7, .10); color: var(--muted); border-color: rgba(255, 193, 7, .35); border-style: dashed; } .pill.setup_required { background: rgba(156, 39, 176, .1); color: #9c27b0; border-color: rgba(156, 39, 176, .2); } .pill.money { background: rgba(24, 119, 242, .1); color: var(--acc); border-color: rgba(24, 119, 242, .2) } /* File Expiration Styles */ /* Expiration warning icon with custom tooltip */ .expiration-icon { margin-left: 0.4rem; cursor: help; opacity: 0.8; transition: opacity 0.2s ease; position: relative; display: inline-block; } .expiration-icon:hover { opacity: 1; } /* Custom tooltip with HTML support */ .expiration-icon .custom-tooltip { position: fixed; bottom: auto; left: 50%; top: auto; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 400; white-space: nowrap; line-height: 1.4; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; pointer-events: none; min-width: 120px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .expiration-icon .custom-tooltip.show { opacity: 1; visibility: visible; } /* Position tooltip using JavaScript */ .expiration-icon { position: relative; z-index: 1; } .expiration-icon .custom-tooltip strong { display: block; font-weight: 600; } .expiration-icon .custom-tooltip small { display: block; font-size: 0.65rem; opacity: 0.8; margin-top: 0.25rem; } /* Warning level styling */ .expiration-icon.expiration-critical { color: #d32f2f; /* Ciemniejszy czerwony - wyrazistszy */ } .expiration-icon.expiration-critical i { font-size: 1.1rem; } .expiration-icon.expiration-warning { color: #f57c00; /* Ciemniejszy pomarańczowy - wyrazistszy */ } .expiration-icon.expiration-warning i { font-size: 1rem; } [data-theme="dark"] .expiration-icon.expiration-critical { color: #ff5252; /* Jaśniejszy dla dark mode */ } [data-theme="dark"] .expiration-icon.expiration-warning { color: #ffb74d; /* Jaśniejszy dla dark mode */ } /* Cost calculation layout */ .cost-calculation { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .cost-field { flex: 1; min-width: 120px; } .cost-field--result { flex: 1.2; } .cost-value { font-size: 28px; font-weight: bold; color: var(--fg); } .cost-value--result { font-size: 36px; color: var(--acc); } .cost-operator { font-size: 32px; font-weight: bold; color: var(--muted); padding-bottom: 8px; align-self: flex-end; } /* Balance visibility */ .balance-mobile { display: none; } .balance-desktop { display: inline-flex; align-items: center; } .table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); } .table th, .table td { padding: 12px; border-bottom: 1px solid var(--card-border); } .table th { background: var(--soft); text-align: left; color: var(--muted); font-weight: 600; } .dropzone { border: 2px dashed var(--border); padding: 32px; border-radius: 12px; text-align: center; background: var(--card); margin: 12px 0; transition: all .2s; } .dropzone.hover { border-color: var(--acc); background: rgba(24, 119, 242, .05); } .dropzone.uploading { border-color: var(--warn); background: rgba(255, 193, 7, .05); } .dropzone.uploading #selectBtn { opacity: 0.5; cursor: not-allowed; } .dropzone.uploading #uploadContent { display: none; } .dropzone.uploading #uploadProgress { display: block; } .progress-bar { width: 100%; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; margin: 16px 0; border: 1px solid var(--card-border); } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--acc), var(--warn)); width: 0%; transition: width 0.3s ease; border-radius: 3px; } #progressInfo { color: var(--fg); } #progressPercent { font-weight: 600; color: var(--acc); margin: 8px 0; } .progress-info { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--muted); } /* Dark theme override - match info-row values */ [data-theme='dark'] .progress-info { color: #333; } .footer { opacity: .6; text-align: center; padding: 24px } .inline { display: flex; gap: 8px; align-items: end } .filters { display: flex; gap: 12px; align-items: end; margin-bottom: 12px } .hint { color: var(--muted); font-size: .9rem } .table-responsive { width: 100%; overflow-x: auto; } fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 0; } legend { padding: 0 8px; font-weight: 500; color: var(--muted); } .radio-group { display: flex; gap: 8px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background-color: var(--soft); } .radio-button-label { flex: 1; padding: 10px 12px; border-radius: 6px; text-align: center; cursor: pointer; font-weight: 500; color: var(--muted); transition: all .2s; } .sr-only:checked + .radio-button-label { background-color: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } .sr-only:focus-visible + .radio-button-label { outline: 2px solid var(--acc); outline-offset: 2px; } .warning-text { display: flex; align-items: center; gap: 8px; color: #d97706; /* More orange color for better contrast */ padding: 8px 12px; background-color: rgba(255, 193, 7, .15); border: 1px solid rgba(255, 193, 7, .3); border-radius: 8px; font-weight: 500; } [data-theme='dark'] .warning-text { color: var(--warn); background-color: rgba(255, 193, 7, .1); border: 1px solid rgba(255, 193, 7, .2); } .warning-text svg { stroke: currentColor; min-width: 16px; color: inherit; } @media (max-width: 640px) { .inline, .filters { flex-direction: column; align-items: stretch } .nav { flex-wrap: wrap; position: relative; padding: 10px 8px; z-index: 40; overflow: visible; --nav-height: 55px; } .nav-container { overflow: visible; } .nav-right { width: 100%; justify-content: flex-end; align-items: center; position: relative; } .hamburger { display: block; z-index: 51; padding: 12px 10px; border-radius: 10px; background: var(--soft); position: relative; } .links { position: fixed; left: 0; right: 0; top: var(--nav-height, 60px); background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .13); border-radius: 0 0 16px 16px; padding: 8px 0 8px 0; display: flex; flex-direction: column; align-items: stretch; width: 100vw; max-width: 100vw; gap: 0; max-height: 0; overflow: hidden; overflow-x: hidden; opacity: 0; pointer-events: none; transition: max-height .28s cubic-bezier(.4, 0, .2, 1), opacity .18s; z-index: 50; } .links a { margin: 0; padding: 16px 20px; background: none; border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; color: var(--fg); font-size: 1.08em; text-align: left; opacity: 1; transition: background .15s; } .links a:last-child { border-bottom: none; } .links a:hover, .links a:focus-visible { background: var(--soft); } /* Menu open state (controlled by JavaScript) */ .links.menu-open { max-height: 600px !important; opacity: 1 !important; pointer-events: auto !important; } /* Fallback: CSS checkbox hack for when JS fails */ .nav-check:checked ~ .nav-right .links { max-height: 600px; opacity: 1; pointer-events: auto; } .hide-sm { display: none !important } .show-sm { display: inline-flex !important; align-items: center; width: auto; justify-content: flex-start; margin: 8px 0 0 0; } /* Balance visibility on mobile */ .balance-mobile { display: inline-flex; align-items: center; } .balance-desktop { display: none !important; } /* Cost calculation on mobile */ .cost-calculation { flex-direction: column; align-items: stretch; } .cost-operator { text-align: center; padding: 4px 0; align-self: center; } .cost-value { font-size: 24px; } .cost-value--result { font-size: 28px; } /* Zmniejszony min-width tabeli, żeby nie wymuszała poziomego scrolla tak łatwo */ .table { font-size: .97em; } .table th, .table td { white-space: normal; word-break: break-word; padding: 8px 8px; } /* Zapewnij, że menu nie zostawia dużej pustej przestrzeni po prawej */ .nav-right { padding-right: 12px } .responsive-table { border: 0; background: transparent; } .responsive-table thead { display: none; } .responsive-table tr { display: block; margin-bottom: .625em; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); } .responsive-table td { display: block; text-align: right; border-bottom: 1px dotted var(--card-border); padding: 12px 8px; position: relative; padding-left: 50%; min-height: 36px; } .responsive-table td:first-child { padding-left: 8px; text-align: center; } .responsive-table td:last-child { border-bottom: 0; } /* Status pills in responsive table */ .responsive-table td:nth-child(3) { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .responsive-table td:nth-child(3):before { align-self: flex-start; margin-top: 4px; } .responsive-table td:before { content: attr(data-label); float: left; font-weight: 600; text-transform: uppercase; font-size: 0.75em; color: var(--muted); display: inline-block; margin-right: 8px; word-break: break-word; } .responsive-table td:first-child:before { content: none; } /* Job links styling */ .job-link { color: var(--fg); text-decoration: none; word-break: break-word; overflow-wrap: break-word; display: block; } .job-link:hover { color: var(--acc); text-decoration: underline; } /* Source cell styling */ .source-cell { max-width: 100%; overflow: hidden; word-break: break-word; overflow-wrap: break-word; } .source-cell .job-link { white-space: normal; } /* Table action buttons on mobile */ .responsive-table td:last-child { text-align: center; } .btn-sm { padding: 6px 10px; font-size: 0.85rem; display: inline-block; margin: 2px; } /* Action buttons container */ .action-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; } /* Fix table cells with long content */ .responsive-table td[data-label="Źródło danych"] { padding-left: 8px; text-align: left; } .responsive-table td[data-label="Źródło danych"]:before { display: none; } .responsive-table td[data-label="Status"] { padding-left: 8px; text-align: left; } .responsive-table td[data-label="Status"]:before { display: none; } .responsive-table td[data-label="Akcje"] { padding-left: 8px; text-align: left; } .responsive-table td[data-label="Akcje"]:before { display: none; } /* Better spacing for table rows */ .responsive-table tr { padding: 8px; margin-bottom: 12px; overflow: hidden; } /* Status pills in table */ .responsive-table .pill, .responsive-table .badge { display: inline-flex; margin: 2px; white-space: normal; text-align: center; } } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .full-width-label { grid-column: 1 / -1; } .setting-item { display: flex; align-items: center; margin-bottom: 1rem; } .setting-item label { width: 250px; } /* Job details styles */ .breadcrumb { margin-bottom: 20px; color: #666; font-size: 14px; } .breadcrumb a { color: #007bff; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .job-header-info { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 12px; margin-bottom: 30px; } .job-header-info h1 { margin: 0 0 20px 0; font-size: 2em; } .main-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .file-info { display: flex; align-items: center; gap: 15px; } .file-icon { font-size: 3em; opacity: 0.8; } .file-details h2 { margin: 0 0 5px 0; font-size: 1.4em; font-weight: 600; } .file-size { margin: 0; opacity: 0.8; font-size: 0.9em; } .status-badge { font-size: 0.9em; padding: 8px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } /* Status badges in job header - more visible colors */ .job-header-info .status-badge { background: rgba(255, 255, 255, 0.95); color: #333; backdrop-filter: blur(10px); } .job-header-info .status-badge.queued { background: rgba(24, 119, 242, 0.9); color: white; } .job-header-info .status-badge.processing { background: rgba(255, 193, 7, 0.9); color: #333; } .job-header-info .status-badge.done { background: rgba(0, 164, 0, 0.9); color: white; } .job-header-info .status-badge.failed { background: rgba(250, 56, 62, 0.9); color: white; } .job-header-info .status-badge.cancelled { background: rgba(153, 163, 178, 0.9); color: white; } .job-header-info .status-badge.stuck { background: rgba(255, 193, 7, 0.8); color: #333; border: 2px dashed rgba(255, 193, 7, 1); } .job-header-info .status-badge.setup_required { background: rgba(156, 39, 176, 0.9); color: white; } .job-header-info .status-badge.expired { background: rgba(107, 114, 128, 0.9); color: white; } .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 30px; } .detail-card { background: white; border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .detail-card h3 { margin: 0 0 20px 0; color: #333; font-size: 1.2em; display: flex; align-items: center; gap: 8px; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .info-row:last-child { border-bottom: none; } .info-row .label { color: #666; font-weight: 500; min-width: 140px; } .info-row .value { color: #333; font-weight: 600; text-align: right; } .progress-bar-container { flex: 1; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; min-width: 100px; border: 1px solid var(--card-border); } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--acc), var(--warn)); transition: width 0.3s ease; border-radius: 3px; } .cost-display { color: #28a745; font-size: 1.2em; font-weight: bold; } .actions-section { background: #f8f9fa; border-radius: 12px; padding: 25px; margin-bottom: 30px; } .actions-section h3 { margin: 0 0 20px 0; color: #333; } .actions-container { display: flex; gap: 15px; flex-wrap: wrap; } .download-section { background: rgba(0, 164, 0, 0.1); border: 1px solid rgba(0, 164, 0, 0.2); border-radius: 12px; padding: 25px; margin-bottom: 30px; } .download-section h3 { margin: 0 0 15px 0; color: var(--ok); } .download-info { text-align: center; } .download-info p { margin: 0 0 15px 0; color: var(--ok); } .pill { padding: 6px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .pill.queued { background: rgba(24, 119, 242, .1); color: var(--acc); border-color: rgba(24, 119, 242, .2); } .pill.processing { background: rgba(255, 193, 7, .1); color: var(--warn); border-color: rgba(255, 193, 7, .2); } .pill.done { background: rgba(0, 164, 0, .1); color: var(--ok); border-color: rgba(0, 164, 0, .2); } .pill.failed { background: rgba(250, 56, 62, .1); color: var(--danger); border-color: rgba(250, 56, 62, .2); } .pill.cancelled { background: var(--soft); color: var(--muted); } .pill.setup_required { background: rgba(156, 39, 176, .1); color: #9c27b0; border-color: rgba(156, 39, 176, .2); } /* Configuration button styling */ .btn-configure { background: var(--acc) !important; color: var(--button-text) !important; border: 1px solid var(--acc) !important; font-weight: 600 !important; padding: 12px 24px !important; border-radius: 8px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .btn-configure:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; } /* Admin task details specific styles */ .stats-overview { margin-bottom: 40px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; } .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; } .stat-card:hover { transform: translateY(-2px); } .stat-number { font-size: 2.5em; font-weight: bold; margin-bottom: 5px; } .stat-label { font-size: 0.9em; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } .job-list { margin-top: 30px; } .job-card { background: white; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease; } .job-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .job-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; } .job-filename { font-weight: 600; font-size: 1.1em; color: #333; word-break: break-all; } .job-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 15px; } .job-info { display: flex; align-items: center; font-size: 0.9em; } .info-label { font-weight: 500; color: #666; margin-right: 8px; min-width: 80px; } .cost { font-weight: 600; color: #28a745; } .job-actions { display: flex; gap: 10px; flex-wrap: wrap; } .empty-state { text-align: center; padding: 40px; color: #666; background: #f8f9fa; border-radius: 8px; } .actions { margin-top: 40px; text-align: center; } /* Dark theme fixes for admin task details */ [data-theme='dark'] .job-card { background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } [data-theme='dark'] .job-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } [data-theme='dark'] .job-header { border-bottom-color: var(--card-border); } [data-theme='dark'] .job-filename { color: var(--fg); } [data-theme='dark'] .job-info { color: var(--fg); } [data-theme='dark'] .info-label { color: var(--muted); } [data-theme='dark'] .cost { color: var(--ok); } [data-theme='dark'] .empty-state { background: var(--soft); color: var(--muted); } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .job-header { flex-direction: column; align-items: flex-start; gap: 10px; } .job-details { grid-template-columns: 1fr; } } /* Dark theme fixes for job details */ [data-theme='dark'] .breadcrumb { color: var(--muted); } [data-theme='dark'] .breadcrumb a { color: var(--acc); } [data-theme='dark'] .job-header-info { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); } [data-theme='dark'] .detail-card { background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme='dark'] .detail-card h3 { color: var(--fg); } [data-theme='dark'] .info-row { border-bottom-color: var(--card-border); } [data-theme='dark'] .info-row .label { color: var(--muted); } [data-theme='dark'] .info-row .value { color: var(--fg); } [data-theme='dark'] .actions-section { background: var(--soft); } [data-theme='dark'] .actions-section h3 { color: var(--fg); } [data-theme='dark'] .pill.setup_required { background: rgba(156, 39, 176, .2); color: #ba68c8; border-color: rgba(156, 39, 176, .4); } @media (max-width: 768px) { .main-info { flex-direction: column; align-items: flex-start; } .details-grid { grid-template-columns: 1fr; } .info-row { flex-direction: column; align-items: flex-start; gap: 5px; } .info-row .value { text-align: left; } .actions-container { justify-content: center; } } /* Terms of Service System */ .form-check { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; min-height: 44px; } .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; accent-color: var(--acc); flex-shrink: 0; } .form-check-label { margin: 0; cursor: pointer; user-select: none; color: var(--fg); font-size: 0.95rem; line-height: 1.4; } .form-check-inline { display: flex; align-items: center; gap: 0.75rem; } .form-check-inline .form-check-input { margin: 0; position: static; } .form-check-inline .form-check-label { margin: 0; } /* Keep asterisks inline in labels */ label .text-danger { white-space: nowrap; display: inline; } label { display: inline-block; } /* CKEditor 5 customizations */ .ck-editor__editable { min-height: 500px; max-height: 600px; } .ck-editor__editable_inline { min-height: 500px; } /* Dark theme for CKEditor */ [data-theme='dark'] .ck.ck-editor__main > .ck-editor__editable { background: var(--card); color: var(--fg); border-color: var(--border); } [data-theme='dark'] .ck.ck-toolbar { background: var(--card); border-color: var(--border); } [data-theme='dark'] .ck.ck-button, [data-theme='dark'] .ck.ck-dropdown { color: var(--fg); } [data-theme='dark'] .ck.ck-button:hover, [data-theme='dark'] .ck.ck-dropdown:hover { background: var(--soft); } [data-theme='dark'] .ck.ck-list { background: var(--card); border-color: var(--border); } [data-theme='dark'] .ck.ck-list__item { color: var(--fg); } [data-theme='dark'] .ck.ck-list__item:hover { background: var(--soft); } /* Fix button height in flex containers */ .d-flex .btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* Modern Confirmation Modal */ .confirm-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: confirmModalFadeIn 0.2s ease-out; } @keyframes confirmModalFadeIn { from { opacity: 0; } to { opacity: 1; } } .confirm-modal { background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 500px; width: 90%; animation: confirmModalSlideIn 0.3s ease-out; border: 1px solid var(--border); } @keyframes confirmModalSlideIn { from { transform: translateY(-20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .confirm-modal-header { display: flex; align-items: center; gap: 16px; padding: 24px 24px 16px 24px; border-bottom: 1px solid var(--border); } .confirm-modal-icon { font-size: 32px; color: var(--warn); flex-shrink: 0; } .confirm-modal-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--fg); } .confirm-modal-body { padding: 24px; } .confirm-modal-message { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg); white-space: pre-wrap; } .confirm-modal-footer { display: flex; gap: 12px; padding: 16px 24px 24px 24px; justify-content: flex-end; } .confirm-modal-btn-cancel, .confirm-modal-btn-confirm { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; transition: all 0.2s ease; min-width: 100px; justify-content: center; } .confirm-modal-btn-cancel { background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); } .confirm-modal-btn-cancel:hover { filter: brightness(1.1); } .confirm-modal-btn-confirm { background: var(--danger); color: var(--button-text); } .confirm-modal-btn-confirm.btn-success { background: var(--ok); } .confirm-modal-btn-confirm.btn-primary { background: var(--acc); } .confirm-modal-btn-confirm:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .confirm-modal-btn-cancel:active, .confirm-modal-btn-confirm:active { transform: translateY(0); } /* Responsive */ @media (max-width: 600px) { .confirm-modal { width: 95%; max-width: none; } .confirm-modal-footer { flex-direction: column-reverse; } .confirm-modal-btn-cancel, .confirm-modal-btn-confirm { width: 100%; } } /* Alert Modal Styles */ .alert-modal-icon { font-size: 32px; flex-shrink: 0; } .alert-modal-icon.fa-info-circle { color: var(--acc); } .alert-modal-icon.fa-check-circle { color: var(--ok); } .alert-modal-icon.fa-exclamation-triangle { color: var(--warn); } .alert-modal-icon.fa-times-circle { color: var(--danger); } .alert-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 32px; border-radius: 8px; font-weight: 500; font-size: 0.95rem; cursor: pointer; border: none; transition: all 0.2s ease; min-width: 100px; } .alert-modal-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .alert-modal-btn:active { transform: translateY(0); } .alert-modal-btn.btn-primary { background: var(--acc); color: #fff; } .alert-modal-btn.btn-success { background: var(--ok); color: #fff; } .alert-modal-btn.btn-warning { background: var(--warn); color: #fff; } .alert-modal-btn.btn-danger { background: var(--danger); color: #fff; } @media (max-width: 600px) { .alert-modal-btn { width: 100%; } } /* Terms Acceptance Page Buttons */ .terms-accept-btn, .terms-decline-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; border: none; transition: all 0.2s ease; min-width: 160px; justify-content: center; } .terms-accept-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); font-size: 1.05rem; padding: 14px 28px; min-width: 180px; } .terms-accept-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); filter: brightness(1.1); } .terms-accept-btn:active:not(:disabled) { transform: translateY(0); } .terms-accept-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .terms-decline-btn { background: transparent; color: var(--danger); border: 2px solid var(--danger); } .terms-decline-btn:hover { background: rgba(220, 53, 69, 0.1); } .terms-decline-btn:active { transform: scale(0.98); } /* ======================== Modern Site Footer ======================== */ .site-footer { background: var(--card); border-top: 1px solid var(--card-border); padding: 40px 0 0 0; } .footer-content { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 32px; } .footer-section { flex: 0 0 auto; } .footer-section h4 { font-size: 0.95rem; font-weight: 600; color: var(--fg); margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.5px; } .footer-logo svg { color: var(--fg); display: block; margin-bottom: 12px; } .footer-tagline { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.5; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .footer-links a:hover { color: var(--acc); text-decoration: none; } .footer-links a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; } .footer-bottom { background: var(--soft); border-top: 1px solid var(--card-border); padding: 20px 0; text-align: center; } .footer-bottom p { margin: 0; color: var(--muted); font-size: 0.85rem; } /* Responsive footer */ @media (max-width: 768px) { .footer-content { flex-direction: column; align-items: center; gap: 32px; text-align: center; } .footer-section { text-align: center; } .footer-logo svg { margin: 0 auto 12px auto; } .footer-links { display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer-links li { margin-bottom: 0; } } /* ======================== Modern Terms Page ======================== */ .terms-page-wrapper { min-height: calc(100vh - 400px); } .terms-container { max-width: 900px; margin: 0 auto; padding: 0 16px; } .terms-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } .terms-header-left { flex: 1; min-width: 280px; } .terms-header h1 { font-size: 2rem; font-weight: 700; margin: 0 0 12px 0; color: var(--fg); line-height: 1.2; } .terms-meta { margin: 0; color: var(--muted); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .terms-version { font-weight: 600; color: var(--acc); } .terms-separator { color: var(--border); } .terms-header-right { flex-shrink: 0; } .version-selector-wrapper { display: flex; flex-direction: column; gap: 8px; } .version-selector-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; margin: 0; } .version-selector { min-width: 280px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .version-selector:hover { border-color: var(--acc); } .version-selector:focus { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--acc); } .terms-divider { border: none; border-top: 1px solid var(--card-border); margin: 24px 0 32px 0; } .terms-content { color: var(--fg); line-height: 1.8; font-size: 1rem; } .terms-content h1, .terms-content h2, .terms-content h3, .terms-content h4 { margin-top: 2em; margin-bottom: 1em; font-weight: 600; color: var(--fg); } .terms-content h1 { font-size: 1.8rem; } .terms-content h2 { font-size: 1.4rem; } .terms-content h3 { font-size: 1.2rem; } .terms-content p { margin-bottom: 1.2em; } .terms-content ul, .terms-content ol { margin-bottom: 1.5em; padding-left: 2em; } .terms-content li { margin-bottom: 0.5em; } .terms-content a { color: var(--acc); text-decoration: none; font-weight: 500; } .terms-content a:hover { text-decoration: underline; } .terms-content code { background: var(--soft); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'Courier New', monospace; } .terms-content pre { background: var(--soft); padding: 16px; border-radius: 8px; overflow-x: auto; border: 1px solid var(--card-border); } .terms-content pre code { background: none; padding: 0; } .terms-content blockquote { border-left: 4px solid var(--acc); padding-left: 16px; margin: 1.5em 0; color: var(--muted); font-style: italic; } .terms-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .terms-content th, .terms-content td { padding: 12px; border: 1px solid var(--card-border); text-align: left; } .terms-content th { background: var(--soft); font-weight: 600; } .terms-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5em 0; } .terms-info-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; margin-top: 40px; } .info-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .info-card-item { display: flex; flex-direction: column; gap: 8px; } .info-card-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .info-card-value { font-size: 1rem; font-weight: 500; color: var(--fg); } /* Responsive terms page */ @media (max-width: 768px) { .terms-header { flex-direction: column; } .terms-header h1 { font-size: 1.6rem; } .terms-header-left, .terms-header-right { width: 100%; } .version-selector { width: 100%; min-width: unset; } .terms-meta { flex-direction: column; align-items: flex-start; } .terms-separator { display: none; } .info-card-row { grid-template-columns: 1fr; } .terms-content h1 { font-size: 1.5rem; } .terms-content h2 { font-size: 1.25rem; } .terms-content h3 { font-size: 1.1rem; } } /* ======================== Contact Page ======================== */ .contact-page-wrapper { min-height: calc(100vh - 400px); } .contact-container { max-width: 800px; margin: 0 auto; padding: 0 16px; } .contact-container h1 { font-size: 2rem; font-weight: 700; margin: 0 0 12px 0; color: var(--fg); line-height: 1.2; } .contact-intro { color: var(--muted); font-size: 1.1rem; margin: 0 0 40px 0; line-height: 1.6; } .contact-grid { display: grid; gap: 24px; margin-bottom: 40px; } .contact-info-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 32px; display: grid; gap: 32px; } .contact-info-item { display: flex; align-items: flex-start; gap: 20px; } .contact-icon { width: 56px; height: 56px; background: var(--soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--acc); font-size: 1.5rem; } .contact-details h3 { font-size: 1.1rem; font-weight: 600; color: var(--fg); margin: 0 0 8px 0; } .contact-details p { color: var(--muted); margin: 4px 0; font-size: 0.95rem; } .contact-details a { color: var(--acc); text-decoration: none; font-weight: 500; } .contact-details a:hover { text-decoration: underline; } .contact-additional-info { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 32px; } .contact-additional-info h2 { font-size: 1.4rem; font-weight: 600; color: var(--fg); margin: 0 0 16px 0; } .contact-additional-info p { color: var(--muted); margin: 0 0 16px 0; line-height: 1.6; } .contact-additional-info ul { list-style: none; padding: 0; margin: 0; } .contact-additional-info li { padding: 12px 0; border-bottom: 1px solid var(--card-border); color: var(--muted); line-height: 1.6; } .contact-additional-info li:last-child { border-bottom: none; } .contact-additional-info a { color: var(--acc); text-decoration: none; font-weight: 500; } .contact-additional-info a:hover { text-decoration: underline; } /* Responsive contact page */ @media (max-width: 768px) { .contact-container h1 { font-size: 1.6rem; } .contact-info-card { padding: 24px; gap: 24px; } .contact-info-item { flex-direction: column; align-items: flex-start; gap: 12px; } .contact-icon { width: 48px; height: 48px; font-size: 1.25rem; } .contact-additional-info { padding: 24px; } .contact-additional-info h2 { font-size: 1.2rem; } } /* ======================== Auth Pages (Login, Register, etc.) ======================== */ .auth-wrapper { display: flex; align-items: center; justify-content: center; padding: 40px 16px; } .auth-container { width: 440px; max-width: 100%; margin: 0 auto; } .auth-header { text-align: center; margin-bottom: 32px; } .auth-header h1 { font-size: 2rem; font-weight: 700; margin: 0 0 12px 0; color: var(--fg); } .auth-header p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.5; } .auth-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .auth-card form { background: transparent; padding: 0; border: none; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 20px; } .auth-card label { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: var(--fg); font-weight: 500; } .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] { padding: 14px 16px; font-size: 1rem; } .auth-card button[type="submit"] { padding: 14px 24px; font-size: 1rem; font-weight: 600; margin-top: 8px; } .auth-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--muted); font-size: 0.85rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-checkbox { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; margin: 8px 0; } .auth-checkbox input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--acc); } .auth-checkbox label { display: inline; font-size: 0.95rem; line-height: 1.5; color: var(--fg); cursor: pointer; font-weight: 400; } .auth-checkbox label a { color: var(--acc); text-decoration: none; font-weight: 500; } .auth-checkbox label a:hover { text-decoration: underline; } .auth-links { text-align: center; margin-top: 24px; color: var(--muted); font-size: 0.9rem; } .auth-links a { color: var(--acc); text-decoration: none; font-weight: 500; } .auth-links a:hover { text-decoration: underline; } .auth-links p { margin: 8px 0; } /* Success/Check Email Page */ .auth-success-icon { width: 80px; height: 80px; background: var(--ok); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px auto; color: var(--button-text); font-size: 2.5rem; } .auth-success-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 48px 32px; text-align: center; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .auth-success-card h2 { font-size: 1.5rem; font-weight: 600; color: var(--fg); margin: 0 0 16px 0; } .auth-success-card p { color: var(--muted); margin: 0 0 24px 0; line-height: 1.6; } .auth-success-card .activation-link { background: var(--soft); border: 1px solid var(--card-border); border-radius: 8px; padding: 12px 16px; word-break: break-all; font-size: 0.85rem; color: var(--fg); margin-bottom: 24px; } .auth-success-card .activation-link a { color: var(--acc); text-decoration: none; font-weight: 500; } .auth-success-card .activation-link a:hover { text-decoration: underline; } .auth-success-card button, .auth-success-card .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background: var(--acc); color: var(--button-text); border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; } .auth-success-card button:hover, .auth-success-card .btn:hover { filter: brightness(1.1); } /* Responsive auth pages */ @media (max-width: 768px) { .auth-wrapper { min-height: calc(100vh - 160px); padding: 24px 16px; } .auth-container { max-width: 100%; } .auth-card { padding: 24px; } .auth-header h1 { font-size: 1.6rem; } .auth-success-card { padding: 32px 24px; } .auth-success-icon { width: 64px; height: 64px; font-size: 2rem; } } /* Pagination Styles */ .pagination-wrapper { margin-top: 24px; padding: 20px; background: var(--card); border-radius: 8px; border: 1px solid var(--card-border); } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; cursor: pointer; } .pagination-link:hover:not(.pagination-disabled):not(.pagination-current) { background: var(--soft); border-color: var(--acc); color: var(--acc); } .pagination-link.pagination-current { background: var(--acc); color: var(--button-text); border-color: var(--acc); font-weight: 600; cursor: default; } .pagination-link.pagination-disabled { opacity: 0.5; cursor: not-allowed; background: var(--soft); } .pagination-numbers { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } .pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: var(--muted); font-size: 14px; } .pagination-info { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); } /* Responsive pagination */ @media (max-width: 768px) { .pagination { gap: 4px; } .pagination-link { min-width: 36px; height: 36px; padding: 0 8px; font-size: 13px; } .pagination-numbers { gap: 2px; } .pagination-ellipsis { min-width: 36px; height: 36px; font-size: 13px; } } /* ======================== Settings Page Styles ======================== */ .auth-container { width: 640px; max-width: 100%; margin: 0 auto; padding: 24px 16px; } .auth-card { background: var(--card); border-radius: 12px; border: 1px solid var(--card-border); padding: 40px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .auth-header { text-align: center; margin-bottom: 32px; } .auth-header h1 { font-size: 28px; font-weight: 600; color: var(--fg); margin: 0 0 8px 0; } .auth-subtitle { color: var(--muted); font-size: 15px; margin: 0; } .auth-message { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; margin-bottom: 24px; font-size: 14px; } .auth-message-success { background: rgba(48, 209, 88, 0.15); color: var(--ok); border: 1px solid rgba(48, 209, 88, 0.3); } .auth-message-error { background: rgba(250, 56, 62, 0.15); color: var(--danger); border: 1px solid rgba(250, 56, 62, 0.3); } .auth-message i { font-size: 18px; } .auth-form { margin-bottom: 24px; } .form-section { margin-bottom: 32px; } .form-section:last-of-type { margin-bottom: 24px; } .form-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .form-section-header i { font-size: 18px; color: var(--acc); } .form-section-header h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0; } .form-hint { color: var(--muted); font-size: 13px; margin: 0 0 16px 0; line-height: 1.5; } .form-group { margin-bottom: 20px; } .form-group:last-child { margin-bottom: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-label { display: block; font-weight: 500; color: var(--fg); margin-bottom: 8px; font-size: 14px; } .field-readonly { font-size: 12px; font-weight: normal; color: var(--muted); } .form-input { width: 100%; padding: 12px 16px; font-size: 15px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--fg); transition: border-color 0.2s, box-shadow 0.2s; } .form-input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.15); } .form-input::placeholder { color: var(--muted); opacity: 0.7; } .form-input.readonly { background: var(--soft); opacity: 0.7; cursor: not-allowed; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-size: 15px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; } .btn-primary { background: var(--acc); color: #fff; } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-info { background: #17a2b8; color: white; } .btn-info:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-info:active { transform: translateY(0); } .btn-block { width: 100%; } .auth-footer { text-align: center; padding-top: 24px; border-top: 1px solid var(--border); } .auth-footer a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color 0.2s; } .auth-footer a:hover { color: var(--acc); } /* NIP input with GUS button */ .input-wrapper { display: flex; gap: 8px; } .input-wrapper .form-input { flex: 1; } .btn-gus { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 14px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; background: var(--acc); color: #fff; white-space: nowrap; transition: all 0.2s; } .btn-gus:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .btn-gus:active:not(:disabled) { transform: translateY(0); } .btn-gus:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .gus-error { color: var(--danger); font-size: 13px; margin-top: 6px; display: none; } .gus-error.show { display: block; } @media (max-width: 640px) { .auth-container { padding: 16px 0px; } .auth-card { padding: 24px; } .auth-header h1 { font-size: 24px; } .form-row { grid-template-columns: 1fr; } .form-section-header { flex-wrap: wrap; } } /* ======================== Register Page Styles ======================== */ .auth-section { margin: 32px 0; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); } .auth-section-header { margin-bottom: 16px; } .auth-section-header h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: var(--fg); } .auth-section-header p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-col { display: flex; flex-direction: column; } @media (max-width: 640px) { .auth-row { grid-template-columns: 1fr; } } /* ======================== Job Details Page Styles ======================== */ .actions { text-align: center; margin-top: 40px; } /* ======================== Billing Page Styles ======================== */ .topup-modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(4px); animation: topupModalFadeIn 0.2s ease-out; } @keyframes topupModalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-dialog { margin: 8% auto; width: 90%; max-width: 480px; animation: topupModalSlideIn 0.3s ease-out; } @keyframes topupModalSlideIn { from { transform: translateY(-20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-content { border-radius: 16px; overflow: hidden; background-color: var(--card, #fff); color: var(--fg, #000); border: 1px solid var(--card-border, #dee2e6); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal-content--payment { border-top: 4px solid var(--ok, #28a745); } .modal-header { padding: 20px 24px 16px 24px; background-color: var(--soft, #f8f9fa); border-bottom: 1px solid var(--border, #dee2e6); display: flex; justify-content: space-between; align-items: center; } .modal-title { margin: 0; color: var(--fg, #000); font-size: 1.25rem; font-weight: 600; } .modal-body { padding: 24px; background-color: var(--card, #fff); } .btn-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted, #6c757d); padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s; } .btn-close:hover { background-color: var(--soft, #f8f9fa); color: var(--fg, #000); } /* Payment modal specific styles */ .topup-amount-section { margin-bottom: 24px; } .topup-amount-section .form-label { display: block; margin-bottom: 10px; font-weight: 500; color: var(--fg, #000); font-size: 0.95rem; } .input-with-icon { position: relative; display: flex; align-items: center; } .form-control--lg { padding: 14px 50px 14px 16px; font-size: 1.1rem; font-weight: 600; border-radius: 10px; border: 2px solid var(--border, #ced4da); transition: all 0.2s; } .form-control--lg:focus { border-color: var(--ok, #28a745); box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15); } .input-suffix { position: absolute; right: 16px; color: var(--muted, #6c757d); font-weight: 500; font-size: 0.95rem; pointer-events: none; } .topup-hint { margin-top: 8px; font-size: 0.85rem; color: var(--muted, #6c757d); } /* Summary section */ .topup-summary { background: var(--soft, #f8f9fa); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--card-border, #e8e8e8); } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .summary-row--total { padding-top: 12px; } .summary-label { color: var(--muted, #6c757d); font-size: 0.9rem; } .summary-label--total { color: var(--fg, #000); font-weight: 600; font-size: 1rem; } .summary-value { color: var(--fg, #000); font-weight: 500; font-size: 0.95rem; } .summary-value--total { color: var(--ok, #28a745); font-weight: 700; font-size: 1.3rem; } .summary-divider { height: 1px; background: var(--border, #dee2e6); margin: 8px 0 12px 0; } .topup-error { color: var(--danger, #dc3545); font-size: 0.85rem; margin-top: 8px; font-weight: 500; } /* Payment button */ .btn-payment { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; border: none; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 1rem; transition: all 0.2s; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .btn-payment:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4); filter: brightness(1.05); } .btn-payment:active { transform: translateY(0); } /* Responsive adjustments */ @media (max-width: 600px) { .modal-dialog { margin: 4% auto; width: 95%; } .modal-body { padding: 20px; } .form-control--lg { font-size: 1rem; padding: 12px 45px 12px 14px; } .summary-value--total { font-size: 1.15rem; } } .form-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--fg, #000); } .form-control { background-color: var(--input-bg, #fff); color: var(--fg, #000); border: 1px solid var(--border, #ced4da); padding: 10px 12px; border-radius: 4px; width: 100%; font-size: 16px; } .form-control:focus { background-color: var(--input-bg, #fff); color: var(--fg, #000); border-color: var(--acc, #0d6efd); outline: none; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); } .form-control::placeholder { color: var(--muted, #6c757d); opacity: 0.7; } .hint { font-size: 14px; color: var(--muted, #6c757d); margin-bottom: 15px; padding: 10px; background-color: var(--soft, #f8f9fa); border-radius: 4px; border-left: 3px solid var(--acc, #0d6efd); } .info-hint { border-left-color: #ffc107; background-color: rgba(255, 193, 7, 0.1); } .info-hint a { color: var(--acc, #0d6efd); font-weight: 500; } .modal-buttons { display: flex; gap: 12px; margin-top: 20px; } .modal-buttons button { flex: 1; } .btn-secondary { background-color: var(--muted, #6c757d); border-color: var(--muted, #6c757d); color: #fff; padding: 10px 20px; border-radius: 4px; font-weight: 500; transition: background-color 0.2s, border-color 0.2s; } .btn-secondary:hover { filter: brightness(1.1); } .alert { padding: 12px 16px; border-radius: 4px; margin-bottom: 15px; font-size: 14px; border-left: 4px solid; } .alert.info { background-color: rgba(24, 119, 242, .1); color: var(--acc, #0c5460); border-left-color: #0dcaf0; } .alert.success { background-color: rgba(0, 164, 0, .1); color: var(--ok, #155724); border-left-color: #28a745; } .alert.error { background-color: rgba(250, 56, 62, .1); color: var(--danger, #721c24); border-left-color: #dc3545; } /* Balance Hero Section */ .balance-hero { text-align: center; padding: 40px 20px; background: var(--card, #fff); border-radius: 12px; border: 1px solid var(--card-border, #dee2e6); } .balance-hero .balance-amount { font-size: 48px; font-weight: 700; color: var(--ok, #28a745); margin-bottom: 8px; } .balance-label { font-size: 16px; color: var(--muted, #6c757d); margin-bottom: 20px; } /* ======================== Admin Balance Page Styles ======================== */ .balance-section { background: var(--card, #fff); border-radius: 12px; border: 1px solid var(--card-border, #dee2e6); padding: 40px 20px; text-align: center; } .balance-display { max-width: 500px; margin: 0 auto; } .balance-value-large { font-size: 64px; font-weight: 700; color: var(--ok, #28a745); margin-bottom: 12px; line-height: 1; } .balance-meta { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; } .balance-status { padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; } .balance-status.positive { background: rgba(40, 167, 69, 0.1); color: var(--ok, #28a745); } .balance-status.negative { background: rgba(220, 53, 69, 0.1); color: var(--danger, #dc3545); } .user-info { color: var(--muted, #6c757d); font-size: 14px; } /* ======================== Terms Acceptance Page Styles ======================== */ .terms-accept-wrapper { max-width: 900px; margin: 40px auto; padding: 0 20px; } .terms-accept-card { background: var(--card); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid var(--border); } .terms-accept-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 24px 32px; } .terms-accept-header h2 { margin: 0; color: white; font-size: 1.5rem; } .terms-accept-body { padding: 32px; } .terms-accept-intro { margin-bottom: 24px; line-height: 1.6; color: var(--fg); } .terms-accept-info-box { background: var(--soft); padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; border-left: 4px solid #667eea; } .terms-accept-info-box h3 { margin: 0 0 8px 0; font-size: 1.25rem; color: var(--fg); } .terms-accept-info-box p { margin: 0; color: var(--muted); font-size: 0.9rem; } .terms-accept-content { max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-bottom: 24px; background: var(--input-bg); line-height: 1.8; } .terms-accept-checkbox { display: flex; align-items: center; margin-bottom: 24px; } .terms-accept-checkbox input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; } .terms-accept-checkbox label { margin-left: 12px; cursor: pointer; user-select: none; color: var(--fg); font-size: 1rem; } .terms-accept-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ======================== Utility Classes for Inline Styles ======================== */ .hidden { display: none !important; } .text-success { color: #28a745 !important; } .text-danger { color: #dc3545 !important; } .w-100 { width: 100% !important; } .text-center { text-align: center !important; } .text-muted { color: var(--muted) !important; } .d-flex { display: flex !important; } .align-items-center { align-items: center !important; } .align-items-end { align-items: flex-end !important; } .gap-2 { gap: 0.5rem !important; } .justify-content-center { justify-content: center !important; } .justify-content-space-between { justify-content: space-between !important; } .flex-wrap { flex-wrap: wrap !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .me-2 { margin-right: 0.5rem !important; } .ms-2 { margin-left: 0.5rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .badge { display: inline-block; padding: 4px 8px; font-size: 12px; font-weight: 600; border-radius: 4px; } .badge.bg-success { background-color: #28a745 !important; color: white !important; } .badge.bg-danger { background-color: #dc3545 !important; color: white !important; } .badge.bg-info { background-color: #17a2b8 !important; color: white !important; } .badge.bg-warning { background-color: #ffc107 !important; color: #212529 !important; } .badge.bg-secondary { background-color: #6c757d !important; color: white !important; } .badge.bg-primary { background-color: #0d6efd !important; color: white !important; } .btn-sm { padding: 6px 12px; font-size: 14px; } .btn-lg { padding: 16px 32px; font-size: 18px; } .btn-large { padding: 14px 28px; font-size: 1.1rem; } /* Cost estimate section in configure page */ .cost-estimate { display: none; margin: 20px 0; padding: 20px; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border-color); } .cost-estimate h3 { margin-top: 0; } /* Output fieldset disabled state */ .output-fieldset-disabled { opacity: 0.5; pointer-events: none; } /* Dashboard upload progress */ #uploadProgress { display: none; } #job-data { display: none; } .warning-hint { margin-top: 8px; } /* Additional utility classes */ .mt-4 { margin-top: 1.5rem !important; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-md-2, .col-md-5, .col-md-8, .col-md-9, .col-md-3, .col-sm-3, .col-sm-9 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .g-3 { gap: 1rem !important; } .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; } .card-body { padding: 20px; } .card-title { margin-bottom: 15px; } .form-control-lg { padding: 16px 20px; font-size: 18px; } .btn-lg { padding: 16px 32px; font-size: 18px; } .d-grid { display: grid !important; } .table-striped { background: var(--card); } .table-striped thead { background: var(--soft); } .table-striped tbody tr:nth-of-type(odd) { background: var(--soft); } .align-middle { vertical-align: middle !important; } .text-end { text-align: right !important; } .form-text { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); } .fs-5 { font-size: 1.5em !important; } /* Terms checkbox styling */ .terms-checkbox { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; } .terms-checkbox-label { margin: 0; cursor: pointer; user-select: none; } /* Width utility classes */ .w-0 { width: 0 !important; } /* Margin and text utility classes */ .mt-3 { margin-top: 1rem !important; } .text-decoration-underline { text-decoration: underline !important; } .ms-3 { margin-left: 1rem !important; } .fw-bold { font-weight: 600 !important; } /* Loading spinner */ .spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: -0.125em; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border 0.75s linear infinite; } .spinner-border.text-primary { color: var(--acc); } @keyframes spinner-border { 100% { transform: rotate(360deg); } } /* Visually hidden (for screen readers) */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Additional utility classes for loaders */ .text-center { text-align: center !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .mt-2 { margin-top: 0.5rem !important; } .text-muted { color: var(--muted) !important; } /* ============================================ ADMIN PANEL STYLES ============================================ */ /* Admin Dashboard */ .admin-dashboard { max-width: 1200px; margin: 0 auto; padding: 24px 16px; } .dashboard-header { text-align: center; margin-bottom: 40px; } .dashboard-header h1 { font-size: 2.5rem; font-weight: 700; margin: 0 0 8px 0; color: var(--fg); } /* Statistics Grid */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; } .stat-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 32px 24px; display: flex; align-items: center; gap: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; text-decoration: none !important; flex-direction: column; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .stat-card--clickable { cursor: pointer; } .stat-card--clickable:hover { border-color: var(--acc); } .stat-card--clickable:hover .stat-label, .stat-card--clickable:hover .stat-description { color: var(--fg); } .stat-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; flex-shrink: 0; } .stat-card--primary .stat-icon { background: rgba(24, 119, 242, 0.1); color: var(--acc); } .stat-card--danger .stat-icon { background: rgba(250, 56, 62, 0.1); color: var(--danger); } .stat-card--success .stat-icon { background: rgba(40, 167, 69, 0.1); color: var(--ok); } .stat-card--info .stat-icon { background: rgba(91, 140, 255, 0.1); color: var(--acc); } .stat-card--warning .stat-icon { background: rgba(240, 196, 25, 0.1); color: var(--warn); } .stat-card--accent .stat-icon { background: rgba(168, 85, 247, 0.1); color: #a855f7; } .stat-content { flex: 1; } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--fg); line-height: 1; margin-bottom: 4px; } .stat-label { font-size: 1rem; font-weight: 600; color: var(--fg); margin-bottom: 2px; } .stat-description { font-size: 0.85rem; color: var(--muted); } /* Navigation Section */ .nav-section { margin-bottom: 48px; } .nav-section-title { font-size: 1.5rem; font-weight: 600; color: var(--fg); margin: 0 0 24px 0; } .nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .nav-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 16px; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .nav-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); border-color: var(--acc); } .nav-card--secondary { opacity: 0.8; } .nav-card--secondary:hover { opacity: 1; } .nav-card-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; background: var(--soft); color: var(--muted); } .nav-card-icon--primary { background: rgba(24, 119, 242, 0.1); color: var(--acc); } .nav-card-icon--info { background: rgba(23, 162, 184, 0.1); color: #17a2b8; } .nav-card-icon--warning { background: rgba(255, 193, 7, 0.1); color: var(--warn); } .nav-card-icon--success { background: rgba(40, 167, 69, 0.1); color: var(--ok); } .nav-card-icon--secondary { background: var(--soft); color: var(--muted); } .nav-card-content { flex: 1; } .nav-card-title { font-size: 1.1rem; font-weight: 600; color: var(--fg); margin: 0 0 4px 0; } .nav-card-description { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.4; } .nav-card-arrow { color: var(--muted); font-size: 0.9rem; transition: transform 0.2s ease; flex-shrink: 0; } .nav-card:hover .nav-card-arrow { transform: translateX(4px); color: var(--acc); } /* Admin Users Page */ .admin-users-page { max-width: 1400px; margin: 0 auto; padding: 24px 16px; } /* Page Header */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; } .page-header-content h1 { font-size: 2rem; font-weight: 700; margin: 0 0 4px 0; color: var(--fg); } .page-subtitle { color: var(--muted); font-size: 1rem; margin: 0; } .page-header-actions { display: flex; gap: 12px; flex-shrink: 0; } /* Filters Section */ .filters-section { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; margin-bottom: 24px; } .filters-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 150px; } .filter-group label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .search-input-wrapper { position: relative; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.9rem; } .search-input-wrapper .form-input { padding-left: 36px; } .form-input, .form-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--fg); font-size: 0.95rem; } .form-input:focus, .form-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.15); } .filter-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Table Section */ .table-section { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; } .table-responsive { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; } .table thead { background: var(--soft); } .table th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--card-border); white-space: nowrap; } .table td { padding: 12px 16px; border-bottom: 1px solid var(--card-border); color: var(--fg); vertical-align: middle; } .table tbody tr { border-bottom: 1px solid var(--card-border); } .table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { background: var(--soft); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; } .badge-admin { background: rgba(255, 193, 7, 0.15); color: var(--warn); } .badge-user { background: var(--soft); color: var(--muted); } .badge-primary { background: rgba(24, 119, 242, 0.1); color: var(--acc); } .badge-info { background: rgba(23, 162, 184, 0.1); color: #17a2b8; } .badge-secondary { background: var(--soft); color: var(--muted); } .badge-success { background: rgba(40, 167, 69, 0.15); color: var(--ok); } /* Status Badge */ .status-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; } .status-active { background: rgba(40, 167, 69, 0.15); color: var(--ok); } .status-inactive { background: rgba(153, 163, 178, 0.15); color: var(--muted); } .status-draft { background: var(--soft); color: var(--muted); } .status-published { background: rgba(40, 167, 69, 0.15); color: var(--ok); } .status-unpublished { background: rgba(255, 193, 7, 0.15); color: var(--warn); } /* Balance */ .balance-amount { font-weight: 600; font-size: 0.95rem; } .balance-positive { color: var(--ok); } .balance-negative { color: var(--danger); } /* Action Buttons */ .action-buttons { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--soft); color: var(--fg); cursor: pointer; transition: all 0.2s ease; text-decoration: none; flex-shrink: 0; } .btn-icon:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-icon--primary:hover { background: rgba(24, 119, 242, 0.1); color: var(--acc); border-color: var(--acc); } .btn-icon--secondary:hover { background: rgba(153, 163, 178, 0.1); color: var(--muted); border-color: var(--muted); } .btn-icon--info:hover { background: rgba(23, 162, 184, 0.1); color: #17a2b8; border-color: #17a2b8; text-decoration: none !important; } .btn-icon--success:hover { background: rgba(40, 167, 69, 0.1); color: var(--ok); border-color: var(--ok); text-decoration: none !important; } .btn-icon--danger:hover { background: rgba(250, 56, 62, 0.1); color: var(--danger); border-color: var(--danger); text-decoration: none !important; } .btn-icon--warning:hover { background: rgba(255, 193, 7, 0.1); color: var(--warn); border-color: var(--warn); text-decoration: none !important; } /* Empty State */ .empty-state { padding: 64px 32px; text-align: center; } .empty-state-icon { font-size: 4rem; color: var(--muted); opacity: 0.3; margin-bottom: 24px; } .empty-state h3 { font-size: 1.5rem; font-weight: 600; color: var(--fg); margin: 0 0 12px 0; } .empty-state p { color: var(--muted); font-size: 1rem; margin: 0 0 24px 0; } /* Admin Tasks Page */ .admin-tasks-page { max-width: 1400px; margin: 0 auto; padding: 24px 16px; } /* Fields Display */ .fields-display { display: flex; align-items: center; gap: 8px; } .fields-icon { color: var(--acc); font-size: 0.9rem; flex-shrink: 0; } .fields-info { display: flex; flex-direction: column; gap: 2px; } .fields-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; } .fields-label { color: var(--muted); font-weight: 400; } .fields-value { color: var(--fg); font-weight: 600; } /* Price Badge */ .price-badge { display: inline-block; padding: 6px 12px; background: rgba(40, 167, 69, 0.1); color: var(--ok); border-radius: 6px; font-weight: 600; font-size: 0.9rem; } /* Acceptances Link */ .acceptances-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(24, 119, 242, 0.1); color: var(--acc); border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.2s ease; } .acceptances-link:hover { background: rgba(24, 119, 242, 0.2); } /* Admin Documents Page */ .admin-documents-page { max-width: 1400px; margin: 0 auto; padding: 24px 16px; } /* Document ID */ .doc-id { font-family: monospace; font-size: 0.9rem; color: var(--muted); } /* Admin Jobs Page */ .admin-jobs-page { max-width: 1600px; margin: 0 auto; padding: 24px 16px; } /* Filter Section for Jobs */ .filter-section { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--card-border); color: var(--fg); text-decoration: none !important; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; } .filter-pill:hover { background: var(--soft); border-color: var(--acc); } .filter-pill--active { background: var(--acc); border-color: var(--acc); color: #ffffff !important; box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3); } .filter-pill--active:hover { color: var(--acc) !important; } /* Jobs table specific styles */ .table { font-size: 0.85rem; } .table th, .table td { padding: 10px 8px; border-bottom: none !important; } .table tbody tr { border-bottom: 1px solid var(--card-border); } .table tbody tr:last-child { border-bottom: none; } /* Compressed columns */ .table .job-id { width: 50px; } .table .job-user { max-width: 200px; } .table .job-task { max-width: 180px; } .table .job-status-combined { width: 140px; } .table .job-cost { width: 80px; } .table .job-created { width: 110px; } .table .job-actions { width: 80px; padding: 10px !important; } /* Job ID */ .job-id { font-family: monospace; font-size: 0.8rem; color: var(--muted); } /* User Link */ .user-link { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 0.8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .user-link:hover { color: var(--acc); } .task-name { text-overflow: ellipsis; overflow: hidden; max-width: 300px; } /* Task Link */ .task-link { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 0.8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .task-link:hover { color: var(--acc); } /* Status Pills */ .status-pill { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .status-queued { background: rgba(24, 119, 242, 0.1); color: var(--acc); } .status-processing { background: rgba(255, 193, 7, 0.1); color: var(--warn); } .status-done { background: rgba(0, 164, 0, 0.1); color: var(--ok); } .status-failed, .status-stuck { background: rgba(250, 56, 62, 0.1); color: var(--danger); } .status-cancelled { background: var(--soft); color: var(--muted); } .status-setup_required { background: rgba(156, 39, 176, 0.1); color: #9c27b0; } .status-expired { background: rgba(107, 114, 128, 0.1); color: var(--muted); } /* Status Combined Wrapper */ .status-combined-wrapper { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .progress-wrapper-small { display: flex; align-items: center; gap: 6px; width: 100%; } .progress-bar-small { width: 45px; height: 4px; background: var(--soft); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .progress-fill-small { height: 100%; background: linear-gradient(90deg, var(--acc), var(--warn)); transition: width 0.3s ease; } .progress-text-small { font-size: 0.65rem; color: var(--muted); white-space: nowrap; } /* Cost */ .cost-amount { font-weight: 600; color: var(--ok); font-size: 0.8rem; white-space: nowrap; } /* ============================================ ADMIN RESPONSIVE STYLES ============================================ */ /* Admin Dashboard Responsive */ @media (max-width: 768px) { .admin-dashboard { padding: 16px 12px; } .dashboard-header h1 { font-size: 1.8rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; } @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } } .stat-card { padding: 24px 20px; } .stat-number { font-size: 2rem; } .nav-grid { grid-template-columns: 1fr; gap: 16px; } .nav-card { padding: 20px; } .nav-section-title { font-size: 1.3rem; } /* Users Page */ .admin-users-page, .admin-tasks-page, .admin-documents-page, .admin-jobs-page { padding: 16px 12px; } .page-header { flex-direction: column; align-items: flex-start; } .page-header-content h1 { font-size: 1.6rem; } .page-header-actions { width: 100%; flex-direction: column; } .page-header-actions .btn { width: 100%; } .filters-form { flex-direction: column; align-items: stretch; } .filter-group { min-width: 100%; } .filter-actions { flex-direction: column; } .filter-actions .btn { width: 100%; } .table { font-size: 0.9rem; } .table th, .table td { padding: 12px 8px; } .action-buttons { flex-wrap: wrap; } /* Modern mobile cards layout for jobs table */ .table-section { background: transparent; border: none; border-radius: 0; overflow: visible; } .table-responsive { overflow: visible; } /* Reset desktop widths/max-widths for mobile */ .table .job-user, .table .job-task { max-width: none; width: auto; } .table .job-id, .table .job-status-combined, .table .job-cost, .table .job-created, .table .job-actions { width: auto; max-width: none; } .table { display: block; font-size: 0.9rem; border-collapse: unset; } .table thead { display: none; } .table tbody { display: flex; flex-direction: column; gap: 16px; } .table tbody tr { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: all 0.2s ease; } .table tbody tr:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: none; font-size: 0.9rem; } /* Job order in mobile cards */ .table .job-task { order: 1; padding-bottom: 12px; border-bottom: 1px solid var(--soft); margin-bottom: 8px; } .table .job-task .task-link { font-size: 1rem; font-weight: 600; } .table .job-task::before { content: "Zadanie"; font-weight: 600; color: var(--muted); font-size: 0.75rem; margin-right: 12px; } .table .job-status-combined { order: 2; padding: 12px 0; } .table .job-status-combined::before { content: "Status"; font-weight: 600; color: var(--muted); font-size: 0.75rem; margin-right: 12px; } .status-combined-wrapper { flex-direction: column; align-items: flex-start; gap: 8px; } .progress-wrapper-small { width: 100%; justify-content: space-between; } .progress-bar-small { width: 80px; } .table .job-id, .table .job-created, .table .job-cost { order: 3; font-size: 0.8rem; color: var(--muted); padding: 4px 0; } .table .job-id::before { content: "#" attr(data-id); font-weight: 600; } .table .job-created::before { content: "Utworzono: "; } .table .job-cost::before { content: "Koszt: "; } .table .job-user { order: 4; font-size: 0.85rem; padding: 6px 0; border-top: 1px solid var(--soft); margin-top: 4px; } .table .job-user::before { content: "Użytkownik: "; font-weight: 600; color: var(--muted); } .table .job-actions { order: 5; padding-top: 12px; border-top: 1px solid var(--soft); margin-top: 8px; } .table .job-actions::before { content: "Akcje"; font-weight: 600; color: var(--muted); font-size: 0.75rem; margin-right: 12px; } .table .action-buttons { gap: 8px; } .table .btn-icon { width: 36px; height: 36px; font-size: 0.9rem; } /* Hide less important info on very small screens */ .table .job-id, .table .job-created { display: none; } .filter-pill { flex: 1; justify-content: center; min-width: 0; font-size: 0.8rem; padding: 8px 12px; } } @media (min-width: 480px) and (max-width: 768px) { .table .job-id, .table .job-created { display: flex; } } /* Extra small phones - minimal info */ @media (max-width: 380px) { .table .job-user { display: none; } .table .status-pill { font-size: 0.65rem; padding: 2px 6px; } .table .progress-bar-small { width: 60px; } } /* Extra compressed for medium screens */ @media (min-width: 769px) and (max-width: 1200px) { .table { font-size: 0.8rem; } .table th, .table td { padding: 8px 6px; } .table .user-link, .table .task-link { font-size: 0.75rem; } .table .status-pill { font-size: 0.65rem; padding: 2px 6px; } } /* ============================================ ENHANCED TABLE STYLES - Global ============================================ */ .table.data-table { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .table.data-table thead { background: linear-gradient(180deg, var(--soft) 0%, var(--card) 100%); } .table.data-table th { padding: 12px 16px; font-size: 0.75rem; letter-spacing: 1px; border-bottom: 2px solid var(--card-border); } .table.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--card-border); } .table.data-table tbody tr { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInRow 0.4s ease backwards; } @keyframes fadeInRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .table.data-table tbody tr:nth-child(1) { animation-delay: 0.05s; } .table.data-table tbody tr:nth-child(2) { animation-delay: 0.1s; } .table.data-table tbody tr:nth-child(3) { animation-delay: 0.15s; } .table.data-table tbody tr:nth-child(4) { animation-delay: 0.2s; } .table.data-table tbody tr:nth-child(5) { animation-delay: 0.25s; } .table.data-table tbody tr:nth-child(n+6) { animation-delay: 0.3s; } .table.data-table tbody tr:hover { background: var(--soft); transform: translateX(4px); box-shadow: -4px 0 0 0 var(--acc); border-left: 4px solid var(--acc); } .table.data-table tbody tr:hover td:first-child { border-left: none; } /* Enhanced status pills */ .pill.status-queued { background: rgba(24, 119, 242, 0.1); color: var(--acc); border-color: rgba(24, 119, 242, 0.2); } .pill.status-processing { background: rgba(240, 196, 25, 0.1); color: var(--warn); border-color: rgba(240, 196, 25, 0.2); animation: pulse 2s infinite; } .pill.status-done { background: rgba(48, 209, 88, 0.1); color: var(--ok); border-color: rgba(48, 209, 88, 0.2); } .pill.status-failed { background: rgba(250, 56, 62, 0.1); color: var(--danger); border-color: rgba(250, 56, 62, 0.2); } .pill.status-cancelled { background: var(--soft); color: var(--muted); } .pill.status-stuck { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.2); } .pill.status-expired { background: rgba(220, 38, 38, 0.1); color: var(--danger); border-color: rgba(220, 38, 38, 0.2); } .pill.status-setup_required { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.2); } .pill.status-pending { background: var(--soft); color: var(--muted); border-color: var(--card-border); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .pill .fa-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Enhanced amount display */ .table .amount-display { font-weight: 700; font-size: 1rem; color: var(--fg); } .table .amount-sub { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-top: 2px; } /* Search input for tables */ .table-search { position: relative; width: 280px; } .table-search input { width: 100%; padding: 12px 16px 12px 40px; border: 2px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--fg); font-size: 0.9rem; transition: all 0.2s ease; } .table-search input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1); } .table-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } /* ============================================ ADMIN EDIT TASK PAGE STYLES ============================================ */ /* Task Config Tabs */ .task-config-tabs { display: flex; gap: 1rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; } .task-config-tab { position: relative; padding: 0.75rem 1.5rem; background: none; border: none; border-top: 3px solid transparent; cursor: pointer; font-weight: 500; color: var(--muted); transition: color 0.2s; } .task-config-tab::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--acc); transition: width 0.3s ease; } .task-config-tab:not(.disabled):hover { color: var(--fg); } .task-config-tab:hover::before { width: 100%; } .task-config-tab.active { color: var(--acc); } .task-config-tab.active::before { width: 100%; } .task-config-panel { display: none; } .task-config-panel.active { display: block; } /* Field Lists */ .field-list, .output-field-list { margin-top: 1rem; } .field-item, .output-field-item { background: var(--soft); border: 1px solid var(--card-border); border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; } .field-info h5, .output-field-info h5 { margin: 0 0 0.25rem 0; font-size: 1rem; color: var(--fg); } .field-info p, .output-field-info p { margin: 0; font-size: 0.875rem; color: var(--muted); } .field-actions, .output-field-actions { display: flex; gap: 0.5rem; } .field-type-badge { display: inline-block; padding: 0.25rem 0.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; margin-left: 0.5rem; color: var(--muted); } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1050; align-items: center; justify-content: center; } .modal.show { display: flex; } .modal-content { background: var(--card); border-radius: 0.5rem; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; margin: 1rem; } .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.5rem; } /* Modal Buttons */ .modal .btn-icon { background: none; border: none; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--muted); } .modal .btn-icon:hover { color: var(--fg); } .modal .btn-icon.delete:hover { color: var(--danger); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--muted); transition: 0.4s; border-radius: 26px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: var(--card); transition: 0.4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--acc); } input:checked + .toggle-slider:before { transform: translateX(24px); } /* Structured Output Toggle */ .structured-output-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--soft); border-radius: 0.5rem; margin-bottom: 1rem; } .structured-output-toggle strong { color: var(--fg); } .structured-output-toggle small { color: var(--muted); } /* Source cell styles */ .source-icon { margin-right: 0.5rem; font-size: 1.1em; } .source-text { word-break: break-word; } /* Mobile-specific source cell improvements */ @media (max-width: 768px) { .source-cell { font-size: 0.9rem; line-height: 1.4; } .source-cell .job-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Action button fixes */ .btn-danger { font-size: 0.8rem; padding: 6px 10px; } .btn-primary { font-size: 0.85rem; padding: 8px 12px; } .btn-outline { font-size: 0.85rem; padding: 8px 12px; } /* Icon buttons in table */ .btn-icon { padding: 8px; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } /* Button with icon */ .btn i, .btn-danger i, .btn-primary i, .btn-outline i { margin-right: 4px; } /* Responsive table improvements */ .table-responsive { width: calc(100% + 24px); } .responsive-table { width: 100%; border-spacing: 0; } /* Better table row appearance */ .responsive-table tr:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } } /* ============================================ MOBILE OVERFLOW FIXES ============================================ */ @media (max-width: 768px) { /* Ensure all containers respect viewport width */ .container { width: 100%; padding: 0 12px; overflow: hidden; } /* Fix form elements */ form { padding: 16px; overflow: hidden; } /* Fix buttons and inputs */ button, .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; } /* Fix navigation */ .nav-container { padding: 0 8px; } /* Fix cards and panels */ .card, .panel { overflow: hidden; } /* Fix table responsiveness */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; } /* Fix badges and pills */ .badge, .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Fix grid layouts */ .grid, [class*="grid-"] { overflow: hidden; } /* Ensure images don't overflow */ img { max-width: 100%; height: auto; } /* Fix modal overlay */ .modal-overlay { padding: 8px; } /* Fix any remaining overflow issues */ * { max-width: 100%; } /* Exceptions for max-width */ .modal-overlay, .modal-content, body, html, [class*="col-"], [class*="flex"] { max-width: none; } /* Pagination fixes for mobile */ .pagination-wrapper { padding: 12px; margin: 16px -12px 0; } .pagination { gap: 4px; } .pagination-link { min-width: 36px; height: 36px; font-size: 0.9rem; padding: 0 8px; } .pagination-numbers { display: none; } .pagination-info { font-size: 0.85rem; text-align: center; margin-top: 8px; } /* Dropzone fixes for mobile */ .dropzone { padding: 1.5rem 1rem; border-radius: 8px; } #uploadText { font-size: 0.95rem; } #selectBtn { font-size: 0.9rem; padding: 8px 12px; } /* Form job button */ #formJobBtn { text-align: center; padding: 12px; font-size: 0.95rem; } /* Dashboard heading */ h1, h2 { word-break: break-word; overflow-wrap: break-word; } }