/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:#fafafa;color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-weight:300;letter-spacing:0.01em;overflow-x:hidden}
html{height:100%;position:fixed;width:100%;overflow:hidden}
body{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;touch-action:pan-y}
a{color:#3b82f6;text-decoration:none;font-weight:400}
.container{max-width:1100px;margin:18px auto;padding:0 14px}
body.nav-open{overflow:hidden;position:fixed;width:100%}

/* Help collapsible */
.collapsible-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;overflow:hidden}
.collapsible-header{display:flex;align-items:center;justify-content:space-between;padding:14px;cursor:pointer;background:#fafafa;border-bottom:1px solid #e5e7eb;transition:background 0.2s}
.collapsible-header:hover{background:#f3f4f6}
.collapsible-header h2{margin:0;font-size:1rem;font-weight:700;color:#0f172a}
.collapsible-header .chevron{display:inline-block;width:20px;height:20px;text-align:center;font-size:14px;color:#64748b;transition:transform 0.3s;flex-shrink:0}
.collapsible-header.open .chevron{transform:rotate(180deg)}
.collapsible-body{display:none;padding:14px;background:#fff}
.collapsible-body.open{display:block}
.help-contact-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px !important}
@media (max-width:768px){
 .help-contact-grid{grid-template-columns:1fr !important}
}
.collapsible-card .collapsible-actions{margin-top:12px;text-align:center}
.collapsible-card .toggle-collapsible{width:100%}

/* Settings mobile nav and grid */
.settings-grid{display:grid;grid-template-columns:280px 1fr;gap:20px}
.settings-mobile-nav{display:none}
@media (max-width:768px){
 .settings-grid{display:block}
 .settings-sidebar{display:none}
 .settings-mobile-nav{display:block;margin-bottom:12px}
}

/* Header / nav */
.app-header{display:none;flex-direction:column;gap:6px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:10px 14px;position:sticky;top:0;z-index:1010;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.app-header__top{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.mobile-today{display:none;color:#64748b;font-size:.9rem;font-weight:600;width:100%;}
.brand-block{display:flex;align-items:center;gap:10px}
.brand-block.small .brand-logo{height:42px}
.brand-meta{display:flex;flex-direction:column;gap:2px}
.brand-text{font-weight:800;font-size:1rem;color:#0f172a}
.today{font-size:.85rem;color:#64748b}

.burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;padding:8px}
.burger span{display:block;height:2px;background:#111827;border-radius:2px}
.burger.close{font-size:26px;align-items:center;justify-content:center;gap:0}

.mobile-nav{position:fixed;inset:0 0 0 auto;width:72%;max-width:280px;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transform:translateX(100%);transition:transform .2s ease;z-index:1100;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.mobile-nav__links{display:flex;flex-direction:column;gap:10px}
.mobile-nav .nav-link{font-size:1rem;padding:10px 0;border-bottom:1px solid #f3f4f6;color:#0f172a}
.mobile-nav .btn-exit-demo{margin-top:6px}
.mobile-nav__overlay{position:fixed;inset:0;background:rgba(0,0,0,0.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1090}
.mobile-nav__overlay.show{opacity:1;pointer-events:auto}
/* removed desktop toggle button styles */

/* Header / nav (2 lignes, centré) */
.topbar{display:flex;flex-direction:column;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:8px 12px}
.topbrand{display:flex;align-items:center;gap:10px}
.brand-logo{height:55px;width:auto;max-width:240px;object-fit:contain;border-radius:4px}
.brand-text{font-weight:800}
.topnav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.topnav a{padding:6px 8px;border-radius:8px}
.topnav a:hover{background:#e5e7eb}
.today{font-size:.85rem;color:#64748b}

/* Page blocks */
.page-title{display:flex;justify-content:space-between;align-items:flex-end;margin:14px 0}
.page-title.center { justify-content: center; }

.h1{font-size:1.75rem;font-weight:300;letter-spacing:0.02em;color:#0f172a}
.small{font-size:.92rem;color:#64748b}
.card{background:#fff;border:1px solid #f1f5f9;border-radius:16px;padding:20px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.card.dim{background:#f0f0f0 !important;color:#111827}
.card.sent{background:#fff7ed}
.card.paid{background:#ecfdf5}
/* 👇 Nouveau style pour retard */
.card.late{background:#ffe5e5 !important; border-color:#fca5a5 !important;}

/* Flash messages */
.flash-messages{margin:10px 0;}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:8px;font-weight:600}
.flash.success{background:#ecfdf5;color:#065f46;border:1px solid #10b981}
.flash.error{background:#fee2e2;color:#991b1b;border:1px solid #dc2626}
.flash.warning{background:#fef3c7;color:#92400e;border:1px solid #f59e0b}

/* Logout link styling */
.logout-link{color:#dc2626 !important;font-weight:700 !important;}

/* Client logos */
.client-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.client-logo{height:32px;width:auto;max-width:100px;object-fit:contain;vertical-align:middle;margin-right:6px}
.client-name{font-weight:700;font-size:1rem}
.client-invoicing{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chk{font-size:.85rem;color:#475569}

/* Tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #eaeaea;text-align:left;vertical-align:top}
.table th{color:#4b5563;border-bottom:2px solid #e5e7eb}
.table tr:hover td{background:#fafafa}
.right{text-align:right}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:#3b82f6;border:0;color:#fff;padding:10px 18px;border-radius:10px;cursor:pointer;font-weight:400;line-height:1;letter-spacing:0.02em;transition:all 0.2s ease}
.btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.25)}
.btn.secondary{background:#e2e8f0;color:#0f172a}
.btn.secondary:hover{background:#cfd8e3}
.gap-sm{gap:8px}

/* Forms / modal */
.input, select, textarea{width:100%;padding:11px 14px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#1f2937;font-weight:300;font-size:0.95rem;transition:all 0.2s ease}
.input:focus, select:focus, textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.input.readonly{background:#f3f4f6;color:#374151}
.input:disabled, select:disabled, textarea:disabled, button:disabled{
  opacity:0.6;
  cursor:not-allowed;
  pointer-events:none;
  user-select:none;
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.space-between{justify-content:space-between}

.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:12px;overflow:hidden}
.modal{width:100%;max-width:720px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 15px 40px rgba(0,0,0,.18);padding:16px;max-height:90vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-title{font-size:18px;font-weight:800}
.modal-close{background:transparent;border:0;font-size:22px;cursor:pointer;color:#475569}
.field-row{margin:10px 0}
.inline-triplet{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:8px}
.hint.hidden{display:none}
.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* KPI rows (monthly) */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(10px,1fr));gap:12px;margin:12px 0;overflow-x:auto}
.kpis--client{margin-top:10px}
.kpi{background:#fff;border:1px solid #f1f5f9;border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.kpi .kpi-title{font-size:.875rem;color:#64748b;margin-bottom:6px;font-weight:400;letter-spacing:0.01em}
.kpi .kpi-value{font-size:1.5rem;font-weight:300;letter-spacing:0.02em}
.kpis--global .kpi-net{background:#ecf2ff !important; }
.kpis--client .kpi-net{background:#fff !important; }
/* KPI colors based on card status */
.card.sent .kpi{background:#fef3e2 !important;border-color:#fed7aa !important}
.card.paid .kpi{background:#d1fae5 !important;border-color:#a7f3d0 !important}
/* Job rows colors based on card status */
.card.sent .job-row{background:#fef3e2 !important}
.card.paid .job-row{background:#d1fae5 !important}
.card.sent .responsive-jobs tbody tr{background:#fef3e2 !important}
.card.paid .responsive-jobs tbody tr{background:#d1fae5 !important}
@media (max-width:768px){
 .kpis { grid-template-columns: repeat(3, minmax(1px, 1fr)); gap: 8px; margin: 0px 0 16px 0; overflow-x: auto}
 .kpi { padding: 10px 6px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 70px; }
 .kpi .kpi-title{font-size:0.7rem;margin-bottom:auto;line-height:1.2}
 .kpi .kpi-value{font-size:0.95rem;margin-top:4px;line-height:1.2;word-spacing:-0.15em}
 .roles-wrap td { text-align: right !important; }
 .roles-wrap td input,
 .roles-wrap td select { width: auto; display: inline-block; }
}

/* Statistics charts */
.chart-box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin:10px 0}
.chart-title{font-weight:800;margin-bottom:8px}
.chart-total{font-size:.9rem;color:#64748b;margin-top:4px}
.chart-canvas{width:100%;height:300px !important;display:block}
/* Monthly header layout */
.monthly-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.monthly-title{margin:0}
.monthly-nav{display:flex;gap:8px;align-items:center}
@media (max-width:768px){
 .monthly-header{flex-direction:column;align-items:center}
 .monthly-nav{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
 .monthly-nav .btn{width:100%;font-size:0.85rem;white-space:nowrap}
 .open-bokio{width:100%}
}

/* Responsive table pattern for monthly jobs */
@media (max-width:768px){
 .responsive-jobs table thead{display:none}
 .responsive-jobs table, .responsive-jobs tbody, .responsive-jobs tr, .responsive-jobs td{display:block;width:100%;margin:0;padding:0}
 .responsive-jobs tbody tr{border:1px solid #e5e7eb;border-radius:8px;background:#fff;margin-bottom:6px;overflow:hidden}
 .responsive-jobs .job-date-row{padding:10px;cursor:pointer;display:flex !important;justify-content:space-between;align-items:center;font-weight:600;border:0 !important}
 .responsive-jobs .job-details{padding:10px;border-top:1px solid #e5e7eb;background:#f9fafb}
 .responsive-jobs td{display:flex;justify-content:space-between;gap:8px;padding:6px 4px;border:0;font-size:0.9rem}
 .responsive-jobs td::before{content:attr(data-label);font-weight:600;color:#6b7280}
 .responsive-jobs td.right{justify-content:space-between}
}

/* Clients: responsive tables and modals */
@media (max-width:768px){
 .clients-wrap table thead{display:none}
 .clients-wrap table, .clients-wrap tbody, .clients-wrap tr, .clients-wrap td{display:block;width:100%}
 .clients-wrap tr{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:10px;margin-bottom:12px}
 .clients-wrap td{display:flex;justify-content:space-between;gap:8px;padding:6px 4px;border:0}
 .clients-wrap td::before{content:attr(data-label);font-weight:600;color:#6b7280}
 .clients-wrap td[data-label="Roles"]{display:block;padding:0;margin-top:8px}
 .clients-wrap td[data-label="Roles"]::before{display:block;font-weight:600;color:#64748b;margin-bottom:8px;font-size:0.9rem;content:"Roles:"}
 .roles-wrap{margin:0 -14px 0 -14px !important;padding:0 14px 14px 14px !important;display:block !important;background:transparent;border-top:none}
 .roles-wrap table thead{display:none}
 .roles-wrap table, .roles-wrap tbody, .roles-wrap tr, .roles-wrap td{display:block;width:100%;margin:0}
 .roles-wrap tr{border:1px solid #e2e8f0;border-radius:10px;background:#fafafa;padding:12px;margin:8px 0}
 .roles-wrap td{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border:0;width:100%;font-size:0.95rem;text-align:left;gap:12px}
 .roles-wrap td::before{content:attr(data-label) ":";font-weight:500;color:#64748b;font-size:0.85rem;flex-shrink:0}
 /* Modals: ensure content fits small screens */
 #add-client-modal .modal, #edit-client-modal .modal{max-width:96vw;max-height:90vh}
 #add-client-modal .modal [style*="grid-template-columns"],
 #edit-client-modal .modal [style*="grid-template-columns"]{
   grid-template-columns:1fr !important;
 }
 /* Add job modal mobile fixes */
 #add-job-modal .modal{padding:12px;max-height:90vh;overflow-y:auto}
 #add-job-modal .modal-header{padding-bottom:8px;margin-bottom:8px}
 #add-job-modal .modal-title{font-size:1.1rem}
 #add-job-modal .field-row{margin:8px 0}
 #add-job-modal .inline-triplet{grid-template-columns:0.95fr .65fr .65fr;gap:6px}
 #add-job-modal input[type="date"]{font-size:0.85rem;padding:8px 6px}
 #add-job-modal #holiday-surcharge-row,
 #add-job-modal #night-surcharge-row{padding:8px;margin-top:8px}
  /* Jobs page modal: tighten date width so time fields stay inline */
  #modal .inline-triplet{grid-template-columns:0.85fr .7fr .7fr;gap:6px}
  #modal input[type="date"]{font-size:0.85rem;padding:8px 6px}
 
 /* Prevent body scroll when modal is open */
 body.modal-open{overflow:hidden;position:fixed;width:100%}
 
 /* PWA mobile optimization - prevent unwanted gestures */
 @media (max-width:768px){
   html,body{overscroll-behavior-y:none;overscroll-behavior-x:none}
   .modal-backdrop{overscroll-behavior:contain;touch-action:none}
   .modal{touch-action:pan-y;user-select:text;-webkit-user-select:text}
   .mobile-nav{overscroll-behavior:contain;touch-action:pan-y}
 }
 #add-job-modal .modal-actions{margin-top:12px}
 #add-job-modal label.small,
 #add-job-modal .small{font-size:0.8rem}
 #add-job-modal .vat-amount-row label{min-height:2.5em;display:flex;align-items:flex-end}
 /* Edit job modal mobile fixes */
 #add-job-modal #btn-cancel{display:none !important}
 #add-job-modal #delete-wrapper{display:block !important;margin-right:0 !important}
 #add-job-modal .modal-actions{justify-content:space-between}
 /* Add client modal mobile fixes */
 #add-client-modal .modal{max-height:95vh;overflow-y:auto;display:flex;flex-direction:column}
 #add-client-modal .modal-actions{border-top:1px solid #e5e7eb;padding-top:12px;margin-top:12px}
 /* Edit client modal mobile fixes */
 #edit-client-modal .modal{max-height:95vh;overflow-y:auto;display:flex;flex-direction:column}
 #edit-client-modal .modal-actions{border-top:1px solid #e5e7eb;padding-top:12px;margin-top:12px}
 /* Net Rate Calculator modal mobile fixes */
 #net-rate-calculator-modal .modal,
 #tutorial-net-rate-calculator-modal .modal{max-width:90vw !important;padding:12px !important}
 #net-rate-calculator-modal .modal > div,
 #tutorial-net-rate-calculator-modal .modal > div{padding:14px !important}
 /* Sling shifts info card mobile fixes */
 #sling-shifts-info{padding:12px !important;margin-bottom:15px !important}
 #sling-shifts-info > div > div:first-child{font-size:32px !important;margin-bottom:6px !important}
 #sling-shifts-info > div > div:last-child{font-size:14px !important}
}

/* Calendar CTA */
.calendar-subscribe{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:12px;margin:18px 0 22px;border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#f8fafc}
.calendar-subscribe .url{font-size:0.85rem;word-break:break-all;color:#2563eb;text-decoration:underline}

@media (max-width:768px){
 .calendar-subscribe{flex-direction:column;align-items:stretch;position:static;top:auto;z-index:auto;gap:10px;padding:16px}
 .calendar-subscribe > div:first-child {font-size:0.85rem !important;}
 .calendar-subscribe > div:first-child > div:first-child {font-size:0.85rem !important;font-weight:600 !important;}
 .calendar-subscribe > div:first-child > div:last-child {font-size:0.8rem !important;}
 .calendar-subscribe .btn{width:100%;padding:12px 16px;font-size:0.95rem}
 .calendar-subscribe .url{font-size:0.7rem;margin-top:8px;display:block;text-align:center}
}

/* Responsive */
@media (max-width:768px){
 .desktop-only{display:none}
 .app-header{display:flex;padding:10px 12px}
 .burger{display:flex}
 .brand-logo{height:42px;max-width:180px}
 .mobile-today{display:block}
 .container{padding:0 18px}
 .card{padding:12px}
 .kpis{grid-template-columns:repeat(3,minmax(15px,1fr));overflow-x:auto}
 .modal-grid{grid-template-columns:1fr}
 .inline-triplet{grid-template-columns:1fr .7fr .7fr}
 .client-header{flex-direction:column;align-items:flex-start !important}
 .client-controls{display:none !important}
 .client-invoicing-mobile{display:flex !important}
 .btn{width:100%}
}

@media (max-width:480px){
 .app-header{flex-wrap:nowrap;gap:10px}
 .mobile-today{font-size:0.85rem}
 .burger{width:40px;height:40px}
 .job-bottom{flex-direction:column;gap:4px}
}

/* Past jobs: table to cards on mobile */
.past-jobs-cards{display:none}
/* Bouton edit visible sur desktop */
.past-table-edit-btn{
  background:#f3f4f6;
  border:1px solid #d1d5db;
  border-radius:6px;
  width:32px;
  height:32px;
  cursor:pointer;
  font-size:16px;
  color:#6b7280;
  transition:all 0.2s;
  padding:0;
}
.past-table-edit-btn:hover{
  background:#e0e7ff;
  color:#2563eb;
  border-color:#2563eb;
}
.past-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:6px;position:relative}
.past-card-edit{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.9);border:1px solid #e5e7eb;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#6b7280;transition:all 0.2s;padding:0}
.past-card-edit:hover{background:#f3f4f6;color:#2563eb;border-color:#2563eb}
.past-card .row-line{display:flex;justify-content:space-between;gap:8px;font-size:0.95rem}
.past-card .row-line .label{color:#6b7280;font-size:0.9rem}
.past-card .actions{display:flex;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#4338ca;padding:6px 10px;border-radius:12px;font-size:0.85rem;font-weight:600}

@media (max-width:768px){
 .past-jobs-cards{display:none}
 .past-table{display:block}
 .table-wrap{overflow-x:auto}
 
 /* Cacher complètement la colonne Edit sur mobile */
 .past-table th:last-child,
 .past-table td:last-child {
   display: none !important;
 }
 
 /* Rendre toute la ligne cliquable */
 .past-table table tbody tr.past-job-row{
   position:relative;
   cursor: pointer;
 }
}

/* Danger delete icon buttons */
}

/* Danger delete icon buttons */
form[action^="/jobs/"] .btn.secondary.icon.danger{
  background:#dc2626 !important;  /* red-600 */
  color:#fff !important;
  width:32px; height:32px;
  padding:0;
  border-radius:8px;
  font-size:18px;
  line-height:1;
}
form[action^="/jobs/"] .btn.secondary.icon.danger:hover{
  background:#b91c1c !important;  /* red-700 */
}

/* Edit icon (crayon) */
.btn-edit {
 background: transparent;
 border: none;
 font-size: 18px;
 cursor: pointer;
 color: #2563eb;
 padding: 6px;
 border-radius: 6px;
}
.btn-edit:hover {
 background: rgba(37,99,235,0.08);
 color: #1d4ed8;
}

/* Delete button in popup */
.delete-btn {
 background:#dc2626 !important;
 color:#fff !important;
 border:0;
 padding:8px 12px;
 border-radius:8px;
 font-weight:700;
}
.delete-btn:hover { background:#b91c1c !important; }

/* Keep modal layout - ensure delete-wrapper doesn't break layout */
#delete-wrapper form { margin:0; }

/* === JOB LIST (mobile + desktop) === */

.job-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.job-filters select {
  flex: 1;
}

/* Sticky date header */
.job-date-header {
  font-weight: 400;
  color: #0f172a;
  margin-top: 28px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  background: #fafafa;
  padding: 8px 0;
  z-index: 10;
  font-size: 0.95rem;
  letter-spacing: 0.025em;
}

/* Job card */
.job-card {
  display: flex;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  align-items: center;
  border: 1px solid #f1f5f9;
  transition: all 0.2s ease;
}
.job-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #e2e8f0;
  transform: translateY(-2px);
}

/* Logo */
.job-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Monthly: larger logos in client headers */
.client-header .client-logo {
  height: 56px;
  max-width: 120px;
}

/* Text block */
.job-info {
  flex: 1;
}

.job-role {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.job-client {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 400;
  line-height: 1.3;
}

.job-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 4px;
  margin-top: 2px;
  font-weight: 300;
  line-height: 1.3;
}

/* Bottom line */
.job-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.job-amount {
  font-style: italic;
}

/* Edit button */
.job-edit {
  background: none;
  border: none;
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
}

.upcoming-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.filters {
  display: flex;
  gap: 8px;
}

.upcoming-header .title {
  justify-self: center;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.upcoming-header .actions {
  text-align: right;
}

.input.tiny {
  padding: 4px 6px;
  font-size: 13px;
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #f7f7f7;
  padding: 8px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Demo mode exit button */
.btn-exit-demo {
  background-color: #dc2626 !important;
  color: white !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px !important;
}

.btn-exit-demo:hover {
  background-color: #b91c1c !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* Sling URL form mobile fixes */
@media (max-width: 768px) {
  .sling-url-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .sling-url-form > div {
    flex: none !important;
    width: 100% !important;
  }
  .sling-url-form label {
    font-size: 0.85rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sling-url-form button {
    width: 100% !important;
    margin-top: 10px !important;
  }
  
  /* Email update form mobile fixes */
  .email-update-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .email-update-form > div {
    flex: none !important;
    width: 100% !important;
  }
  .email-update-form input {
    width: 100% !important;
  }
  .email-update-form button {
    width: 100% !important;
    margin-top: 10px !important;
  }
  
  /* Net rate form mobile fixes */
  .net-rate-form input {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .net-rate-form button {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  /* Holidays load form mobile fixes */
  .holidays-load-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .holidays-load-form > div {
    flex: none !important;
    width: 100% !important;
  }
  .holidays-load-form button {
    width: 100% !important;
    margin-top: 10px !important;
  }
  
  /* Holidays add form mobile fixes */
  .holidays-add-form {
    grid-template-columns: 1fr !important;
  }
  .holidays-add-form > div {
    width: 100% !important;
  }
  
  /* Holidays table mobile fixes */
  .table-wrap table {
    min-width: 100% !important;
  }
  .table-wrap th,
  .table-wrap td {
    padding: 8px 4px !important;
    font-size: 0.85rem !important;
  }
  .table-wrap input.input {
    font-size: 0.85rem !important;
    padding: 6px 8px !important;
  }
  .table-wrap button {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
}