/* =========================================
   PrintFlow — Unified App Styles (Clean)
   ========================================= */

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; min-height: 100vh; background:#f4f4f4; }
body{
  display:flex; flex-direction:column; overflow:hidden;
  font-family: Arial, sans-serif; color:#111827;
}

/* ---------- Tokens ---------- */
:root{
  --header-h: 60px;
  --footer-h: 44px;
  --sidebar-w: 200px;

  /* layout math */
  --main-pad-y: 24px;
  --col-pad-y: 20px;
  --col-head: 28px;
  --list-bottom-pad: 14px;
}

/* =========================================
   App Frame
   ========================================= */
header{
  height: var(--header-h);
  background: rgb(223,222,222);
  color: rgb(94,92,92);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.header-left{ display:flex; align-items:center; gap:10px; }
.logo{ width:40px; }
.title{ font: 700 20px/1 'Archivo Black', sans-serif; letter-spacing:.5px; }
.user-info{ font: 400 14px/1.2 'Nunito', sans-serif; color:#333; }

.layout{
  flex:1 1 auto; min-height:0;
  height: calc(100dvh - var(--header-h) - var(--footer-h));
  display:flex; overflow:hidden;
}

.side-bar{
  background: rgb(1,50,107);
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: 100%; padding-top:30px;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto;
}
.nav-link{
  width:100%; text-align:left; padding:12px 20px; margin-bottom:8px;
  border-radius:4px; color:#fff; text-decoration:none;
  font: 500 15px/1.1 'Nunito', sans-serif; transition: background-color .2s ease;
}
.nav-link:hover{ background: rgba(255,255,255,.1); }
.nav-link:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; border-radius:6px; }
.nav-link.active{ border-left:4px solid #ffd700; background:#ffffff22; color:#ebd023; }

.main-content{
  flex:1 1 auto; height:100%;
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:#f4f4f4; padding:8px 20px 16px;
}

footer,
.app-footer{
  height: var(--footer-h);
  flex: 0 0 var(--footer-h);
  background:#f8fafc; color:#64748b;
  border-top:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px;
  font: 500 13px/1.2 'Nunito', Arial, sans-serif;
}
.footer-left{ white-space:nowrap; }
.footer-right{ display:flex; align-items:center; gap:10px; }
.footer-btn{
  padding:6px 10px; border:1px solid #cbd5e1; background:#fff;
  border-radius:6px; font-size:12px; cursor:pointer;
}
.footer-btn:hover{ background:#f1f5f9; }
.footer-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* =========================================
   Buttons
   ========================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px;
  background:#fff; color:#334155; font:600 13px/1 'Nunito', sans-serif;
  cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{ background:#f8fafc; border-color:#94a3b8; }
.btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-small{ height:32px; padding:6px 10px; font-size:12px; }

.btn-primary{ background:#2f9a52; border-color:#2f9a52; color:#fff; }
.btn-primary:hover{ filter:brightness(0.98); }
.btn.danger{ background:#fff; color:#b42318; border-color:#f3b4b4; }
.btn.danger:hover{ background:#fdecec; }

.btn-success{ background:#16a34a; border-color:#16a34a; color:#fff; }
.btn-success:hover{ filter:brightness(.98); }
.btn-danger{ background:#dc2626; border-color:#dc2626; color:#fff; }
.btn-danger:hover{ filter:brightness(.98); }

/* special delete button on cards */
.btn.btn-delete-job{
  border:1px solid #e11; background:#fff; color:#e11;
  border-radius:10px; padding:6px 10px; font-size:12px; cursor:pointer;
}
.btn.btn-delete-job:hover{ background:#fee; }

/* Add-style button */
.add-btn{
  width:100%; padding:6px 10px; border:none; border-radius:4px;
  background:#007bff; color:#fff; font-size:13px; cursor:pointer;
}
.add-btn:hover{ background:#005bb5; }
.add-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }
.add-btn.success{ background:#16a34a; }
.add-btn.danger{ background:#dc2626; }

/* =========================================
   Kanban
   ========================================= */
.kanban{
  flex:1 1 auto; display:flex; align-items:flex-start; gap:15px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
}
.kanban::-webkit-scrollbar{ height:8px; }
.kanban::-webkit-scrollbar-thumb{ background:#ccc; border-radius:4px; }

.column{
  flex: 0 0 320px; width:320px; max-width:320px;
  display:flex; flex-direction:column;
  background:#fff; border-radius:6px; padding:10px;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.column h3{
  font: 500 13px/1.2 'Rubik', sans-serif; color:#414141; margin-bottom:10px;
}

.card-list{
  flex: 0 1 auto; min-height:0; overflow-y:auto;
  padding-right:6px; padding-bottom: var(--list-bottom-pad);
  max-height: calc(100dvh - var(--header-h) - var(--footer-h) - var(--main-pad-y) - var(--col-pad-y) - var(--col-head));
}
.card-list::-webkit-scrollbar{ width:8px; }
.card-list::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }

.card{
  width:100%; background:#f0f0f0; border-radius:4px; border-left:4px solid #007bff;
  padding:10px; margin-bottom:10px; font: 400 12px/1.4 'Nunito', sans-serif; cursor:pointer;
}
.card:hover{ background:#e6f0ff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.card:active{ cursor:grabbing; }
.card small{ display:block; font-size:12px; color:#666; margin-top:6px; line-height:1.5; }

.column, .card, .card-files{ min-width:0; }
.card, .card *{ word-break:normal; }
.card-list > .card:last-child{ margin-bottom:28px; }

/* File list inside card */
.card-files{ margin-top:6px; }
.file-status-summary{ margin:.25rem 0 .35rem; display:flex; gap:.35rem; flex-wrap:wrap; }

/* Scoped pills to avoid conflicts */
.file-status-list .pill{
  font-size:.78rem; padding:.12rem .5rem; border-radius:999px; background:#f3f4f6; color:#374151;
}
.table .pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; min-width:80px; padding:0 10px;
  border:1px solid #d1d5db; border-radius:999px; background:#fff;
  color:#374151; font-size:12px; font-weight:600;
}

.pill-ok{ background:#ecfdf5; color:#065f46; }
.pill-bad{ background:#fee2e2; color:#991b1b; }

.file-status-list{ list-style:none; margin:.25rem 0 0; padding:0; }
.file-status-list li{ display:flex; align-items:flex-start; gap:.5rem; padding:.18rem 0; }
.file-status-list .icon{ width:1rem; text-align:center; font-weight:700; margin-top:.1rem; }
.file-status-list .file-main{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.file-status-list .name{ display:inline-block; max-width:100%; overflow-wrap:anywhere; text-decoration:none; }
.file-status-list a.name:hover, .file-status-list a.name:focus-visible{ text-decoration:underline; outline:0; }
.file-status-list .comment{ margin-top:.15rem; font-size:12px; color:#6b7280; font-style:italic; }
.file-status-list li.s-approved .icon{ color:#16a34a; }
.file-status-list li.s-rejected .icon{ color:#dc2626; }
.file-status-list li.s-approved .name{ color:#065f46; }
.file-status-list li.s-rejected .name{ color:#991b1b; }
.show-more{ font-size:12px; color:#666; cursor:pointer; user-select:none; }
.show-more:hover, .show-more:focus-visible{ color:#333; text-decoration:underline; outline:0; }

/* Pending rows */
.file-status-list li.s-pending .icon{ color:#9ca3af; }
.file-status-list li.s-pending .name{ color:#374151; }

/* =========================================
   Modals
   ========================================= */
.modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.4);
}
.modal-content{
  width:400px; margin:100px auto; padding:20px; max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.2);
  font-family:'Nunito', sans-serif;
}
.close{ float:right; font-size:20px; cursor:pointer; }

/* inputs inside modals */
.modal-content input,
input[type="file"]{
  width:100%; padding:8px; margin:5px 0 15px;
  border:1px solid #ccc; border-radius:4px; font-size:14px;
}
.modal-content textarea{
  width:100%; padding:8px; margin:5px 0 15px; resize:vertical;
  border:1px solid #ccc; border-radius:4px;
}
.modal-content label{ font:500 13px/1 'Nunito', sans-serif; color:#333; margin-bottom:4px; display:block; }
.modal-content .readonly-wrapper{ margin-bottom:10px; }
.modal-content .readonly{
  padding:8px 10px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; color:#111827;
}

/* Global selects */
select{
  width:100%; padding:10px; margin-bottom:16px;
  border:1px solid #ccc; border-radius:8px; background:#fff; font-size:16px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px;
  transition:border-color .2s;
}
select:focus{ border-color:#007bff; outline:0; box-shadow:0 0 5px rgba(0,123,255,.25); }

/* =========================================
   Admin Forms
   ========================================= */
.panel{
  width:100%; max-width:560px; margin:20px auto; padding:18px;
  background:#fff; border:1px solid #e9ecef; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.panel h2{ font:500 18px/1.2 'Rubik', sans-serif; color:#333; margin-bottom:12px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{ display:block; font:400 13px/1.2 'Nunito', sans-serif; color:#444; margin-bottom:6px; }
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="password"],
.form-grid select{
  width:100%; padding:10px 12px; border:1px solid #cfd4da; border-radius:6px; background:#fff;
  font:400 14px/1.2 'Nunito', sans-serif;
}
.form-grid small.help{ display:block; color:#666; font-size:12px; margin-top:4px; min-height:16px; }
.form-actions{ margin-top:14px; }

.alert{ padding:10px 12px; border-radius:6px; margin-bottom:14px; font-size:14px; }
.alert-ok{  background:#e8f7ee; border:1px solid #bfe8c9; color:#11643a; }
.alert-err{ background:#fdecec; border:1px solid #f5b5b5; color:#9b1c1c; }

@media (max-width: 720px){
  .form-grid{ grid-template-columns:1fr; }
  .panel{ max-width:100%; }
}

/* =========================================
   Login
   ========================================= */
.login-body{
  font-family: Arial, sans-serif; background:#f4f6f8;
  display:flex; justify-content:center; align-items:center;
  height:100vh; margin:0;
}
.login-box{
  background:#fff; width:100%; max-width:400px;
  padding:30px 40px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.login-box h2{ text-align:center; margin-bottom:25px; color:#333; }
.login-box label{ display:block; margin:10px 0 5px; color:#555; }
.login-box input[type="email"],
.login-box input[type="password"],
.login-box button{
  width:100%; padding:10px; font-size:16px; border-radius:6px; border:1px solid #ccc; margin-bottom:15px;
}
.login-box button{ background:#007bff; color:#fff; border:none; cursor:pointer; }
.login-box button:hover{ background:#005bb5; }
.login-box .error{ color:red; margin-bottom:15px; text-align:center; }

/* =========================================
   KPIs / Proof Counter
   ========================================= */
.proof-counter{
  margin:10px 0 20px; padding:12px 14px;
  background:#f7fbff; border:1px solid #d9ecff; color:#204a78; border-radius:8px;
  font: 400 15px/1.3 'Nunito', sans-serif;
}
.proof-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.proof-fig strong{ font-size:18px; }
.proof-fig .muted{ color:#6c757d; margin-left:6px; }
.proof-month{ color:#3a6ea5; font-size:12px; margin-left:8px; }
.progress-wrap{ width:100%; height:8px; background:#eaf2fb; border:1px solid #e0e8f5; border-radius:6px; overflow:hidden; }
.progress-bar{ height:100%; background:#3b82f6; transition:width .3s ease; }
.note.warn{ margin-top:8px; font-size:13px; color:#8a2b0d; background:#fff4e5; border:1px solid #ffd7a8; padding:6px 8px; border-radius:6px; }

.stats-row{
  display:flex; justify-content:flex-end; gap:12px;
  padding:0; margin:0 0 8px 0; border-bottom:1px solid #e5e7eb;
}
.stat-card{
  background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:4px 10px; min-width:92px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.stat-value{ font-size:14px; font-weight:700; }
.stat-blue .stat-value{ color:#3b82f6; }
.stat-green .stat-value{ color:#16a34a; }
.stat-red .stat-value{ color:#dc2626; }

/* =========================================
   Toast
   ========================================= */
.toast{
  visibility:hidden; opacity:0;
  position:fixed; left:50%; top:200px; transform:translateX(-50%);
  min-width:250px; max-width:90%;
  background:#323232; color:#fff; border-radius:8px; padding:14px 20px;
  z-index:9999; font-size:16px; box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:opacity .5s ease, top .5s ease;
}
.toast.show{ visibility:visible; opacity:1; top:140px; }

/* =========================================
   Manage Users
   ========================================= */
.manage-heading{
  display:flex; align-items:center; gap:10px; margin:8px 0 10px;
  font:700 22px/1.2 'Archivo Black', sans-serif; color:#1f2937;
}
.manage-table-wrap{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}

/* toolbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; }
.topbar .search{ display:flex; align-items:center; gap:8px; flex:1; }
.topbar .search input[type="text"]{
  flex:1; min-width:280px; padding:10px 12px; border:1px solid #cfd4da; border-radius:8px;
  background:#fff; font:400 14px/1.2 'Nunito', sans-serif; color:#333;
}

/* table */
.table{
  width:100%; border-collapse:collapse; table-layout:fixed;
}
.table thead th{
  background:#f8fafc; color:#475569; font:600 12px 'Nunito', sans-serif;
  text-align:left; text-transform:uppercase; letter-spacing:.02em;
  border-bottom:1px solid #e5e7eb; padding:12px 10px;
}
.table tbody td{
  border-bottom:1px solid #eef2f7; padding:12px 10px; vertical-align:middle;
}
.table tbody tr:hover{ background:#fafbff; }

/* column widths */
.table th.col-id,      .table td.col-id      { width:56px; }
.table th.col-role,    .table td.col-role    { width:110px; }
.table th.col-status,  .table td.col-status  { width:120px; }
.table th.col-created, .table td.col-created { width:220px; white-space:nowrap; }
.table th.col-actions, .table td.col-actions { width:300px; white-space:nowrap; }

/* user cell */
.user-cell .name{ font-weight:700; color:#111827; }
.user-cell .email{ color:#64748b; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* badges */
.badge{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid transparent;
}
.badge.ok{ background:#e8f7ee; color:#11643a; border-color:#bfe8c9; }
.badge.muted{ background:#f1f5f9; color:#334155; border-color:#e2e8f0; }

/* actions row */
.row-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.row-actions a.btn{ text-decoration:none; }
.row-actions .btn{ height:32px; }

/* pagination */
.pagination{
  display:flex; align-items:center; gap:6px; margin-top:16px; flex-wrap:wrap;
}
.pagination a, .pagination strong{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 10px; border-radius:8px; text-decoration:none;
  border:1px solid #e5e7eb; background:#fff; color:#334155; font:600 13px/1 'Nunito', sans-serif;
}
.pagination a:hover{ background:#f8fafc; }
.pagination strong{ background:#2f9a52; border-color:#2f9a52; color:#fff; }
.pagination .total{ margin-left:8px; color:#64748b; }

/* responsive tweaks */
@media (max-width:1200px){
  .table th.col-actions, .table td.col-actions{ width:auto; }
}
@media (max-width:860px){
  .topbar{ flex-direction:column; align-items:stretch; }
  .topbar .search input[type="text"]{ min-width:0; }
  .table thead th.col-created, .table tbody td.col-created{ display:none; }
}
@media (max-width:560px){
  .table thead th.col-id, .table tbody td.col-id{ display:none; }
}

/* Center Role + Status columns */
.table th.col-role, .table td.col-role,
.table th.col-status, .table td.col-status { text-align:center; }

/* Created column style */
.table td.col-created { font-size:12px; color:#475569; }

/* =========================================
   Feedback & Artwork status
   ========================================= */
.feedback-chip{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font:600 12px/1 'Nunito', sans-serif; background:#f1f5f9; color:#334155; border:1px solid #e2e8f0;
}
.fb-approved{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.fb-rejected{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.feedback-snippet{ font-size:12px; color:#555; margin-top:4px; }

.artwork-status,
.artwork-proofing,
.artwork-approved,
.artwork-rejected{
  display:inline-block; margin-top:6px; font-size:12px; line-height:1.2;
  padding:0; background:transparent !important; border:none !important; border-radius:0 !important;
}
.artwork-status{   color:#2563eb; }  /* Prepress */
.artwork-proofing{ color:#b45309; }  /* On Proof */
.artwork-approved{ color:#065f46; }  /* Approved */
.artwork-rejected{ color:#991b1b; }  /* Rejected */

/* =========================================
   Utilities
   ========================================= */
.hidden{ display:none !important; }


/* ===== Compact Status History (modal, no dots) ===== */
.job-history{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid #e5e7eb;
  font-family:'Nunito', sans-serif;
}

.job-history h4{
  margin:0 0 6px;
  font:600 13px/1.2 'Rubik', sans-serif;
  color:#334155;
}

.job-history ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:12px;
  line-height:1.4;
}

.job-history li{
  padding:6px 0;
  color:#374151;
  border-left:2px solid #e5e7eb; /* optional vertical guide */
  padding-left:8px;              /* space away from line */
}

.job-history li strong{
  display:block;
  font-weight:600;
  font-size:12.5px;
  color:#111827;
}

.job-history li .by{
  display:block;
  font-size:11px;
  color:#6b7280;
  margin-top:1px;
}

.job-history li small{
  display:block;
  margin-top:1px;
  font-size:11px;
  color:#9ca3af;
}

.job-history li:last-child{ padding-bottom:0; }

/* Artwork status colors inside cards */
.card small.artwork-status   { color:#2563eb !important; }  /* Uploaded (blue)   */
.card small.artwork-proofing { color:#b45309 !important; }  /* On Proof (orange) */
.card small.artwork-approved { color:#065f46 !important; }  /* Approved (green)  */
.card small.artwork-rejected { color:#991b1b !important; }  /* Rejected (red)    */


/* Make the modal itself scroll when viewport is very short */
.modal-content{
  max-height:92vh;
  overflow:auto;          /* allow overall scroll if needed */
  display:flex;
  flex-direction:column;
  min-height:0;           /* enables child overflow areas */
}

/* --- Compact, scrollable Status History --- */
.job-history{
  --history-max: 200px;   /* tweak 160–240px to taste */
  margin-top:12px;
  border-top:1px solid #e5e7eb;
  padding-top:8px;

  max-height:var(--history-max);
  overflow:auto;

  background:#fafafa;
  border-radius:8px;
  padding:8px 10px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #f3f4f6;
}

/* keep the section title visible while scrolling */
.job-history h4{
  position:sticky;
  top:0;
  background:#fafafa;
  padding-bottom:4px;
  margin:0 0 6px;
  font:600 13px/1.2 'Rubik', sans-serif;
  color:#334155;
}

/* compact list + no dots */
.job-history ul{ list-style:none; margin:0; padding:0; font-size:12px; line-height:1.35; }
.job-history li{
  padding:4px 0;                 /* tighter */
  color:#374151;
  border-left:2px solid #e5e7eb;
  padding-left:8px;
  margin-bottom:4px;
}
.job-history li:last-child{ margin-bottom:0; }
.job-history li strong{ display:block; font-weight:600; font-size:12.5px; color:#111827; }
.job-history li .by{ display:block; font-size:11px; color:#6b7280; margin-top:1px; }
.job-history li small{ display:block; margin-top:1px; font-size:11px; color:#9ca3af; }

/* slimmer scrollbar (optional) */
.job-history::-webkit-scrollbar{ width:8px; }
.job-history::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:6px; }

/* Delete Job button (modal only) */
#deleteJobBtn {
  display:block;
  width:100%;         /* full width */
  background:#dc2626; /* red */
  border:1px solid #dc2626;
  color:#fff;
  font-weight:600;
  border-radius:6px;
  padding:10px 0;
  font-size:14px;
  cursor:pointer;
  text-align:center;
}
#deleteJobBtn:hover {
  filter:brightness(.95);
}