/* ============================================================

   Portal v2 — Main CSS

   ============================================================ */



/* ── Fonts ── */

@font-face{font-family:'Youth';src:url('../fonts/AllCaps%20-%20Youth%20Black.otf') format('opentype');font-weight:900}

@font-face{font-family:'Youth';src:url('../fonts/AllCaps%20-%20Youth%20Bold.otf') format('opentype');font-weight:700}

@font-face{font-family:'Youth';src:url('../fonts/AllCaps%20-%20Youth%20Medium.otf') format('opentype');font-weight:500}

@font-face{font-family:'Youth';src:url('../fonts/AllCaps%20-%20Youth%20Regular.otf') format('opentype');font-weight:400}

@font-face{font-family:'Youth';src:url('../fonts/AllCaps%20-%20Youth%20Light.otf') format('opentype');font-weight:300}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');



/* ── CSS Variables ── */

:root {

  /* Base */

  --bg:       #f5f4f0;

  --surface:  #ffffff;

  --surface2: #f0efe9;

  --surface3: #e8e7e0;

  --border:   #dddbd3;

  --border2:  #c8c6bc;

  --text:     #1a1917;

  --text2:    #5a5850;

  --text3:    #9a9890;



  /* Accent (overridden per restaurant) */

  --accent:      #2563eb;

  --accent-bg:   #eff6ff;

  --accent-text: #1d4ed8;



  /* Semantic */

  --green:      #16a34a;

  --green-bg:   #f0fdf4;

  --green-text: #15803d;

  --red:        #dc2626;

  --red-bg:     #fef2f2;

  --red-text:   #b91c1c;

  --yellow:     #ca8a04;

  --yellow-bg:  #fefce8;

  --yellow-text:#a16207;

  --lock:       #7c3aed;

  --lock-bg:    #f5f3ff;



  /* Shadows */

  --shadow:  0 1px 3px rgba(0,0,0,.08);

  --shadow2: 0 4px 20px rgba(0,0,0,.12);

  --shadow3: 0 8px 32px rgba(0,0,0,.16);



  /* Radius */

  --r-sm:  6px;

  --r-md:  10px;

  --r-lg:  14px;

  --r-xl:  20px;

  --r-full:9999px;



  /* Transition */

  --t: .15s ease;

}



[data-theme="dark"] {

  --bg:       #0e0f11;

  --surface:  #16181d;

  --surface2: #1e2028;

  --surface3: #262830;

  --border:   #2e3038;

  --border2:  #3e4050;

  --text:     #e8e9ec;

  --text2:    #8a8d99;

  --text3:    #4e5160;

  --accent:      #3b82f6;

  --accent-bg:   #1e2a4a;

  --accent-text: #60a5fa;

  --green:      #22c55e;

  --green-bg:   #0d2818;

  --green-text: #4ade80;

  --red:        #ef4444;

  --red-bg:     #2a1010;

  --red-text:   #f87171;

  --yellow:     #eab308;

  --yellow-bg:  #2a2200;

  --yellow-text:#facc15;

  --lock:       #a78bfa;

  --lock-bg:    #1e1538;

  --shadow:  0 1px 3px rgba(0,0,0,.3);

  --shadow2: 0 4px 20px rgba(0,0,0,.5);

  --shadow3: 0 8px 32px rgba(0,0,0,.7);

}



/* ── Reset ── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:14px;-webkit-text-size-adjust:100%}

body{

  font-family:'Youth','DM Sans',system-ui,sans-serif;

  background:var(--bg);

  color:var(--text);

  min-height:100vh;

  line-height:1.6;

  transition:background var(--t),color var(--t);

}

::-webkit-scrollbar{width:5px;height:5px}

::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

a{color:var(--accent-text);text-decoration:none}

button,input,select,textarea{font-family:inherit}



/* ── Typography ── */

.font-mono{font-family:'DM Mono',monospace}

.text-sm{font-size:.82rem}

.text-xs{font-size:.72rem}

.text-muted{color:var(--text3)}

.text-accent{color:var(--accent-text)}

.font-bold{font-weight:700}

.font-medium{font-weight:500}



/* ── Layout ── */

.page{max-width:1400px;margin:0 auto;padding:1rem}

.page-narrow{max-width:640px;margin:0 auto;padding:1.25rem 1rem}

.page-center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}



/* ── Topbar ── */

.topbar{

  background:var(--surface);

  border-bottom:1px solid var(--border);

  padding:.6rem 1rem;

  display:flex;

  align-items:center;

  justify-content:space-between;

  position:sticky;

  top:0;

  z-index:50;

  gap:.5rem;

}

.topbar-left,.topbar-right{display:flex;align-items:center;gap:.4rem}

.topbar-center{display:flex;align-items:center;gap:.2rem}

.top-title{font-size:.9rem;font-weight:700;color:var(--accent);letter-spacing:.05em}

.top-sub{font-size:.65rem;color:var(--text3);font-family:'DM Mono',monospace}



/* ── Banner: استایل قدیمی حذف شد — نسخه‌ی جدید در پایین فایل (BANNER REDESIGN) ── */



/* ── Tabs ── */

.tabs{background:var(--surface);border-bottom:1px solid var(--border);display:flex}

.tab-btn{

  background:transparent;

  border:none;

  border-bottom:2px solid transparent;

  color:var(--text3);

  padding:.5rem .9rem;

  font-size:.8rem;

  font-weight:500;

  cursor:pointer;

  transition:all var(--t);

  white-space:nowrap;

  font-family:inherit;

}

.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

.tab-btn:hover:not(.active){color:var(--text2)}



/* ── Tab Group (pill) ── */

.tab-group{

  display:flex;

  background:var(--surface2);

  border-radius:var(--r-md);

  padding:.15rem;

  gap:.1rem;

}

.tab-group .tab-btn{

  border-radius:var(--r-sm);

  border-bottom:none;

  padding:.28rem .75rem;

  font-size:.8rem;

}

.tab-group .tab-btn.active{

  background:var(--surface);

  color:var(--accent);

  box-shadow:var(--shadow);

}



/* ── Card ── */

.card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--r-lg);

 box-shadow:var(--shadow);

}

.card-head{

  padding:.65rem 1rem;

  border-bottom:1px solid var(--border);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:.5rem;

  flex-wrap:wrap;

}

.card-label{font-size:.68rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}

.card-body{padding:.85rem 1rem}



/* ── Buttons ── */

.btn{

  display:inline-flex;

  align-items:center;

  gap:.35rem;

  background:transparent;

  border:1px solid var(--border);

  border-radius:var(--r-sm);

  color:var(--text2);

  padding:.32rem .8rem;

  font-size:.8rem;

  font-weight:500;

  cursor:pointer;

  transition:all var(--t);

  font-family:inherit;

  text-decoration:none;

  white-space:nowrap;

}

.btn:hover{border-color:var(--border2);color:var(--text)}

.btn-icon{width:30px;height:30px;padding:0;justify-content:center;font-size:.88rem}

.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.btn-primary:hover{opacity:.88;color:#fff}

.btn-danger{border-color:var(--red);color:var(--red)}

.btn-danger:hover{background:var(--red-bg)}

.btn-success{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}

.btn-success:hover{opacity:.88}

.btn-sm{padding:.22rem .6rem;font-size:.75rem}

.btn-lg{padding:.65rem 1.25rem;font-size:.95rem}

.btn-full{width:100%;justify-content:center}

.btn:disabled{opacity:.4;cursor:not-allowed}



/* ── Form Elements ── */

.field{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.75rem}

.field-label{font-size:.72rem;color:var(--text2);font-weight:500}

.field-label .req{color:var(--red)}

.input{

  background:var(--surface2);

  border:1px solid var(--border);

  border-radius:var(--r-sm);

  color:var(--text);

  font-family:'DM Sans',sans-serif;

  font-size:.88rem;

  padding:.42rem .65rem;

  outline:none;

  transition:border-color var(--t);

  width:100%;

}

.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}

.input-mono{font-family:'DM Mono',monospace}

.textarea{resize:vertical;min-height:80px;line-height:1.6}

.select{cursor:pointer}



/* ── PIN Input ── */

.pin-row{display:flex;justify-content:center;gap:.55rem}

.pin-box{

  width:58px;height:68px;

  background:var(--surface2);

  border:2px solid var(--border);

  border-radius:var(--r-md);

  font-family:'DM Mono',monospace;

  font-size:1.6rem;

  font-weight:500;

  color:var(--text);

  text-align:center;

  outline:none;

  transition:border-color var(--t);

  caret-color:var(--accent);

}

.pin-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}

.pin-box.filled{border-color:var(--border2)}



/* ── Badges ── */

.badge{

  display:inline-flex;

  align-items:center;

  gap:.2rem;

  font-size:.65rem;

  font-weight:600;

  padding:.12rem .5rem;

  border-radius:var(--r-full);

  border:1px solid currentColor;

}

.badge-green{background:var(--green-bg);color:var(--green-text)}

.badge-red{background:var(--red-bg);color:var(--red-text)}

.badge-yellow{background:var(--yellow-bg);color:var(--yellow-text)}

.badge-accent{background:var(--accent-bg);color:var(--accent-text)}

.badge-muted{background:var(--surface2);color:var(--text3);border-color:var(--border)}

.badge-lock{background:var(--lock-bg);color:var(--lock)}



/* ── User Badge ── */

.user-badge{

  display:flex;

  align-items:center;

  gap:.3rem;

  background:var(--surface2);

  border:1px solid var(--border);

  border-radius:var(--r-full);

  padding:.18rem .65rem;

  font-size:.75rem;

  color:var(--text2);

}

.user-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

.user-dot.manager{background:var(--yellow)}

.user-dot.super{background:var(--lock)}

