/* MTN Trade brand system. Source: https://mtntrade.net/, inspected 2026-11-04.
   Keep brand values here; layout rules use these variables. See STIL-REHBERI.md. */
:root{
  --mtn-font-size:16px;
  --mtn-primary:#383370;
  --mtn-primary-rgb:56 51 112;
  --mtn-primary-dark:#2f2e54;
  --mtn-primary-hover:#343433;
  --mtn-primary-soft:#efedf7;
  --mtn-surface:#ffffff;
  --mtn-canvas:#f6f6f6;
  --mtn-surface-muted:#fafafa;
  --mtn-border:#e1e1e1;
  --mtn-text:#3a3a3a;
  --mtn-muted:#7e7e7e;
  --mtn-subtle:#959595;
  --mtn-warning:#94651f;
  --mtn-warning-soft:#fff5e5;
  --mtn-danger:#a63c32;
  --mtn-danger-soft:#fff0ed;
  --mtn-font-body:'Open Sans',Helvetica,Arial,Verdana,sans-serif;
  --mtn-font-heading:'Fira Sans Condensed',Helvetica,Arial,Verdana,sans-serif;
  --mtn-radius:0px;
}
body *{font-size:var(--mtn-font-size)}
body{font-family:var(--mtn-font-body);font-size:var(--mtn-font-size);color:var(--mtn-text);background:var(--mtn-canvas)}
h1,h2,h3,.page-tab,.btn,.brand,.big-clock,.shift-hours,.stat-card strong{font-family:var(--mtn-font-heading);letter-spacing:0}
h1,h2,h3{font-weight:700;color:var(--mtn-primary)}
h2{font-size:var(--mtn-font-size)}h3{font-size:var(--mtn-font-size)}
button,input,select,textarea{font-family:inherit}
.btn{font-family:var(--mtn-font-heading);font-size:var(--mtn-font-size);font-weight:700;letter-spacing:.2px;text-transform:uppercase;border-radius:var(--mtn-radius)}
.btn.primary,.btn.lime{background:var(--mtn-primary);border-color:var(--mtn-primary);color:var(--mtn-surface)}
.btn.primary:hover,.btn.lime:hover{background:var(--mtn-primary-hover);border-color:var(--mtn-primary-hover);color:var(--mtn-surface)}
.btn.secondary{background:var(--mtn-surface);border-color:var(--mtn-primary);color:var(--mtn-primary)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--mtn-primary-soft);color:var(--mtn-primary)}
.btn.ghost{color:var(--mtn-primary)}
.page-tabs{background:var(--mtn-surface);gap:0;border-color:var(--mtn-border)}
.page-tab{font-family:var(--mtn-font-heading);font-size:var(--mtn-font-size);font-weight:700;text-transform:uppercase;color:var(--mtn-primary);border-top:3px solid transparent;border-bottom:0;border-right:1px solid var(--mtn-border);padding:17px 14px}
.page-tab.active{border-top-color:var(--mtn-primary);background:var(--mtn-primary-soft);color:var(--mtn-primary)}
.page-tab:hover{background:var(--mtn-surface-muted);color:var(--mtn-primary)}
.app-header{background:var(--mtn-surface);border-top:5px solid var(--mtn-primary);height:88px}
.header-brand .brand-logo{display:block;width:220px;height:auto}
.portal-title{font-family:var(--mtn-font-heading);font-size:var(--mtn-font-size);color:var(--mtn-muted)}
.profile>span:last-child{display:block}
.panel,.field input,.field select,dialog,.day-card,.install-card,.device-callout,.qr-image,.qr-promo,.notice,.local-badge{border-radius:var(--mtn-radius)}
.panel{background:var(--mtn-surface);border-color:var(--mtn-border);box-shadow:none}
.field>span{font-size:var(--mtn-font-size);color:var(--mtn-muted)}
.field input,.field select{background:var(--mtn-surface);color:var(--mtn-text);border-color:var(--mtn-border);font-size:var(--mtn-font-size)}
.phone-number,.field input[type="tel"]{font-family:var(--mtn-font-body);font-size:var(--mtn-font-size);font-weight:600;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.025em;color:var(--mtn-text);direction:ltr}
.phone-number{display:inline-block;white-space:nowrap;unicode-bidi:isolate}
.field input[type="tel"]::placeholder{font-weight:400;letter-spacing:normal}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mtn-primary);outline-offset:1px}
button:focus-visible,a:focus-visible{outline:2px solid var(--mtn-primary);outline-offset:3px}
table{font-size:var(--mtn-font-size)}th{font-family:var(--mtn-font-heading);font-size:var(--mtn-font-size);font-weight:600;letter-spacing:.6px;color:var(--mtn-muted);background:var(--mtn-surface-muted)}
td{color:var(--mtn-text);border-color:var(--mtn-border)}
.record-group td,.record-group th{padding:4px 12px;line-height:1.4;white-space:nowrap}
.record-group .person{display:block}
.people-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:6px 12px;border-bottom:1px solid var(--mtn-border)}
.people-filters .field{flex:0 1 320px;min-width:0;width:100%;margin:0;gap:4px}
.people-filters .check-row{margin:0;min-height:44px}
.people-empty{text-align:center;padding:12px;color:var(--mtn-muted)}
.people-filters .people-add{margin-left:auto;white-space:nowrap}
.tracking-cell{text-align:center}
.tracking-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.tracking-toggle input,.check-row input{accent-color:var(--mtn-primary)}
.tracking-toggle input{width:18px;height:18px;margin:0;cursor:pointer}
.device-list td,.device-list th{padding:4px 12px;line-height:1.4;white-space:nowrap}
.device-list .person{display:block}
.device-request-time{display:inline-flex;align-items:baseline;gap:8px}
.device-list .btn{white-space:nowrap}
.workplace-form .form-panel{padding:12px}
.workplace-form .form-panel>h2{margin-bottom:8px}
.workplace-form .field{margin-bottom:0;gap:4px}
.workplace-form .two-cols{gap:12px;margin-bottom:8px}
.workplace-form .top-space{margin-top:8px}
.workplace-form .form-error:empty{display:none}
.shift-workspace{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px}
.shift-add{justify-self:end}
.record-group .record-time{display:inline-flex;align-items:baseline;gap:8px}
.record-group .record-time small{display:inline;margin:0}
.record-group .mono strong{font-size:var(--mtn-font-size);color:var(--mtn-primary)}
.person strong{font-weight:600}.avatar,.round-icon,.promo-icon,.count,.timeline-dot{background:var(--mtn-primary-soft);color:var(--mtn-primary)}
.badge.green,.badge.purple,.badge.blue,.event-type.in,.event-type.out{color:var(--mtn-primary);background:var(--mtn-primary-soft)}
.badge.amber,.timeline-dot.amber,.notice.amber{color:var(--mtn-warning);background:var(--mtn-warning-soft)}
.form-error,#toast.error{color:var(--mtn-danger);background:var(--mtn-danger-soft)}
.local-badge{color:var(--mtn-muted);border-color:var(--mtn-border)}
.day-card{background:var(--mtn-primary);color:var(--mtn-surface)}
.day-card h3,.day-card .big-clock,.day-card p,.day-card .light-note,.day-card-top,.device-callout{color:var(--mtn-surface)}
.day-card .btn.lime{background:var(--mtn-surface);color:var(--mtn-primary);border-color:var(--mtn-surface)}
.day-card .btn.outline-light{border-color:var(--mtn-surface);color:var(--mtn-surface)}
.login-story{background:var(--mtn-primary-dark);color:var(--mtn-surface)}
.login-story .brand{background:var(--mtn-surface);padding:14px 20px;width:fit-content}
.login-story .brand-logo{width:240px;height:auto;display:block}
.login-story h1,.login-story p,.login-story .eyebrow,.story-footer,.story-footer span,.login-visual strong{color:var(--mtn-surface)}
.login-panel{background:var(--mtn-surface)}
.visual-qr{color:var(--mtn-primary);background:var(--mtn-surface)}
.demo-note{background:var(--mtn-primary-soft);color:var(--mtn-text);border-color:var(--mtn-border)}
.demo-note strong,.mini-label{color:var(--mtn-primary)}
.weekdays .on{background:var(--mtn-primary-soft);color:var(--mtn-primary)}
.qr-footer{color:var(--mtn-primary)}
.qr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
@media screen{
  .qr-layout.qr-compact{grid-template-columns:minmax(0,332px) minmax(0,1fr);align-items:start;max-width:none}
  .qr-compact .qr-print{padding:12px}
  .qr-compact .qr-image{margin:0 auto;border:0;max-width:100%}
  .qr-compact .print-copy{display:none}
  .qr-compact canvas{width:300px;height:auto!important}
}
.login-simple{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--mtn-canvas)}
.login-simple-card{width:100%;max-width:400px;padding:36px 28px;background:var(--mtn-surface);border:1px solid var(--mtn-border)}
.login-simple-logo{display:block;width:260px;max-width:100%;height:auto;margin:0 auto 32px}
.login-simple-card .field{margin-bottom:20px}
.login-simple-card .btn{min-height:46px;margin-top:4px}
.login-simple-card .form-error:empty{display:none}
.tab-workspace #content{min-height:calc(100vh - 151px);padding-top:12px}
@media screen{
  .tab-workspace #content{padding:12px;max-width:none}
  .app-header{padding-left:12px;padding-right:12px;gap:12px}
  .page-tabs{padding-left:12px;padding-right:12px}
  .record-columns{gap:12px;margin-top:12px}
  .settings-grid,.shift-grid,.personal-layout,.qr-layout{gap:12px}
  .filters{padding:6px 12px;gap:6px 12px}
  .filters .field{gap:4px}
  .filters .form-error:empty{display:none}
  .panel-head{padding:12px}
  .form-panel{padding:16px}
  .page-heading.page-actions{margin-bottom:12px}
}
@media(max-width:760px){
  .qr-layout.qr-compact{grid-template-columns:1fr;max-width:332px}
  .shift-workspace{grid-template-columns:1fr}
  .app-header{height:70px}.header-brand .brand-logo{width:155px}.page-tab{font-size:var(--mtn-font-size);padding:14px 12px}
  .tab-workspace #content{min-height:calc(100dvh - 126px)}
  .login-story .brand-logo{width:190px}
  /* Same brand on mobile/PWA, with comfortable touch targets and no input zoom. */
  .field input,.field select,.field textarea{font-size:var(--mtn-font-size);min-height:44px}
  .btn,.icon-button,.profile{min-height:44px}
  .icon-button,.profile{min-width:44px}
  .profile>span:last-child{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@page{size:A4 portrait;margin:10mm}
@media print{
  .tab-workspace #content{min-height:0;padding:0;max-width:none}
  .qr-actions{display:none!important}
  .qr-layout.qr-compact{display:block;max-width:none}
  .qr-compact .qr-print{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,120mm);gap:10mm;width:190mm;max-width:100%;margin:0;padding:0;border:0;overflow:visible;break-inside:avoid}
  .qr-compact .qr-image{display:grid;place-items:center;width:100%;margin:0;padding:5mm;border:1px solid var(--mtn-border);break-inside:avoid}
  .qr-compact canvas{width:75mm;max-width:100%;height:auto!important}
}

/* Absence controls share the compact record layout and global typography. */
.absence-list{margin-top:12px}
.absence-choice{margin:0;min-width:200px;max-width:360px}
.absence-choice select{padding:6px 10px;min-height:36px}
.absence-empty{padding:12px;color:var(--mtn-muted)}
.absence-settings{margin-top:12px}
.absence-settings td,.absence-settings th{padding:4px 12px}
.reason-actions{text-align:right;white-space:nowrap}
@media(max-width:760px){.absence-choice select{min-height:44px}.absence-settings .panel-head{flex-wrap:wrap}}

.absence-saved{display:flex;align-items:center;justify-content:space-between;gap:12px}
.absence-edit-summary{display:grid;gap:4px;margin-bottom:12px}

/* Staff mobile: the service application's Geldim flow, with MTN styling. */
#content.arrival-workspace{min-height:100dvh;max-width:560px;width:100%;padding:12px;margin:0 auto}
.arrival-header{display:flex;align-items:center;gap:12px;padding:12px 0 20px;border-top:4px solid var(--mtn-primary)}
.arrival-header img{width:160px;max-width:45%;height:auto}
.arrival-header h1{flex:1;font-size:var(--mtn-font-size)}
.arrival-card{padding:16px;display:grid;gap:12px}
.arrival-card .notice{margin:0;padding:12px}
.arrival-card .arrival-error{color:var(--mtn-danger);background:var(--mtn-danger-soft)}
.arrival-card .btn{min-height:44px}
.arrival-camera{display:grid;gap:12px}
.arrival-camera video{display:block;width:100%;max-height:50vh;object-fit:cover;background:var(--mtn-primary-dark)}

.movement-actions{display:grid;gap:12px}