/* ========================================================= ARZAK Contract Archive — theme overrides Brand blue taken from the ARZAK logo. ========================================================= */ :root { --arzak-blue: #0B4A9E; --arzak-blue-dark: #083A7C; --arzak-blue-light: #E8F0FB; --arzak-ink: #1B2A41; --arzak-muted: #6B7A90; --arzak-border: #E3E8F0; } .error, .text-error { color: #D9463E; } /* ========================================================= Top tabs (replaces the old left sidebar entirely) ========================================================= */ /* Reset the Vuexy sidebar spacing reserved on /.app-content */ body.horizontal-menu .app-content.arzak-no-sidebar { margin-left: 0 !important; padding-top: 8.6rem; } .header-navbar { z-index: 1032; } .arzak-tabs { position: fixed; top: 4.6rem; left: 0; right: 0; z-index: 1031; background: #fff; border-bottom: 1px solid var(--arzak-border); box-shadow: 0 2px 6px rgba(27, 42, 65, .04); } .arzak-tabs-nav { display: flex; flex-wrap: wrap; padding: 0 1.5rem; margin: 0; list-style: none; } .arzak-tabs-nav .nav-link { display: flex; align-items: center; gap: .45rem; padding: .95rem 1.1rem; color: var(--arzak-muted); font-weight: 600; font-size: .92rem; border-bottom: 3px solid transparent; white-space: nowrap; } .arzak-tabs-nav .nav-link:hover { color: var(--arzak-blue); } .arzak-tabs-nav .nav-link.active { color: var(--arzak-blue); border-bottom-color: var(--arzak-blue); } @media (max-width: 767px) { .arzak-tabs-nav { overflow-x: auto; flex-wrap: nowrap; padding: 0 .5rem; } body.horizontal-menu .app-content.arzak-no-sidebar { padding-top: 9.4rem; } } /* ---------- Brand colour overrides ---------- */ .btn-primary, .btn-primary:focus { background-color: var(--arzak-blue) !important; border-color: var(--arzak-blue) !important; box-shadow: none !important; } .btn-primary:hover { background-color: var(--arzak-blue-dark) !important; border-color: var(--arzak-blue-dark) !important; } .btn-outline-primary { color: var(--arzak-blue) !important; border-color: var(--arzak-blue) !important; } .btn-outline-primary:hover { background-color: var(--arzak-blue) !important; color: #fff !important; } .bg-primary { background-color: var(--arzak-blue) !important; } .text-primary { color: var(--arzak-blue) !important; } a { color: var(--arzak-blue); } a:hover { color: var(--arzak-blue-dark); } /* ---------- Header ---------- */ .header-navbar.navbar-shadow { box-shadow: 0 2px 10px rgba(11, 74, 158, .12) !important; } .header-navbar .navbar-brand-title { color: #fff; font-weight: 600; letter-spacing: .04em; } /* ---------- Sidebar ---------- */ .main-menu .navbar-header .brand-text { color: var(--arzak-blue) !important; font-weight: 700 !important; letter-spacing: .12em; font-size: 1.35rem; } .main-menu.menu-light .navigation > li.active > a { background: linear-gradient(118deg, var(--arzak-blue), rgba(11, 74, 158, .75)); box-shadow: 0 0 6px 1px rgba(11, 74, 158, .4); color: #fff !important; border-radius: 6px; } .main-menu.menu-light .navigation li a { color: var(--arzak-ink); } /* ---------- Cards & tables ---------- */ .card { border: 1px solid var(--arzak-border); box-shadow: 0 2px 8px rgba(27, 42, 65, .05); border-radius: 8px; } .card-header { border-bottom: 1px solid var(--arzak-border); padding-bottom: 1rem; } .card-title { color: var(--arzak-ink); font-weight: 600; } .table thead th { background: #F6F8FC; color: var(--arzak-ink); font-weight: 600; text-transform: none; letter-spacing: .02em; border-bottom: 2px solid var(--arzak-border) !important; } .table td { vertical-align: middle; } /* Monospace for the code columns — makes barcodes scannable by eye */ .code-cell { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .92rem; letter-spacing: .02em; } /* ---------- Search-first home ---------- */ .arzak-hero { background: linear-gradient(135deg, var(--arzak-blue) 0%, var(--arzak-blue-dark) 100%); border-radius: 10px; padding: 2.5rem 1.5rem; color: #fff; margin-bottom: 1.5rem; } .arzak-hero h1 { color: #fff; font-weight: 700; letter-spacing: .02em; margin-bottom: .35rem; } .arzak-hero p { color: rgba(255, 255, 255, .85); margin-bottom: 1.5rem; } .arzak-search-box { max-width: 720px; margin: 0 auto; position: relative; } .arzak-search-box input { height: 56px; font-size: 1.05rem; border: 0; border-radius: 8px; padding-left: 3rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); } .arzak-search-box .search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--arzak-muted); font-size: 1.1rem; pointer-events: none; } .arzak-search-hint { color: rgba(255, 255, 255, .75); font-size: .85rem; margin-top: .6rem; text-align: center; } /* ---------- Stat tiles ---------- */ .stat-tile { background: #fff; border: 1px solid var(--arzak-border); border-radius: 8px; padding: 1.1rem; display: flex; align-items: center; gap: .9rem; height: 100%; } .stat-tile .stat-icon { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--arzak-blue-light); color: var(--arzak-blue); font-size: 1.15rem; flex: 0 0 auto; } .stat-tile .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--arzak-ink); } .stat-tile .stat-label { color: var(--arzak-muted); font-size: .82rem; } /* ---------- Box cards ---------- */ .box-card { display: block; background: #fff; border: 1px solid var(--arzak-border); border-radius: 8px; padding: 1.1rem; text-decoration: none; transition: all .15s ease; height: 100%; } .box-card:hover { border-color: var(--arzak-blue); box-shadow: 0 4px 14px rgba(11, 74, 158, .15); transform: translateY(-2px); } .box-card .box-barcode { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; color: var(--arzak-ink); font-size: 1.02rem; word-break: break-all; } .box-card .box-meta { color: var(--arzak-muted); font-size: .83rem; margin-top: .3rem; } /* ---------- PDF preview panel ---------- */ .pdf-modal .modal-dialog { max-width: 92vw; } .pdf-frame { width: 100%; height: 78vh; border: 1px solid var(--arzak-border); border-radius: 6px; background: #F6F8FC; } /* ---------- Misc ---------- */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--arzak-muted); } .empty-state i { font-size: 2.6rem; opacity: .35; display: block; margin-bottom: .8rem; } .badge-soft-primary { background: var(--arzak-blue-light); color: var(--arzak-blue); font-weight: 600; }