.user-name{font-weight:500;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



/* ── Toast ── */

.toast-box{position:fixed;bottom:1rem;right:1rem;z-index:999;display:flex;flex-direction:column;gap:.35rem;pointer-events:none}

.toast{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--r-sm);

  padding:.5rem .85rem;

  font-size:.8rem;

  display:flex;

  align-items:flex-start;

  gap:.4rem;

  box-shadow:var(--shadow2);

  animation:slideIn .15s ease;

  pointer-events:all;

  max-width:min(420px, calc(100vw - 2rem));

  line-height:1.4;

  word-break:break-word;

}

.toast::before{flex-shrink:0;line-height:1.4}

.toast.ok{border-color:var(--green)}.toast.ok::before{content:'✓';color:var(--green);font-weight:700}

.toast.err{border-color:var(--red)}.toast.err::before{content:'✕';color:var(--red);font-weight:700}

.toast.info{border-color:var(--accent)}.toast.info::before{content:'ℹ';color:var(--accent-text);font-weight:700}

@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}



/* ── Popup / Modal ── */

.overlay{display:none;position:fixed;inset:0;z-index:200}

.overlay.open{display:block}

.overlay-dark{background:rgba(0,0,0,.5)}

.popup{

  position:absolute;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--r-lg);

  box-shadow:var(--shadow3);

  animation:popIn .13s ease;

  z-index:201;

}

.modal{

  position:fixed;

  top:50%;left:50%;

  transform:translate(-50%,-50%);

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--r-lg);

  width:90%;

  max-width:440px;

  box-shadow:var(--shadow3);

  animation:popIn .15s ease;

  z-index:201;

}

.modal-head{padding:.85rem 1.1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}

.modal-head h3{font-size:.9rem;font-weight:600}

.modal-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem}

.modal-foot{padding:.75rem 1.1rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.5rem}

.btn-close{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:1rem;line-height:1}

.btn-close:hover{color:var(--red)}

@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}



/* ── Hamburger Menu ── */

.hamburger{display:none}

.mobile-menu{

  display:none;

  position:fixed;

  top:0;left:0;bottom:0;

  width:240px;

  background:var(--surface);

  border-left:1px solid var(--border);

  z-index:300;

  flex-direction:column;

  gap:.25rem;

  padding:1rem;

  box-shadow:-4px 0 20px rgba(0,0,0,.15);

	transition: transform 0.3s ease;

	 transform: translateX(-100%); 



}

.mobile-menu.open{display:flex;

transform: translateX(0); }

.mobile-menu-back{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.4)}

.mobile-menu-back.open{display:block}

.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}

.menu-item{

  display:flex;

  align-items:center;

  gap:.6rem;

  padding:.55rem .75rem;

  border-radius:var(--r-sm);

  font-size:.88rem;

  color:var(--text2);

  cursor:pointer;

  text-decoration:none;

  border:none;

  background:transparent;

  width:100%;

  transition:background var(--t);

  font-family:inherit;

}

.menu-item:hover,.menu-item.active{background:var(--surface2);color:var(--text)}

.menu-item.accent{color:var(--accent-text)}



/* ── Table ── */

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

table{width:100%;border-collapse:collapse;font-size:.8rem}

thead th{

  background:var(--surface2);

  color:var(--text3);

  font-family:'DM Mono',monospace;

  font-size:.65rem;

  font-weight:500;

  text-transform:uppercase;

  letter-spacing:.05em;

  padding:.42rem .65rem;

  text-align:left;

  border-bottom:1px solid var(--border);

  white-space:nowrap;

}

tbody tr{border-bottom:1px solid var(--border);transition:background var(--t)}

tbody tr:last-child{border-bottom:none}

tbody tr:hover{background:var(--surface2)}

td{padding:.38rem .65rem;vertical-align:middle}



/* ── Schedule Grid ── */

.sched-table{border-collapse:collapse;width:100%;table-layout:fixed}

.sched-table th{

  background:var(--surface2);

  font-size:.68rem;font-weight:700;

  color:var(--text);text-align:center;

  padding:.3rem .15rem;

  border:1px solid var(--border);

}

.sched-emp{

  background:var(--surface);

  border:1px solid var(--border);

  vertical-align:middle;

  padding:.28rem .4rem;

}

.sched-emp-name{font-weight:700;font-size:.8rem;font-family:'Youth',sans-serif}

.sched-cell{

  border:1px solid var(--border);

  text-align:center;

  font-family:'DM Mono',monospace;

  font-size:.68rem;font-weight:600;

  cursor:pointer;

  transition:opacity var(--t);

  position:relative;

  padding:.16rem .08rem;

  line-height:1.3;

}

.sched-cell:hover{opacity:.8}

.sched-cell.empty{background:var(--surface2);color:var(--text3);cursor:pointer}

.sched-cell.empty:hover{background:var(--border)}

.sched-cell::after{content:'';display:block;height:2px;position:absolute;bottom:0;left:0;right:0}

.sched-cell.dur{font-size:.62rem;color:var(--text3);cursor:default;background:var(--bg)}

.sched-cell.dur:hover{opacity:1}

.sched-sep td{height:3px;background:var(--bg);border:none;padding:0}

.today-col{outline:2px solid var(--accent);outline-offset:-1px;z-index:1;position:relative}



/* Skill badges */

.skill{font-size:.58rem;padding:.06rem .28rem;border-radius:3px;font-weight:700;font-family:'DM Mono',monospace}

.skill-k{color:var(--green-text)}

.skill-d{color:var(--accent-text)}

.skill-kd{color:var(--yellow-text)}



/* ── Analog Clock ── */

.clock-canvas{display:block;margin:0 auto}

.clock-date{font-size:.8rem;color:var(--text3);text-align:center;margin:.25rem 0 .75rem}



/* ── Clock Buttons ── */

.clock-btn{

  display:block;width:100%;

  padding:.95rem;

  border:none;border-radius:var(--r-md);

  font-size:1rem;font-weight:700;

  cursor:pointer;transition:all var(--t);

  font-family:'Youth','DM Sans',sans-serif;

  letter-spacing:.04em;

}

.clock-btn.in{background:var(--green);color:#fff}

.clock-btn.out{background:var(--red);color:#fff}

.clock-btn:hover{opacity:.88}

.clock-btn:disabled{opacity:.4;cursor:not-allowed}

.clock-status{

  display:inline-flex;align-items:center;gap:.4rem;

  padding:.28rem .85rem;border-radius:var(--r-full);

  font-size:.8rem;font-weight:500;

  margin:.6rem 0;

}

.clock-status.working{background:var(--green-bg);color:var(--green-text)}

.clock-status.off{background:var(--surface2);color:var(--text3)}

.clock-dot{width:7px;height:7px;border-radius:50%}

.clock-dot.working{background:var(--green);animation:pulse 2s infinite}

.clock-dot.off{background:var(--text3)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}



/* ── Login Card ── */

.login-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--r-xl);

  padding:2.5rem 2rem;

  width:100%;

  max-width:340px;

  box-shadow:var(--shadow2);

  text-align:center;

}

.login-icon{font-size:2.2rem;margin-bottom:.5rem}

.login-title{font-size:1.1rem;font-weight:700;margin-bottom:.2rem;font-family:'Youth',sans-serif;letter-spacing:.04em}

.login-sub{font-size:.75rem;color:var(--text3);margin-bottom:2rem;font-family:'DM Mono',monospace}

.login-err{background:var(--red-bg);border:1px solid var(--red);border-radius:var(--r-sm);color:var(--red-text);font-size:.8rem;padding:.5rem .75rem;margin-bottom:.85rem;text-align:left}



/* ── Profile ── */

.avatar-wrap{position:relative;cursor:pointer;width:88px;flex-shrink:0}

.avatar-img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);background:var(--surface2);display:block}

.avatar-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--t);font-size:1.4rem}

.avatar-wrap:hover .avatar-overlay{opacity:1}

.social-icon{

  width:38px;height:38px;border-radius:50%;

  display:flex;align-items:center;justify-content:center;

  font-size:1rem;text-decoration:none;

  transition:transform var(--t),opacity var(--t);

  color:#fff;

}

.social-icon:hover{transform:scale(1.12)}

.si-instagram{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}

