@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

:root { --ink:#172033; --canvas:#f5f7fb; --line:#e6eaf1; --brand:#3157d5; --brand-deep:#243f9a; --brand-soft:#edf1ff; --success:#0c9b68; --radius:16px; --shadow:0 12px 30px rgba(34,51,84,.08); }
* { font-family:'Cairo',sans-serif; }
html { min-height:100%; }
body { min-height:100vh; color:var(--ink); background:var(--canvas); line-height:1.65; }
body:not(.login-page)::before { content:''; position:fixed; inset:0 0 auto; height:260px; pointer-events:none; background:radial-gradient(circle at 84% -25%,rgba(95,129,255,.23),transparent 42%),linear-gradient(135deg,#f1f4ff 0%,#f7f8fc 66%,#eef8f5 100%); z-index:-1; }

.navbar { min-height:74px; padding:.8rem 1.5rem; background:linear-gradient(115deg,#182650,#3157d5 58%,#3b73df)!important; box-shadow:0 6px 22px rgba(27,49,118,.2); }
.navbar .container-fluid { gap:1rem; }.navbar-brand { font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }.navbar-brand i { display:inline-grid; place-items:center; width:34px; height:34px; margin-left:.45rem; border-radius:10px; background:rgba(255,255,255,.16); }.navbar-text { margin-inline-start:auto; font-size:.88rem; opacity:.95; }.navbar .btn { margin:.15rem; border-color:rgba(255,255,255,.35); }.navbar .btn:hover { background:#fff; color:var(--brand-deep); border-color:#fff; }
.container-fluid.mt-3,.container-fluid.mt-4 { padding:0 2rem 2rem; }

.card { overflow:hidden; border:1px solid rgba(223,228,239,.8); border-radius:var(--radius); background:rgba(255,255,255,.96); box-shadow:var(--shadow); }.card-header { padding:1rem 1.25rem; color:var(--ink); font-weight:800; background:#fff; border-bottom:1px solid var(--line); }.card-header i { color:var(--brand); margin-left:.35rem; }.card-body { padding:1.25rem; }
/* Keep long galleries responsive: cards outside the viewport are not painted until needed. */
.image-card,.gallery-item { content-visibility:auto; contain-intrinsic-size:260px 300px; }
img[loading="lazy"] { content-visibility:auto; }
.card.bg-primary,.card.bg-success,.card.bg-warning,.card.bg-info { position:relative; border:0; box-shadow:0 14px 28px rgba(38,69,155,.17); }.card.bg-primary { background:linear-gradient(135deg,#345ce0,#253d9f)!important; }.card.bg-success { background:linear-gradient(135deg,#0fa878,#087a59)!important; }.card.bg-warning { background:linear-gradient(135deg,#ffd973,#f4b93d)!important; }.card.bg-info { background:linear-gradient(135deg,#39a9d6,#2472c7)!important; }.card.bg-primary::after,.card.bg-success::after,.card.bg-warning::after,.card.bg-info::after { content:''; position:absolute; width:90px; height:90px; left:-25px; bottom:-45px; border:18px solid rgba(255,255,255,.15); border-radius:50%; }.card.bg-primary .card-body,.card.bg-success .card-body,.card.bg-warning .card-body,.card.bg-info .card-body { position:relative; z-index:1; padding:1.35rem; }

.btn { border-radius:10px; font-weight:700; padding:.45rem .85rem; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; }.btn:hover { transform:translateY(-1px); }.btn-primary { border-color:var(--brand); background:var(--brand); box-shadow:0 5px 13px rgba(49,87,213,.2); }.btn-primary:hover,.btn-primary:focus { border-color:var(--brand-deep); background:var(--brand-deep); }.btn-success { background-color:var(--success); border-color:var(--success); }.btn-outline-primary { color:var(--brand); border-color:#c7d2ff; }.btn-outline-primary:hover { background:var(--brand); border-color:var(--brand); }.btn-sm { border-radius:8px; }
.form-label { margin-bottom:.42rem; color:#3d485b; font-size:.87rem; font-weight:700; }.form-control,.form-select,.input-group-text { min-height:43px; border-color:#dfe5ef; border-radius:10px; color:var(--ink); background-color:#fff; }.input-group > .form-control { border-radius:0 10px 10px 0; }.input-group > .input-group-text { border-radius:10px 0 0 10px; color:var(--brand); background:#f8faff; }.form-control:focus,.form-select:focus { border-color:#8298ef; box-shadow:0 0 0 .22rem rgba(49,87,213,.12); }textarea.form-control { min-height:auto; }

.nav-tabs { gap:.3rem; border:0; padding:.3rem; border-radius:12px; background:#eaf0fa; width:fit-content; max-width:100%; overflow-x:auto; flex-wrap:nowrap; }.nav-tabs .nav-link { white-space:nowrap; cursor:pointer; border:0; border-radius:9px; color:#586780; font-size:.86rem; font-weight:700; }.nav-tabs .nav-link:hover { color:var(--brand); }.nav-tabs .nav-link.active { color:var(--brand); background:#fff; box-shadow:0 3px 9px rgba(34,55,100,.1); }
.table { margin-bottom:0; color:#314057; vertical-align:middle; }.table > :not(caption) > * > * { padding:.82rem .7rem; border-bottom-color:#edf0f5; }.table thead th { color:#657188; font-size:.78rem; font-weight:800; white-space:nowrap; background:#f8faff; }.table-hover tbody tr { transition:background-color .15s ease; }.table-hover tbody tr:hover { background-color:#f5f7ff; }.table-responsive { border:1px solid #edf0f5; border-radius:12px; }.badge { padding:.42rem .62rem; border-radius:7px; font-size:.74rem; font-weight:700; }.alert { border:0; border-radius:12px; }.modal-content { border:0; border-radius:18px; box-shadow:0 24px 60px rgba(20,32,59,.22); }.modal-header,.modal-footer { border-color:var(--line); padding:1rem 1.25rem; }.modal-title,.modal-header h5 { font-weight:800; }.pagination { gap:.28rem; margin-bottom:0; }.page-link { border:0; border-radius:8px!important; color:var(--brand); }.page-item.active .page-link { background:var(--brand); }#clientSelect { max-height:150px; overflow-y:auto; border-radius:10px; }#clientSelect option { padding:7px; }

.login-page { overflow:hidden; background:radial-gradient(circle at 85% 10%,#7694ff 0,transparent 32%),linear-gradient(135deg,#121c40,#2947a8 60%,#3c76dd); }.login-page::before,.login-page::after { content:''; position:fixed; z-index:0; border-radius:50%; pointer-events:none; }.login-page::before { width:480px; height:480px; right:-150px; bottom:-230px; border:55px solid rgba(255,255,255,.06); }.login-page::after { width:220px; height:220px; left:9%; top:8%; background:rgba(255,255,255,.05); }.login-page .container { position:relative; z-index:1; }.login-page .card { background:rgba(255,255,255,.98); box-shadow:0 28px 70px rgba(4,14,47,.32); }.login-page .card-body { padding:3rem!important; }.login-page .display-1 { display:inline-grid; place-items:center; width:86px; height:86px; border-radius:24px; background:var(--brand-soft); font-size:2.5rem; }.login-page h3 { font-weight:800; font-size:1.35rem; }.login-page .btn-lg { min-height:50px; }
.btn-back { position:fixed; bottom:22px; right:22px; z-index:1050; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:0; border-radius:14px; color:#fff; background:var(--ink); font-size:1.1rem; box-shadow:0 8px 20px rgba(23,32,51,.25); transition:transform .15s,box-shadow .15s; }.btn-back:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(23,32,51,.32); }
@media (max-width:768px) { .navbar { padding:.7rem 1rem; min-height:auto; }.navbar .container-fluid { justify-content:center; }.navbar-brand { width:100%; text-align:center; }.navbar-text { margin-inline-start:0; }.navbar .btn { font-size:.75rem; padding:.36rem .55rem; }.container-fluid.mt-3,.container-fluid.mt-4 { padding:0 1rem 1.5rem; }.card-body { padding:1rem; }.login-page .card { margin:1rem; }.login-page .card-body { padding:2rem!important; }.nav-tabs { width:100%; }.btn-back { width:42px; height:42px; right:14px; bottom:14px; } }
@media print { .btn-back,.navbar,.btn,.nav-tabs { display:none!important; } body { background:#fff; }.card { box-shadow:none; } }

/* Kazanji visual identity, shared by the sign-in screen and workshop app. */
:root { --ink:#201f1d; --canvas:#fcfbf9; --line:#e9e4de; --brand:#a58d6e; --brand-deep:#826d53; --brand-soft:#f4f0eb; --success:#66816c; --radius:15px; --shadow:0 12px 30px rgba(58,47,34,.08); }
* { font-family:'Alexandria','Cairo',sans-serif; }
body { color:var(--ink); background:var(--canvas); }
body:not(.login-page)::before { background:radial-gradient(circle at 84% -25%,rgba(165,141,110,.14),transparent 42%),linear-gradient(135deg,#f7f3ee 0%,#fcfbf9 66%,#f4f5f0 100%); }
.navbar { background:linear-gradient(110deg,#282622,#494237 56%,#78684f)!important; box-shadow:0 6px 22px rgba(42,35,27,.16); }
.navbar-brand { display:inline-flex; align-items:center; gap:.2rem; }
.navbar-brand i { display:none!important; }
.navbar-brand::before { content:''; display:inline-block; flex:0 0 28px; width:28px; height:42px; margin-inline-end:.45rem; background:url('/images/kazanji-group-logo.svg') center/contain no-repeat; }
.navbar .btn:hover { color:#594a37; }
.btn-primary { border-color:var(--brand); background:var(--brand); box-shadow:0 5px 13px rgba(99,79,53,.18); }
.btn-primary:hover,.btn-primary:focus { border-color:var(--brand-deep); background:var(--brand-deep); }
.btn-outline-primary { color:var(--brand-deep); border-color:#d8cbb8; }
.btn-outline-primary:hover { background:var(--brand); border-color:var(--brand); }
.form-control:focus,.form-select:focus { border-color:#b9a58a; box-shadow:0 0 0 .22rem rgba(165,141,110,.16); }
.card-header i { color:var(--brand-deep); }
.page-item.active .page-link { background:var(--brand); }
.image-optimization-status { color:#6d6862; }
.image-optimization-status[data-state="success"] { color:#52745b; }
.image-optimization-status[data-state="warning"] { color:#9b6c29; }
.login-page { overflow:auto; background:radial-gradient(circle at 85% 10%,#d9cbb7 0,transparent 34%),linear-gradient(135deg,#282622,#51483b 62%,#82715a); }
.login-page::before { border-color:rgba(255,255,255,.08); }
.login-page::after { background:rgba(255,255,255,.06); }
.login-page .card { border:1px solid rgba(165,141,110,.2)!important; background:rgba(252,251,249,.98); box-shadow:0 28px 70px rgba(32,31,29,.28); }
.login-page .card-body { padding:2.75rem!important; }
.login-logo { display:block; width:64px; height:94px; margin:0 auto 4px; object-fit:contain; }
.login-brand-name { margin:0 0 8px; color:var(--brand-deep); font-weight:800; font-size:1.05rem; letter-spacing:.02em; }
.login-page h3 { margin-top:.15rem!important; color:var(--ink); font-size:1.28rem; }
.login-page .btn-primary { color:#fff; }
.login-page .btn-lg { min-height:52px; }
.login-page .form-control { background:#fff; }
.workshop-admin-page .sidebar { background:rgba(248,245,240,.92)!important; border-inline-end:1px solid var(--line); }
.workshop-admin-page .sidebar .nav-link { color:#5c554c; border-radius:9px; margin:2px 8px; padding:10px 13px; }
.workshop-admin-page .sidebar .nav-link:hover { color:var(--brand-deep); background:#f0e9df; }
.workshop-admin-page .sidebar .nav-link.active { color:#fff; background:var(--brand)!important; }
.workshop-admin-page .sidebar .nav-link i { color:inherit; }
.dashboard-page .card.bg-primary { background:linear-gradient(135deg,#a58d6e,#806a50)!important; }
.dashboard-page .card.bg-success { background:linear-gradient(135deg,#80947a,#5d735e)!important; }
.dashboard-page .card.bg-info { background:linear-gradient(135deg,#9a927e,#706754)!important; }
.dashboard-page .card.bg-warning { background:linear-gradient(135deg,#ead8ad,#cfb77f)!important; }
@media (max-width:768px) {
  .navbar-brand::before { flex-basis:24px; width:24px; height:36px; }
  .login-page .card-body { padding:1.75rem!important; }
}