.si-linkedin{background:#0077b5}

.si-facebook{background:#1877f2}

.si-tiktok{background:#010101}

.si-telegram{background:#2aabee}

.si-whatsapp{background:#25d366}

.si-twitter{background:#000}

.si-youtube{background:#ff0000}

.si-snapchat{background:#fffc00;color:#000!important}

.si-pinterest{background:#e60023}

.si-github{background:#24292e}

.si-discord{background:#5865f2}



/* ── Util ── */

.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}

.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}

.flex-1{flex:1}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}

.hidden{display:none!important}

.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}

.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}

.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}

.w-full{width:100%}.text-center{text-align:center}.text-right{text-align:right}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}



/* ── Responsive ── */

@media(max-width:768px){

  .hamburger{display:flex}

  .user-badge{display:none}

  .tab-group .tab-btn{padding:.22rem .5rem;font-size:.75rem}

  .grid-2,.grid-4{grid-template-columns:1fr}

}

@media(max-width:480px){

  .tab-group{display:none}

  .rav-banner{font-size:1.4rem;top:45px}

  html{font-size:13px}

}

@media(min-width:769px){

  .hamburger{display:none!important}

}

/* ===== Kassa: kiinteä leveys päivä-sarakkeelle ===== */



.kassa-daycol{

  width:118px;

  min-width:118px;

  max-width:118px;

  white-space:nowrap;

  font-family:monospace;

}



.kassa-daynum{

  display:inline-block;

  width:34px;

  text-align:right;

}





/* ===== Ravintolan vaihto: banneri + dropdown ===== */



/* .rav-banner-wrap و .rav-banner قدیمی حذف شدن — نسخه جدید پایین فایل */



/* vanha modal pois käytöstä, dropdown korvaa sen */

#rav-modal,

#modal-overlay{

  display:none !important;

}



.rav-banner:hover{

  opacity:.82;

}



.rav-caret{

  font-size:.7em;

  opacity:.65;

  transition:transform .2s;

}



.rav-banner.open .rav-caret{

  transform:rotate(180deg);

}



.rav-dd{

  position:absolute;

  top:calc(100% + 6px);

  left:50%;

  transform:translateX(-50%) translateY(-4px);

  background:var(--surface,#fff);

  border:1px solid var(--border,#ddd);

  border-radius:12px;

  box-shadow:0 8px 28px rgba(0,0,0,.16);

  padding:.35rem;

  min-width:210px;

  z-index:1200;

  opacity:0;

  pointer-events:none;

  transition:opacity .16s ease,transform .16s ease;

}



.rav-dd.show{

  display:block !important;

  opacity:1;

  pointer-events:auto;

  transform:translateX(-50%) translateY(0);

}



.rav-dd-item{

  display:flex;

  align-items:center;

  gap:.6rem;

  padding:.6rem .7rem;

  border-radius:8px;

  cursor:pointer;

  font-size:.9rem;

  color:var(--text,#222);

  transition:background .12s;

}



.rav-dd-item:hover{

  background:var(--surface2,#f3f3f3);

}



.rav-dd-item.active{

  background:var(--accent-bg,#fff3e8);

  font-weight:600;

}



.rav-dd-dot{

  width:11px;

  height:11px;

  border-radius:50%;

  flex-shrink:0;

}



.rav-dd-check{

  margin-left:auto;

  color:var(--accent,#ea580c);

  font-weight:700;

}





/* ===== Tiedotteet-lista (Osio B) =====

   YouTube-upotus on ~315px korkea.

   Kaynnissa: VAIHTOEHTO A. Vaihda B:hen kommentoimalla A ja poistamalla B:n kommentti. */



/* --- VAIHTOEHTO A: iso max-height + vieritys (oletus) --- */

.notice-list{

  padding:.5rem .85rem;

  display:flex;

  flex-direction:column;

  gap:.4rem;

  max-height:600px;

  overflow-y:auto;

}



/* --- VAIHTOEHTO B: ei korkeusrajaa, ei sisaista vieritysta ---

.notice-list{

  padding:.5rem .85rem;

  display:flex;

  flex-direction:column;

  gap:.4rem;

}

*/





/* ===== YouTube responsiivinen upotus =====

   16:9 kuvasuhde, skaalautuu aina sailion leveyteen (myos mobiili). */



.yt-embed{

  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  margin:.4rem 0;

  border-radius:8px;

  overflow:hidden;

  background:#000;

}



.yt-embed iframe{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  border:0;

}



/* Vanhat selaimet ilman aspect-ratio -tukea (varmistus) */

@supports not (aspect-ratio:16 / 9){

  .yt-embed{height:0;padding-bottom:56.25%;}

}





/* ===== Profiili: "Näytä" -käyttäjävalitsin (banneri-tyyli) ===== */



.usr-dd-wrap{

  position:relative;

  width:100%;

}



.usr-dd-banner{

  display:flex;

  align-items:center;

  gap:.5rem;

  cursor:pointer;

  user-select:none;

  padding:.35rem .4rem;

  border-radius:8px;

  transition:background .12s;

}



.usr-dd-banner:hover{

  background:var(--surface2);

}



.usr-caret{font-size:1.1rem;color:var(--text3);transition:transform .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;display:inline-block;line-height:1;transform-origin:center center}



.usr-dd-banner.open .usr-caret{

  transform:rotate(180deg);

}



.usr-dd{

  position:absolute;

  top:calc(100% + 6px);

  left:0;

  right:0;

  background:var(--surface,#fff);

  border:1px solid var(--border,#ddd);

  border-radius:12px;

  box-shadow:0 8px 28px rgba(0,0,0,.16);

  padding:.35rem;

  z-index:1200;

  max-height:320px;

  overflow-y:auto;

  opacity:0;

  pointer-events:none;

  transform:translateY(-4px);

  transition:opacity .16s ease,transform .16s ease;

}



.usr-dd.show{

  opacity:1;

  pointer-events:auto;

  transform:translateY(0);

}



.usr-dd-item{

  padding:.6rem .7rem;

  border-radius:8px;

  cursor:pointer;

  font-size:.88rem;

  color:var(--text,#222);

  transition:background .12s;

}



.usr-dd-item:hover{

  background:var(--surface2,#f3f3f3);

}



.usr-dd-item.active{

  background:var(--accent-bg,#fff3e8);

  font-weight:600;

}





/* ===== Päänavigointi: neliönappulat (mobiili-app tyyli, responsive) ===== */

/* Korvaa vanhan hampurilaisvalikon. Sama ulkoasu desktop + mobiili. */



.navbar{

  /* override شده در navbar redesign v2 پایین فایل */

}

.navbar::-webkit-scrollbar{display:none}



/* navbtn قدیمی + media-queryهاش حذف شدن، نسخه‌ی جدید در پایین فایل */



/* user-dot kun navbtn-actionien vieressa: vahan ilmaa */

.topbar-right .user-dot{margin-right:.2rem}



/* همبرگر و منوی کشویی قدیمی کاملاً غیرفعال (دیگر استفاده نمی‌شوند) */

.hamburger,

.mobile-menu,

.mobile-menu-back{display:none !important}



/* ===== Notice theme buttons ===== */

.notice-theme-btn{

  background:var(--surface2);

  border:1px solid var(--border);

  border-radius:20px;

  padding:.2rem .65rem;

  font-size:.72rem;

  cursor:pointer;

  color:var(--text2);

  font-family:inherit;

  transition:all .12s;

}

.notice-theme-btn.active,.notice-theme-btn:hover{

  background:var(--surface);

  color:var(--text);

}



/* ===== portal-msg-btn (etusivun viesti-listan muokkaa/poista)

   Renamed from `.msg-btn` — collided with the MessageButton component

   (assets/css/message-button.css) whose `.msg-btn` adds animated dots

   to its ::before/::after pseudo-elements. */

.portal-msg-btn{

  background:transparent;

  border:none;

  cursor:pointer;

  color:var(--text3);

  font-size:.72rem;

  padding:.1rem .25rem;

  border-radius:3px;

  line-height:1;

}

.portal-msg-btn:hover{color:var(--text)}





/* portal-hero -tyylit on siirretty assets/css/hero.css -tiedostoon (vain etusivulla) */



.portal-rav-block{

  display:flex;

  flex-direction:column;

  gap:.25rem;

}

.portal-rav-name{

  font-size:.68rem;

  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

  color:var(--text3);

  display:flex;

  align-items:center;

  gap:.4rem;

}

.portal-rav-dot{

  display:inline-block;

  width:9px;

  height:9px;

  border-radius:50%;

}

.portal-shift-row{

  display:flex;

  align-items:center;

  gap:.5rem;

  padding:.28rem 0;

  border-bottom:1px dashed var(--border);

  font-size:.82rem;

}

.portal-shift-row:last-child{border-bottom:none}

.portal-shift-name{flex:1;font-weight:500}

.portal-shift-time{font-family:monospace;color:var(--text2);font-size:.78rem}

.portal-kassa-card{background:linear-gradient(180deg,var(--surface) 0%,var(--surface2) 100%)}

.portal-kassa-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:.5rem;

}

@media(max-width:480px){.portal-kassa-grid{grid-template-columns:1fr}}

.portal-kassa-tile{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:8px;

  padding:.55rem .65rem;

  display:flex;

  flex-direction:column;

  gap:.35rem;

}

.portal-kassa-tile-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  font-size:.65rem;

  font-weight:700;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--text3);

}

.portal-kassa-tile-body{

  display:flex;

  gap:.4rem;

  align-items:stretch;

}

.portal-kassa-cell{

  flex:1;

  background:var(--surface2);

  border-radius:6px;

  padding:.35rem .45rem;

  display:flex;

  flex-direction:column;

  gap:.1rem;

}

.portal-kassa-cell-lbl{font-size:.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}

.portal-kassa-cell-val{font-family:monospace;font-size:.92rem;font-weight:600}

.portal-kassa-cell-val.empty{color:var(--text3);font-weight:400}

.portal-kassa-btn{

  background:var(--accent);

  color:#fff;

  border:none;

  border-radius:6px;

  padding:.32rem .55rem;

  font-size:.7rem;

  font-weight:600;

  cursor:pointer;

  white-space:nowrap;

}

.portal-kassa-btn.filled{background:var(--surface2);color:var(--text2)}

.portal-msg-row{

  display:flex;

  flex-direction:column;

  gap:.15rem;

  padding:.4rem .5rem;

  background:var(--surface2);

  border-radius:6px;

  border-left:3px solid var(--accent);

}

.portal-msg-row.monthly{border-left-color:var(--accent);background:var(--accent-bg,#fff3e8)}

.portal-msg-rav{

  font-size:.6rem;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.04em;

  color:var(--text3);

}

.portal-msg-text{font-size:.85rem;line-height:1.4;color:var(--text)}

.portal-msg-author{font-size:.65rem;color:var(--text3);margin-top:.1rem}

.portal-empty{color:var(--text3);font-size:.78rem;font-style:italic;padding:.4rem;text-align:center}



/* ============================================================

   Kassa / Tilitys — sivu (views/kassa.php)

   ============================================================ */



/* ── Responsive columns ── */

@media(max-width:768px){.col-admin{display:none}}



/* ── Shift add/edit buttons (A / I) ── */

.shift-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:22px;

  height:22px;

  margin-left:.2rem;

  border-radius:5px;

  border:1px solid var(--border);

  background:var(--surface2);

  color:var(--text2);

  font-size:.7rem;

  font-weight:700;

  font-family:'DM Mono',monospace;

  cursor:pointer;

  transition:all .12s;

  line-height:1;

  vertical-align:middle;

}

.shift-btn:hover{

  background:var(--accent-bg);

  color:var(--accent);

  border-color:var(--accent);

}

.shift-btn.filled{

  background:var(--green-bg);

  color:var(--green-text);

  border-color:var(--green);

}

.shift-btn.filled:hover{

  background:var(--green);

  color:#fff;

  border-color:var(--green);

}



/* ── Erotus cell colors ── */

.ero-zero{color:var(--green-text);font-weight:600}

.ero-pos{color:var(--yellow-text);font-weight:600}

.ero-neg{color:var(--red-text);font-weight:600}

.ero-na{color:var(--text3)}



/* ── Coins grid (popup) ── */

.coins-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}

@media(max-width:480px){.coins-grid{grid-template-columns:repeat(2,1fr)}}

.coin-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}

.coin-label{font-size:.62rem;color:var(--text3);font-family:monospace}

.coin-inp{

  width:100%;

  text-align:center;

  font-family:monospace;

  font-size:.82rem;

  padding:.3rem .2rem;

  background:var(--surface2);

  border:1px solid var(--border);

  border-radius:4px;

  color:var(--text);

  outline:none;

}

.coin-inp:focus{border-color:var(--accent)}



/* ── Kassa total line ── */

.kassa-total-row{

  margin-top:.75rem;

  display:flex;

  align-items:center;

  justify-content:space-between;

  font-family:monospace;

  font-size:.95rem;

  font-weight:700;

  padding:.55rem .7rem;

  background:var(--accent-bg);

  border:1px solid var(--accent);

  border-radius:6px;

  color:var(--accent-text);

}



/* ── Modal section heading ── */

.modal-section-title{

  font-size:.66rem;

  font-weight:700;

  color:var(--text3);

  text-transform:uppercase;

  letter-spacing:.07em;

  margin-top:.85rem;

  margin-bottom:.4rem;

  padding-bottom:.25rem;

  border-bottom:1px solid var(--border);

}



/* ── Tilitys preview rows ── */

.tilitys-prv{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:.38rem .6rem;

  background:var(--surface2);

  border-radius:5px;

  font-family:'DM Mono',monospace;

  font-size:.78rem;

  margin-bottom:.3rem;

}

.tilitys-prv.total{

  background:var(--accent-bg);

  border:1px solid var(--accent);

  color:var(--accent-text);

  font-weight:700;

}

.tilitys-prv .lbl{color:var(--text2)}

.tilitys-prv.total .lbl{color:var(--accent-text)}

.tilitys-prv .val{font-weight:700}



.tilitys-prv-ero{

  padding:.55rem .7rem;

  border-radius:6px;

  font-family:'DM Mono',monospace;

  font-size:.88rem;

  font-weight:700;

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:.4rem;

  border:1px solid;

}

.tilitys-prv-ero.zero{background:var(--green-bg);color:var(--green-text);border-color:var(--green)}

.tilitys-prv-ero.pos{background:var(--yellow-bg);color:var(--yellow-text);border-color:var(--yellow)}

.tilitys-prv-ero.neg{background:var(--red-bg);color:var(--red-text);border-color:var(--red)}



/* ── Info row in modal ── */

.modal-info-row{

  margin-top:.6rem;

  font-size:.7rem;

  color:var(--text3);

  padding:.4rem .6rem;

  background:var(--surface2);

  border-radius:6px;

  line-height:1.55;

}



/* ── Field with prefix label inline ── */

.field-inline{

  display:flex;

  align-items:center;

  gap:.5rem;

  margin-bottom:.55rem;

}

.field-inline .field-label{

  width:160px;

  flex-shrink:0;

  margin:0;



}

.field-inline .input{flex:1}

@media(max-width:480px){

  .field-inline{flex-direction:column;align-items:stretch;gap:.2rem}

  .field-inline .field-label{width:auto}

}

/* Päivä-sarake: vakio leveys myös 2-numeroisilla päivillä (10.–31.) */

#raportti-table th:first-child,

#raportti-table td:first-child{min-width:95px}

/* Päivän tunniste: vakio leveys, jotta A/I-painikkeet linjassa */

.day-label{

  display:inline-block;

  min-width:6ch;

  text-align:left;

}



/* ============================================================

   Kassa / Tilitys — sivu (views/kassa.php)

   ============================================================ */



/* ── Sivun layout ── */

.kassa-page{display:flex;flex-direction:column;gap:1rem}



/* ── Kortin otsikon napit (kuukauden vaihto, raportit, +Uusi) ── */

.card-head-tools{display:flex;align-items:center;gap:.4rem}



/* ── Kuukauden otsikko (esim. "Toukokuu 2026") ── */

.month-label{

  font-size:.78rem;

  font-family:'DM Mono',monospace;

  color:var(--text2);

  min-width:120px;

  text-align:center;

}



/* ── Numerosolu (monospace) — kaikissa euromääräsoluissa ── */

.k-num{font-family:'DM Mono',monospace}



/* ── Tyhjä rivi / Ladataan-rivi ── */

.tbl-empty{text-align:center;padding:1rem;color:var(--text3)}

.tbl-empty-lg{text-align:center;padding:1.5rem;color:var(--text3)}

.tbl-empty.err{color:var(--red-text)}



/* ── Sarakeselitykset taulukon alla ── */

.tbl-legend{

  padding:.55rem .85rem;

  border-top:1px solid var(--border);

  display:flex;

  gap:.4rem;

  flex-wrap:wrap;

  align-items:center;

  font-size:.65rem;

  color:var(--text3);

}

.tbl-legend strong{color:var(--text2)}



/* ── Tämä päivä korostettu ── */

.row-today{background:var(--accent-bg)}



/* ── Päivä-solu kassan taulukossa ── */

.day-cell{font-family:'DM Mono',monospace;white-space:nowrap}



/* ── Kapeampi modaali (Tilitys) ── */

.modal-narrow{max-width:500px}



/* ── Modaalin esikatselun apuluokat ── */

.modal-preview-period{

  font-size:.68rem;

  color:var(--text3);

  margin-bottom:.45rem;

  text-align:center;

}

.modal-preview-err{

  color:var(--red-text);

  font-size:.78rem;

  padding:.4rem;

}

.modal-preview-loading{

  text-align:center;

  color:var(--text3);

  padding:.5rem;

  font-size:.78rem;

}



.tilitys-prv.sep{margin-top:.5rem}

.tilitys-ero-box{margin-top:.65rem}



.modal-info-row strong{color:var(--text2)}



/* ============================================================

   Vuoro — Työajan kirjaus (views/vuoro.php)

   ============================================================ */



/* ── Sivun layout (sama tyyli kuin kassa) ── */

.vuoro-page{display:flex;flex-direction:column;gap:1rem}



/* ── Kortin otsikon kompakti meta-teksti (esim. "7 vrk") ── */

.card-head-meta{font-size:.7rem;color:var(--text3)}



/* ── Vuoron kellopaneeli ── */

.vuoro-clock-wrap{

  padding:1rem;

  display:flex;

  flex-direction:column;

  align-items:stretch;

  gap:.5rem;

}

.vuoro-clock-wrap > .clock-canvas,

.vuoro-clock-wrap > .clock-date,

.vuoro-clock-wrap > .clock-status{

  align-self:center;

}



/* ── Pyöristetyn kirjausajan esikatselu (samanlevyinen kuin nappi) ── */

.time-preview{

  width:100%;

  background:var(--surface2);

  border:1px solid var(--border);

  border-radius:var(--r-md);

  padding:.7rem 1rem;

  margin:.3rem 0 .15rem;

  font-family:'DM Mono',monospace;

  display:flex;

  align-items:baseline;

  justify-content:space-between;

}

.time-preview .lbl{color:var(--text2);font-size:.82rem}

.time-preview .val{font-weight:700;color:var(--text);font-size:1.05rem}



/* ── Sivun pohjateksti: korjauspyyntö pääkäyttäjälle ── */

.vuoro-footer-hint{

  font-size:.75rem;

  color:var(--text3);

  padding:.25rem .85rem 0;

  line-height:1.5;

}



/* ── Shift list (viimeisimmät vuorot) ── */

.shift-list{padding:.5rem .85rem;display:flex;flex-direction:column;gap:.3rem}

.shift-list-empty{padding:.75rem;text-align:center;color:var(--text3)}



.shift-row{

  display:flex;

  align-items:center;

  gap:.4rem;

  padding:.35rem .5rem;

  background:var(--surface2);

  border-radius:6px;

  border:1px solid var(--border);

}

.shift-row.open{border-color:var(--green);background:var(--green-bg)}

.shift-date{font-size:.65rem;color:var(--text3);font-family:'DM Mono',monospace;min-width:44px}

.shift-name{font-size:.72rem;font-weight:600;color:var(--text2);flex-shrink:0}

.shift-time{font-size:.78rem;font-family:'DM Mono',monospace;flex:1}

.shift-hours{font-size:.72rem;font-family:'DM Mono',monospace;color:var(--text2)}





/* ============================================================

   Etusivun digikello — DSEG7 LCD-tyyli

   ============================================================ */



/* DSEG7-Classic Bold — fontsource via jsDelivr (versioitu, OFL) */

@font-face {

  font-family: 'DSEG7Classic';

  src: url('https://cdn.jsdelivr.net/npm/@fontsource/dseg7-classic@5.2.5/files/dseg7-classic-latin-700-normal.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



/* ── Vaalea teema (oletus): "positive LCD" — vain numerot, ei taustaa ── */

.portal-hero-clock{

  font-family:'DSEG7Classic','DM Mono',monospace !important;

  font-weight:700;

  color:var(--text);

  background:transparent;

  border:none;

  padding:0;

  display:inline-flex;

  align-items:baseline;

  gap:.05em;

  letter-spacing:.04em;

  line-height:1;

  text-shadow:none;

}



/* "Haamu"-segmentit taustalla (vaalea teema) — aito LCD-tunnelma */

.portal-hero-clock .hc-num{

  position:relative;

}

.portal-hero-clock .hc-num::before{

  content:'88';

  position:absolute;

  inset:0;

  color:var(--text);

  opacity:.07;

  pointer-events:none;

}



/* ── Tumma teema: "negative LCD" — vihreä numero mustalla taustalla ── */

[data-theme="dark"] .portal-hero-clock{

  color:#5ee68f;

  background:#0e0f11;

  border:1px solid #1f2937;

  border-radius:6px;

  padding:.4rem .85rem;

  text-shadow:0 0 8px rgba(94,230,143,.55), 0 0 2px rgba(94,230,143,.8);

}

[data-theme="dark"] .portal-hero-clock .hc-num::before{

  color:#5ee68f;

  opacity:.1;

}



/* Vilkkuva kaksoispiste */

.portal-hero-clock .hc-sep{

  animation: hc-blink 1s steps(2, end) infinite;

}

@keyframes hc-blink{

  50%{opacity:.25}

}



@media (prefers-reduced-motion: reduce){

  .portal-hero-clock .hc-sep{animation:none}

}

/* ============================================================

   Page context bar — kertoo, mille ravintolalle sivu kuuluu

   Käytössä: views/kassa.php, views/vuoro.php

   ============================================================ */



.page-context-bar{

  display:none;

  align-items:center;

  gap:.5rem;

  padding:.5rem .85rem;

  background:var(--accent-bg);

  border-left:3px solid var(--accent);

  border-radius:0 6px 6px 0;

  font-size:.82rem;

  font-weight:600;

  color:var(--accent-text);

}

.page-context-bar.show{display:flex}

.page-context-bar .pcb-dot{

  width:9px;

  height:9px;

  border-radius:50%;

  background:var(--accent);

  flex-shrink:0;

}

.page-context-bar .pcb-name{font-weight:700}

.page-context-bar .pcb-meta{

  margin-left:auto;

  font-size:.65rem;

  font-weight:500;

  opacity:.7;

  text-transform:uppercase;

  letter-spacing:.05em;

}

/* ============================================================

   Card Polish — etusivun kortit

   ============================================================ */



/* ── Skeleton-loaderit (Ladataan-tilan korvaaja) ── */

.skel{

  background:linear-gradient(90deg,var(--surface2) 0%,var(--border) 50%,var(--surface2) 100%);

  background-size:200% 100%;

  border-radius:4px;

  animation:skel-shimmer 1.5s ease-in-out infinite;

  display:inline-block;

}

@keyframes skel-shimmer{

  0%{background-position:200% 0}

  100%{background-position:-200% 0}

}

.skel-line{

  display:block;

  height:.85em;

  margin:.4rem 0;

}

.skel-w-30{width:30%}

.skel-w-50{width:50%}

.skel-w-70{width:70%}

.skel-w-100{width:100%}

.skel-block{padding:.5rem .85rem}



@media (prefers-reduced-motion: reduce){

  .skel{animation:none;opacity:.6}

}



/* ── Empty state: pienempi rivi tyhjille korteille ── */

#portal-msgs.is-empty,

#portal-today-shifts.is-empty,

#portal-today-kassa.is-empty,

#portal-notices.is-empty{

  min-height:36px !important;

}

.portal-empty{

  color:var(--text3);

  font-size:.78rem;

  font-style:italic;

  padding:.4rem .5rem;

  text-align:center;

}



/* ── Kassa tänään: parempi typografia ── */

.portal-kassa-cell-lbl{

  font-size:.58rem;

  font-weight:700;

  color:var(--text3);

  text-transform:uppercase;

  letter-spacing:.07em;

  margin-bottom:.15rem;

}

.portal-kassa-cell-val{

  font-family:'DM Mono',monospace;

  font-size:1.1rem;

  font-weight:700;

  color:var(--text);

  letter-spacing:-.01em;

}

.portal-kassa-cell-val.empty{

  color:var(--text3);

  font-weight:400;

  font-size:.95rem;

}



/* ── Tänään töissä: vuoron kesto -merkki ── */

.portal-shift-dur{

  font-family:'DM Mono',monospace;

  font-size:.7rem;

  color:var(--text3);

  background:var(--surface2);

  padding:.05rem .35rem;

  border-radius:3px;

  margin-left:.3rem;

}



/* ── Hero AI-prefiksi: piilota tai pienenna ── */

.portal-hero-greet .greet-prefix,

.portal-hero-greet [data-prefix],

.portal-hero-greet > span:first-child:not(.greet-emoji):not(.greet-text):not(.greet-actions){

  display:none !important;

}

/* ============================================================

   Navbar-kello + Font Awesome iconit topbarissa

   ============================================================ */



/* ── Topbar-vasen: kellopalkki ── */

.topbar-left{

  display:flex;

  align-items:center;

  min-width:90px;

}



.top-clock-block{

  display:inline-flex;

  flex-direction:column;

  align-items:flex-start;

  line-height:1;

  gap:.15rem;

}



.top-clock{

  font-family:'DSEG7Classic','DM Mono',monospace;

  font-weight:700;

  font-size:1rem;

  color:var(--text);

  letter-spacing:.04em;

  display:inline-flex;

  align-items:baseline;

  gap:.05em;

  line-height:1;

  padding:.15rem .35rem;

  border-radius:4px;

}



.top-clock .tc-sep{

  animation: tc-blink 1s steps(2, end) infinite;

}

@keyframes tc-blink{

  50%{opacity:.25}

}

@media (prefers-reduced-motion: reduce){

  .top-clock .tc-sep{animation:none}

}



.top-clock-day{

  font-family:'DM Mono',monospace;

  font-size:.6rem;

  color:var(--text3);

  font-weight:700;

  letter-spacing:.08em;

  padding:0 .35rem;

}



/* ── Tumma teema: negative LCD vihreällä hehkulla ── */

[data-theme="dark"] .top-clock{

  color:#5ee68f;

  background:#0e0f11;

  border:1px solid #1f2937;

  text-shadow:0 0 5px rgba(94,230,143,.5), 0 0 1px rgba(94,230,143,.8);

}

[data-theme="dark"] .top-clock-day{

  color:#5ee68f;

  opacity:.55;

}



/* ── Mobiili: kellon compact ── */

@media (max-width: 720px){

  .topbar-left{min-width:70px}

  .top-clock{font-size:.82rem;padding:.1rem .25rem}

  .top-clock-day{font-size:.52rem}

}



@media (max-width: 480px){

  .top-clock-day{display:none}

}



/* ── Font Awesome iconit navbtnissa: oikea koko ja keskitys ── */

.navbtn-ic > .fa-solid,

.navbtn-ic > .fas{

  font-size:1.05rem;

  line-height:1;

  display:inline-block;

  vertical-align:middle;

}



/* Aktiivinen sivu: korostettu icon */

.navbtn.active .navbtn-ic > .fa-solid,

.navbtn.active .navbtn-ic > .fas{

  color:var(--accent);

}



/* Action-painikkeiden iconit (Teema, Ulos): hieman pienempi */

.navbtn-action .navbtn-ic > .fa-solid,

.navbtn-action .navbtn-ic > .fas{

  font-size:.95rem;

}



/* ─── Refactor: layout.php — banner name color ─── */

.rav-banner-name{color:var(--accent)}



/* ─── Refactor: login.php (style block منتقل شده + کلاس‌های جدید) ─── */

.page-center{background:var(--bg)}

.rav-option{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem .85rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all var(--t);font-size:.9rem;font-weight:500;font-family:inherit;color:var(--text)}

.rav-option:hover{border-color:var(--accent);color:var(--accent-text)}

.rav-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}

.text-left{text-align:left}

.login-link{font-size:.78rem;color:var(--text3)}

.login-forgot-wrap{margin-top:1.25rem;text-align:center}

.login-register-wrap{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);text-align:center}



/* ─── Refactor: register.php ─── */

.login-err-sub{color:var(--red-text);margin-bottom:1.5rem}

.login-card-wide{max-width:380px}

.register-required-note{font-size:.74rem;color:var(--text3);text-align:left;margin-bottom:.8rem;line-height:1.5}

.field-optional{color:var(--text3);font-weight:400}

.flex-2{flex:2}

.field-hint{font-size:.72rem;color:var(--text3);margin-bottom:.4rem}

.pw-match{font-size:.72rem;margin-top:.35rem}

.pw-match.ok{color:var(--green-text)}

.pw-match.err{color:var(--red-text)}

.register-footer{font-size:.72rem;color:var(--text3);margin-top:1rem;line-height:1.5}



/* ─── Refactor: reports.php + utilities ─── */

.gap-half{gap:.4rem}

.month-label{font-size:.75rem;font-family:'DM Mono',monospace;color:var(--text2)}

.tbl-loading{text-align:center;padding:1.5rem;color:var(--text3)}



/* ─── Refactor: schedule.php (style block + inline → classes) ─── */

.sched-topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:.45rem .85rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;position:sticky;top:49px;z-index:40}

.sched-week-label{font-size:.78rem;font-weight:600;font-family:'DM Mono',monospace;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:.22rem .65rem}

.sched-topbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-wrap:wrap}

.sched-page{padding:.75rem}

.sched-rav-filters{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap}

.sched-tbl-wrap{overflow-x:auto}

.sched-tbl{border-collapse:collapse;width:100%;table-layout:fixed;min-width:440px}



/* Schedule cells — cursor شرطی با body class .sc-mgr */

.sc-cell{border:1px solid var(--border);text-align:center;font-family:'DM Mono',monospace;font-size:.63rem;font-weight:600;padding:.13rem .05rem;line-height:1.3;position:relative;cursor:default}

.sc-mgr .sc-cell{cursor:pointer}

.sc-cell.emp{background:var(--surface);border:1px solid var(--border);text-align:left;padding:.28rem .4rem;vertical-align:middle;cursor:default}

.sc-mgr .sc-cell.emp{cursor:default}

.sc-cell.empty{background:var(--surface2);color:var(--text3)}

.sc-cell.empty:hover{background:var(--border)}

.sc-cell.dur{font-size:.58rem;color:var(--text3);background:var(--bg);cursor:default}

.sc-mgr .sc-cell.dur{cursor:default}

.sc-cell::after{content:'';height:2px;display:block;position:absolute;bottom:0;left:0;right:0}

.sc-sep td{height:3px;background:var(--bg);border:none}



/* Schedule table head */

.sc-th-name{text-align:left;font-size:.58rem;padding:.28rem .35rem;background:var(--surface2);border:1px solid var(--border)}

.sc-th-day{background:var(--surface2);font-size:.62rem;font-weight:700;text-align:center;padding:.28rem .1rem;border:1px solid var(--border)}

.sc-th-day.today{color:var(--accent);border-bottom:2px solid var(--accent)}

.sc-th-date{font-weight:400;font-size:.54rem}

.sc-emp-name{font-weight:700;font-size:.76rem;font-family:'Youth',sans-serif}

.sc-empty-plus{opacity:.2}



/* Rav filter pills */

.rv-pill{padding:.22rem .65rem;border-radius:20px;border:1px solid var(--border);font-size:.73rem;cursor:pointer;background:var(--surface);color:var(--text2);transition:all .12s}



/* Popup form classes */

.prav{flex:1;padding:.22rem .18rem;border-radius:4px;border:1px solid var(--border);font-size:.63rem;font-weight:700;cursor:pointer;text-align:center;background:var(--surface2);color:var(--text2);font-family:inherit;transition:all .12s}

.ptmpl{width:100%;padding:.25rem .45rem;border-radius:4px;border:1px solid var(--border);font-size:.7rem;cursor:pointer;text-align:left;background:var(--surface2);color:var(--text2);font-family:'DM Mono',monospace;display:flex;justify-content:space-between;transition:all .12s}

.ptmpl:hover,.ptmpl.sel{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text)}



/* Schedule popup */

.sched-popup{padding:.85rem;width:230px}

.sched-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}

.sched-pop-title{font-size:.8rem}

.sched-pop-section{margin-bottom:.45rem}

.sched-pop-label{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}

.sched-pop-label-sm{font-size:.6rem;color:var(--text3);margin-bottom:.15rem}

.sched-pop-ravs{display:flex;gap:.25rem}

.sched-pop-tmpls{display:flex;flex-direction:column;gap:.18rem}

.sched-pop-times{display:flex;gap:.3rem;margin-bottom:.45rem}

.sched-pop-time-col{flex:1}

.sched-pop-input{font-size:.8rem;padding:.28rem .4rem}

.sched-pop-actions{display:flex;gap:.28rem}



/* User-list (admin section under schedule) */

.ur-row{display:flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.38rem .6rem}

.ur-row-name{flex:1;font-weight:600;font-size:.82rem}

.ur-move-col{display:flex;flex-direction:column;gap:.12rem}

.btn-tiny{width:20px;height:16px;padding:0;font-size:.58rem}

.flex-col.gap-1-tight,.flex.flex-col.gap-1-tight{gap:.35rem}



/* ─── Refactor: profile.php ─── */

.profile-page{display:flex;flex-direction:column;gap:1rem}

.profile-usr-card{padding:.55rem .7rem}

.usr-dd-label{font-size:.68rem;color:var(--text3);flex-shrink:0}

.usr-dd-cur{font-weight:600;font-size:.88rem;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.profile-head-card{padding:1.25rem;display:flex;align-items:center;gap:1.1rem}

.profile-head-info{flex:1;min-width:0}

.profile-name{font-family:'Youth',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.04em}

.profile-start{margin-top:.2rem;font-size:.7rem;color:var(--text3)}

.profile-sched-nav{display:flex;align-items:center;gap:.35rem}

.profile-pw-lbl{font-size:.7rem;font-family:'DM Mono',monospace;color:var(--text2)}

.profile-sched-wrap{overflow-x:auto;padding:.4rem}

.profile-sched-tbl{border-collapse:collapse;width:100%;font-size:.7rem}

.profile-sched-loading{padding:.75rem;text-align:center;color:var(--text3)}

.profile-sched-empty{padding:.75rem;text-align:center;color:var(--text3);font-size:.75rem}

.ps-th-name{text-align:left;min-width:58px;background:var(--surface2);border:1px solid var(--border);font-size:.58rem;padding:.22rem .3rem}

.ps-th-day{background:var(--surface2);border:1px solid var(--border);font-size:.58rem;text-align:center;padding:.22rem .1rem}

.ps-th-day.today{color:var(--accent);border-bottom:2px solid var(--accent)}

.ps-th-date{font-weight:400;font-size:.54rem}

.ps-row-me{background:var(--accent-bg)}

.ps-row-name{border:1px solid var(--border);padding:.2rem .38rem;font-weight:600;font-size:.7rem;white-space:nowrap}

.ps-row-cell{border:1px solid var(--border);text-align:center;font-family:'DM Mono',monospace;font-size:.63rem;padding:.12rem .05rem}



.basic-view{padding:.5rem .85rem;display:flex;flex-direction:column;gap:.28rem}

.info-row{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;border-bottom:1px solid var(--border)}

.info-row-last{border-bottom:none}

.info-icon{width:20px;text-align:center;color:var(--text3);font-size:.85rem}

.info-label{font-size:.7rem;color:var(--text3);width:80px}

.info-value{font-size:.85rem;color:inherit;text-decoration:none}

.info-empty{font-size:.78rem;color:var(--text3)}

.soc-v-row{display:flex;flex-wrap:wrap;gap:.4rem;flex:1}



.basic-edit{padding:.6rem .85rem;display:flex;flex-direction:column;gap:.42rem}

.basic-edit.hidden{display:none}

.soc-edit{padding:.2rem .85rem .6rem;display:flex;flex-direction:column;gap:.35rem}

.soc-edit.hidden{display:none}

.soc-edit-label{font-size:.68rem;color:var(--text3);margin-bottom:.1rem}

.soc-edit-row{display:flex;align-items:center;gap:.5rem}

.social-icon-sm{width:24px;height:24px;font-size:.78rem;flex-shrink:0}

.soc-edit-name{font-size:.7rem;color:var(--text3);width:70px;flex-shrink:0}

.soc-edit-input{flex:1;font-size:.8rem}



.card-textarea-body{padding:.75rem 1rem}

.textarea-view{font-size:.88rem;line-height:1.7}

.textarea-view-empty{color:var(--text3);font-style:italic}

.note-view{font-size:.85rem;white-space:pre-wrap}



.dev-card-head{cursor:pointer;user-select:none}

.dev-card-label{color:#ea580c}

.dev-caret{font-size:.8rem;color:var(--text3);transition:transform .2s;display:inline-block}

.dev-info-text{padding:.5rem 1rem .3rem;font-size:.74rem;color:var(--text3);line-height:1.6}

.dev-section-wrap{padding:0 1rem .9rem}

.dev-section-label{font-size:.66rem;font-weight:700;color:var(--text3);letter-spacing:.04em;margin:.3rem 0 .15rem;text-transform:uppercase}

.dev-section-label-mt{margin-top:1rem}

.dev-empty{font-size:.8rem;color:var(--text3);padding:.5rem 0}

.dev-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .1rem;border-bottom:1px solid var(--border)}

.dev-row-icon{width:34px;height:34px;border-radius:8px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}

.dev-row-info{flex:1;min-width:0}

.dev-row-name{font-size:.88rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dev-row-seen{font-size:.7rem;color:var(--text3);font-family:'DM Mono',monospace}

.dev-row-revoke{color:var(--red-text,#c0392b);border-color:var(--red-text,#c0392b);flex-shrink:0}



.zodiac{color:var(--accent);font-size:1.05rem}



.file-list{padding:.5rem .85rem;display:flex;flex-direction:column;gap:.35rem}

.file-list-empty{font-size:.78rem;color:var(--text3);padding:.25rem 0}

.file-upload-zone{margin:.5rem .85rem;border:2px dashed var(--border);border-radius:7px;padding:.75rem;text-align:center}

.file-upload-hint{font-size:.75rem;color:var(--text3);margin-bottom:.45rem}

.file-upload-row{display:flex;gap:.4rem}

.file-desc-input{flex:1;font-size:.78rem}

.file-item{display:flex;align-items:center;gap:.55rem;padding:.38rem .5rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border)}

.file-item-info{flex:1;min-width:0}

.file-item-link{font-size:.8rem;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.file-item-meta{font-size:.68rem;color:var(--text3);font-family:'DM Mono',monospace}

.file-item-del{color:var(--red)}



.m-0{margin:0}



/* ─── Refactor: app.php ─── */

.portal-page-wrap{display:flex;flex-direction:column;gap:1rem;padding:0 .2rem}

.portal-section-body{padding:.5rem .85rem;min-height:60px}

.card-label-lg{font-size:.85rem}

.portal-kassa-body{padding:.6rem .85rem;display:flex;flex-direction:column;gap:.5rem;min-height:60px}

.mb-half{margin-bottom:.5rem}



/* Notice editor */

.notice-editor{padding:.6rem .85rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem}

.notice-editor.hidden{display:none}

.notice-textarea{font-size:.82rem;resize:vertical}

.notice-row{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}

.notice-all-label{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--text2);cursor:pointer;margin-left:auto}

.notice-checkbox{width:15px;height:15px;cursor:pointer}

.notice-actions{display:flex;justify-content:flex-end;gap:.4rem}

.notice-card{border-radius:6px;padding:.55rem .7rem;position:relative}

.notice-content{font-size:.88rem;line-height:1.55}

.notice-card-tools{display:flex;gap:.3rem;margin-top:.35rem}

.notice-edit-wrap{margin-top:.4rem}

.notice-edit-wrap.hidden{display:none}

.notice-edit-row{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:.35rem}

.notice-edit-textarea{font-size:.82rem;resize:vertical;width:100%}

.notice-edit-actions{display:flex;gap:.35rem;margin-top:.35rem;justify-content:flex-end}



/* Portal messages */

.portal-msgs-list{padding:.5rem .85rem;display:flex;flex-direction:column;gap:.4rem;min-height:60px}

.portal-msg-input-row{padding:.5rem .85rem;display:flex;gap:.4rem;align-items:center;border-top:1px solid var(--border)}

.portal-msg-input{flex:1;font-size:.82rem}

.emoji-picker{padding:.4rem .85rem;display:flex;flex-wrap:wrap;gap:.2rem;border-top:1px solid var(--border);max-height:120px;overflow-y:auto}

.emoji-picker.hidden{display:none}

.portal-msg-content{display:flex;align-items:flex-start;gap:.4rem}

.portal-msg-text-flex{flex:1}

.portal-msg-actions{display:flex;gap:.2rem;flex-shrink:0}



/* Portal shift row */

.portal-shift-row.is-me{background:var(--accent-bg,#fff3e8);padding:.32rem .4rem;border-radius:4px}

.portal-shift-me{color:var(--accent);font-weight:600}



/* Portal kassa tile */

.portal-kassa-tile-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}



/* ─── Refactor: admin.php (style block منتقل + کلاس‌های جدید) ─── */

.admin-page{display:flex;flex-direction:column;gap:1rem}

.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}

.stat-icon{font-size:1.8rem}

.stat-num{font-size:1.4rem;font-weight:700}



.admin-rest-list{display:flex;flex-direction:column;gap:.75rem}

.admin-dev-list{display:flex;flex-direction:column;gap:.4rem}

.admin-card-mb{margin-bottom:.75rem}

.admin-card-body-col{display:flex;flex-direction:column;gap:.6rem}

.admin-section-h{font-size:.9rem}

.admin-inv-role{width:140px}

.admin-inv-email{flex:1;min-width:180px}

.admin-set-body{display:flex;flex-direction:column;gap:.6rem}

.admin-set-actions{padding:.75rem 1rem;border-top:1px solid var(--border)}

.admin-set-field{margin:0;margin-bottom:.45rem}

.admin-field{margin:0;margin-bottom:.5rem}

.admin-chkbox-row{display:flex;align-items:center;gap:.4rem;cursor:pointer}

.admin-chkbox-mt{margin-top:.4rem}

.admin-rm-modal{max-width:500px}

.admin-shift-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}



/* Invite result box */

.invite-result{padding:.65rem;background:var(--green-bg);border:1px solid var(--green);border-radius:6px}

.invite-result.hidden{display:none}

.invite-result-label{font-size:.72rem;color:var(--text3);margin-bottom:.25rem}

.invite-result-url{font-family:'DM Mono',monospace;font-size:.75rem;word-break:break-all;color:var(--green-text)}

.invite-copy-btn{margin-top:.4rem}



/* Restaurant row (منتقل از style-block) */

.rest-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}

.rest-head{padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem}

.rest-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}

.rest-slug{font-size:.7rem;font-family:'DM Mono',monospace;color:var(--text3)}

.rest-shifts{padding:.3rem 1rem .6rem;display:flex;flex-wrap:wrap;gap:.3rem}



/* Shift rows */

.sr-row{display:flex;align-items:center;gap:.35rem;padding:.25rem 0}

.sr-name-input{flex:1;font-size:.78rem}

.sr-time-input{width:90px;font-size:.78rem}

.sr-dash{color:var(--text3);font-size:.8rem}

.sr-del-btn{color:var(--red)}



/* Color picker */

.clr-wrap{display:flex;align-items:center;gap:.4rem}

.clr-prev{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);cursor:pointer}

.color-input-hidden{opacity:0;position:absolute;width:1px;height:1px}



/* Device cards in admin */

.dev-card-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.65rem 1rem;display:flex;align-items:center;gap:.6rem}

.dev-card-row.is-mine{border-color:var(--green)}

.dev-card-info{flex:1;min-width:0}

.dev-card-name{font-weight:600;font-size:.85rem}

.dev-card-meta{font-size:.7rem;font-family:'DM Mono',monospace;color:var(--text3)}



/* Small utilities used in admin */

.text-red{color:var(--red)}



/* ─── Profile debug fixes (toggle classes) ─── */

.avatar-wrap{cursor:default}

.avatar-wrap.avatar-editable{cursor:pointer}

.textarea-view.has-content{color:var(--text);font-style:normal}

.dev-caret.rotated{transform:rotate(180deg)}



/* ─── Avatar delete button (فقط hover/tap) ─── */

.avatar-wrap{position:relative;display:inline-block;width:88px;height:88px}

.avatar-del-btn{position:absolute;top:-2px;right:-2px;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);background:var(--red,#dc2626);color:#fff;font-size:.75rem;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;pointer-events:none;transition:opacity .15s ease}

.avatar-del-btn:hover{background:#b91c1c}



/* دسکتاپ: نمایش با hover */

@media (hover:hover) and (pointer:fine){

  .avatar-wrap:hover .avatar-del-btn:not(.hidden){opacity:1;pointer-events:auto}

}



/* موبایل: نمایش با tap روی wrap */

@media (hover:none),(pointer:coarse){

  .avatar-wrap.show-del .avatar-del-btn:not(.hidden){opacity:1;pointer-events:auto}

}



/* ─── Profile combined card (avatar + perustiedot) — responsive ─── */

.profile-combined-card{overflow:hidden}

.profile-combined-head{display:flex;flex-direction:column;gap:1.1rem;padding:1.25rem 1rem 1rem}

.profile-avatar-zone{display:flex;justify-content:center;align-items:flex-start}

.profile-info-zone{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}

.profile-info-head{display:flex;align-items:center;justify-content:space-between;padding:0 .25rem .35rem;border-bottom:1px solid var(--border)}

.profile-combined-card .basic-view{padding:.25rem 0 0}

.profile-combined-card .basic-edit{padding:.4rem 0 0;display:flex;flex-direction:column;gap:.5rem}

.profile-combined-card .soc-edit{padding:.6rem 0 0;display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--border);margin-top:.4rem}

.info-value-strong{font-weight:700;font-family:'Youth',sans-serif;letter-spacing:.02em;font-size:.95rem}



/* Avatar فوق‌العاده بزرگ */

.profile-avatar-zone .avatar-wrap{width:160px;height:160px}

.profile-avatar-zone .avatar-img{width:160px;height:160px;border-width:4px}

.profile-avatar-zone .avatar-del-btn{width:30px;height:30px;font-size:1rem;top:2px;right:2px;border-width:3px}

.profile-avatar-zone .avatar-overlay{font-size:2rem}



/* دسکتاپ: کنار هم */

@media (min-width:640px){

  .profile-combined-head{flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem}

  .profile-avatar-zone{flex-shrink:0;justify-content:flex-start}

  .profile-avatar-zone .avatar-wrap{width:180px;height:180px}

  .profile-avatar-zone .avatar-img{width:180px;height:180px}

}



/* دسکتاپ بزرگ: عکس بزرگتر */

@media (min-width:900px){

  .profile-avatar-zone .avatar-wrap{width:200px;height:200px}

  .profile-avatar-zone .avatar-img{width:200px;height:200px}

}



/* ════════════════════════════════════════════════════

   NAVBAR REDESIGN v2 — emoji icons, flex-wrap, no clock

   ════════════════════════════════════════════════════ */



/* Override: navbar حالا کل عرض topbar رو می‌گیره و wrap می‌شه */

.topbar{

  padding:.55rem .65rem;

  display:flex;

  align-items:center;

  justify-content:center;

  border-bottom:1px solid var(--border);

  background:var(--surface);

}



.navbar{

  display:flex !important;

  flex-wrap:wrap !important;

  justify-content:center;

  align-items:stretch;

  gap:.45rem;

  width:100%;

  overflow:visible !important;

  flex:none !important;

}



/* دکمه‌ی جدید: بزرگ‌تر، emoji-friendly */

.navbtn{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:.25rem;

  flex:1 1 80px;

  max-width:120px;

  min-width:74px;

  min-height:62px;

  padding:.5rem .4rem;

  border-radius:14px;

  border:1.5px solid transparent;

  background:var(--surface2);

  color:var(--text2);

  text-decoration:none;

  font-family:inherit;

  cursor:pointer;

  transition:transform .12s ease, background .12s, color .12s, border-color .12s, box-shadow .12s;

}



.navbtn:hover{

  background:var(--accent-bg,#fff3e8);

  color:var(--accent);

  transform:translateY(-1px);

}



.navbtn:active{

  transform:translateY(0);

}



.navbtn.active{

  background:var(--accent-bg,#fff3e8);

  color:var(--accent);

  border-color:var(--accent);

  box-shadow:0 2px 6px -2px rgba(0,0,0,.15);

}



/* Home navbtn: the label IS the active restaurant short name, so

   colour it with --accent at all times (passive rest indicator). */

.navbtn-home .navbtn-lb{

  color:var(--accent);

  font-weight:700;

  letter-spacing:.03em;

}



.navbtn-ic{

  font-size:2rem;

  line-height:1;

  display:block;

}



.navbtn-lb{

  font-size:.66rem;

  font-weight:600;

  letter-spacing:.02em;

  white-space:nowrap;

  line-height:1.1;

}



/* بزرگ‌ترین: دسکتاپ */

@media (min-width:900px){

  .navbtn{min-height:64px;padding:.55rem .5rem}

  .navbtn-ic{font-size:2.7rem}

  .navbtn-lb{font-size:.7rem}

}



/* موبایل کوچک: کمی فشرده‌تر ولی هنوز قابل tap */

@media (max-width:380px){

  .navbar{gap:.3rem}

  .navbtn{flex:1 1 70px;min-width:64px;min-height:56px;padding:.4rem .25rem}

  .navbtn-ic{font-size:2.35rem}

  .navbtn-lb{font-size:.58rem}

}



/* logout: hover قرمز */

#btn-logout:hover{

  background:#fee2e2;

  color:#dc2626;

  border-color:#dc2626;

}

[data-theme="dark"] #btn-logout:hover{

  background:#3a1414;

}



/* ════════════════════════════════════════════════════

   BANNER REDESIGN — dot + clean text + subtle elevation

   ════════════════════════════════════════════════════ */

.rav-banner-wrap{

  position:relative;

  display:flex;

  justify-content:center;

  padding:.6rem .75rem;

  background:var(--bg);

}



.rav-banner{

  cursor:pointer;

  user-select:none;

  display:inline-flex;

  align-items:center;

  gap:.55rem;

  padding:.45rem .95rem;

  border-radius:999px;

  background:var(--surface);

  border:1px solid var(--border);

  box-shadow:0 1px 3px rgba(0,0,0,.04);

  transition:box-shadow .15s, border-color .15s, transform .12s;

  width:auto;

  min-width:180px;

  justify-content:center;

}



.rav-banner:hover{

  box-shadow:0 3px 10px -2px rgba(0,0,0,.1);

  border-color:var(--accent);

  opacity:1;

  transform:translateY(-1px);

}



.rav-banner-dot{

  width:12px;

  height:12px;

  border-radius:50%;

  flex-shrink:0;

  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px currentColor;

  color:var(--border);

  background:#999;

}



.rav-banner-text{

  font-weight:700;

  font-size:.92rem;

  font-family:'Youth','DM Mono',sans-serif;

  letter-spacing:.02em;

  color:var(--text);

}



.rav-caret{

  font-size:.7em;

  opacity:.5;

  transition:transform .2s;

  margin-left:.1rem;

}



/* dark mode banner */

[data-theme="dark"] .rav-banner{

  box-shadow:0 1px 3px rgba(0,0,0,.3);

}

[data-theme="dark"] .rav-banner:hover{

  box-shadow:0 3px 12px -2px rgba(0,0,0,.5);

}



/* ════════════════════════════════════════════════════

   SCHEDULE TABLE — mobile optimizations (fits in viewport)

   ════════════════════════════════════════════════════ */

@media (max-width:600px){

  .sched-page{padding:.5rem .3rem}

  .sched-rav-filters{gap:.3rem;margin-bottom:.45rem}

  .sched-tbl-wrap{overflow-x:visible}

  .sched-tbl{min-width:0;width:100%;table-layout:fixed}



  /* ستون اسم باریک‌تر */

  .sc-th-name,.sc-cell.emp{font-size:.55rem;padding:.2rem .25rem;width:54px}

  .sc-emp-name{font-size:.66rem;letter-spacing:-.01em;word-break:break-word;line-height:1.05}

  .sc-emp-name + .skill{font-size:.55rem;padding:.05rem .25rem}



  /* روزها کوچک‌تر */

  .sc-th-day{font-size:.55rem;padding:.18rem .02rem;letter-spacing:-.02em}

  .sc-th-date{font-size:.48rem}



  /* خانه‌های ساعت کم‌حجم */

  .sc-cell{font-size:.56rem;padding:.08rem 0;letter-spacing:-.02em}

  .sc-cell.dur{font-size:.5rem;padding:.04rem 0}

  .sc-empty-plus{font-size:.85rem}

}



@media (max-width:380px){

  .sc-th-name,.sc-cell.emp{width:46px;padding:.18rem .15rem}

  .sc-emp-name{font-size:.6rem}

  .sc-th-day{font-size:.52rem}

  .sc-th-date{font-size:.44rem}

  .sc-cell{font-size:.52rem}

}



/* ─────────────────────────────────────────────────────────────

   Mobile: prevent iOS Safari from auto-zooming when a text field

   gets focus. iOS only zooms when input font-size < 16px. We force

   ≥16px on phones via element selectors with !important so any

   later-loaded sheet (.dm-input, .sched-pop-input, etc.) can't

   silently re-trigger the zoom. Desktop (>768px) is untouched.

   User pinch-zoom remains enabled (no user-scalable=no in viewport).

   ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),

  textarea,

  select {

    font-size: 16px !important;

  }

}



/* ════════════════════════════════════════════════════════════

   iOS-style folder buttons in the navbar (Vuorot / Asetukset)

   ──────────────────────────────────────────────────────────── */

.navfolder { /* uses .navbtn base styles, swap big icon for mini-grid */ }

.navfolder-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: repeat(2, 1fr);

  gap: 2.5px;

  padding: 3px;

  background: rgba(0, 0, 0, 0.07);

  border-radius: 11px;

  width: 44px;

  height: 44px;

  flex-shrink: 0;

}

[data-theme="dark"] .navfolder-grid {

  background: rgba(255, 255, 255, 0.10);

}

.navfolder-grid-ic {

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--surface);

  border-radius: 7px;

  font-size: 1rem;

  line-height: 1;

}

[data-theme="dark"] .navfolder-grid-ic { background: var(--surface2); }



/* Active folder (page is inside this folder): subtle accent */

.navbtn.navfolder.active .navfolder-grid {

  background: var(--accent-bg, #fff3e8);

}



/* Desktop: slightly bigger to match navbtn-ic font-size 2.7rem */

@media (min-width: 900px) {

  .navfolder-grid { width: 56px; height: 56px; gap: 3px; padding: 4px; }

  .navfolder-grid-ic { font-size: 1.3rem; border-radius: 8px; }

}

@media (max-width: 380px) {

  .navfolder-grid { width: 38px; height: 38px; gap: 1.5px; padding: 2px; border-radius: 9px; }

  .navfolder-grid-ic { font-size: 0.88rem; border-radius: 5px; }

}



/* Popup — opens below the folder button */

.navfolder-popup {

  position: fixed;

  top: 0; left: 0;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 14px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);

  z-index: 1000;

  padding: 0.45rem;

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 200px;

  animation: navfolder-pop .14s ease-out;

}

.navfolder-popup[hidden] { display: none; }

@keyframes navfolder-pop {

  from { opacity: 0; transform: translateY(-4px) scale(.96); }

  to   { opacity: 1; transform: none; }

}

.navfolder-popup-item {

  display: flex;

  align-items: center;

  gap: 0.7rem;

  padding: 0.65rem 0.9rem;

  border-radius: 9px;

  text-decoration: none;

  color: var(--text);

  font-size: 0.94rem;

  font-weight: 500;

  border: 0;

  background: transparent;

  cursor: pointer;

  font-family: inherit;

  width: 100%;

  text-align: left;

  transition: background .12s, color .12s;

}

.navfolder-popup-item:hover {

  background: var(--accent-bg, #fff3e8);

  color: var(--accent);

}

.navfolder-popup-item.active {

  background: var(--accent-bg, #fff3e8);

  color: var(--accent);

  font-weight: 700;

}

.navfolder-popup-item#btn-logout:hover {

  background: #fee2e2;

  color: #dc2626;

}

.navfolder-popup-ic {

  font-size: 1.35rem;

  line-height: 1;

  flex-shrink: 0;

  width: 1.6rem;

  text-align: center;

}

.navfolder-popup-lb { flex: 1; }



/* Active-folder indicator: small orange dot at top-right corner

   when the current page lives inside this folder. */

.navbtn.navfolder.active { position: relative; }

.navbtn.navfolder.active::after {

  content: "";

  position: absolute;

  top: 6px;

  right: 6px;

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: var(--accent, #ff7a00);

  box-shadow: 0 0 0 2px var(--surface, #fff);

  pointer-events: none;

}



/* Tap animation: when finger/mouse is down, fold shrinks slightly */

.navbtn.navfolder:active {

  transform: scale(0.94);

  transition: transform 0.08s ease;

}



/* Badge inside the Asetukset popup (next to Ilmoitukset row) */

.navfolder-popup-item .nav-bell-badge {

  margin-left: auto;

  background: #dc2626;

  color: #fff;

  font-size: 0.7rem;

  font-weight: 700;

  padding: 0.1rem 0.45rem;

  border-radius: 999px;

  min-width: 18px;

  text-align: center;

  line-height: 1.3;

}

.navfolder-popup-item .nav-bell-badge[hidden] { display: none; }



/* Folder mini-grid: when an unread badge exists, show a tiny dot on the

   bell icon inside the Asetukset folder mini-grid too. */

.navfolder-grid-ic.has-unread {

  position: relative;

}

.navfolder-grid-ic.has-unread::after {

  content: "";

  position: absolute;

  top: 2px; right: 2px;

  width: 6px; height: 6px;

  border-radius: 50%;

  background: #dc2626;

  box-shadow: 0 0 0 1.5px var(--surface, #fff);

}


/* Small hint span used inside field labels — inherits parent color,
   just lighter via opacity so it works on both light and dark themes. */
.field-label-hint{font-weight:400;font-size:.7rem;opacity:.65;margin-left:.15rem}