/* =========================================================
   Restaurant Weekly Manager (RWM) - Common Styles
   Shared across Weekly Manager + Weekly Summary
   ========================================================= */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

input[data-purchase-field="amount"],
input[data-purchase-field="returned"],
input[data-purchase-field="balance"],
input[data-fixed-field="amount"],
input[data-payment-field="amount"],
input[data-worker-field="rate"],
input[data-worker-field="hours"],
input[data-worker-field="tips"],
input[data-worker-field="cash"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.rwm-main-tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }

.rwm-main-tab-btn { border: 1px solid #356ECC; background: #356ECC; color: #fff; padding: 6px 12px; cursor: pointer; font-size: 13px; }

.rwm-main-tab-btn.rwm-main-active { background: #fff; color: #356ECC; }

/* ---------- Main tabs as accordion on small screens (<= 500px) ---------- */
@media (max-width: 500px) {
  /* Prevent mobile browser scroll anchoring from jumping to the bottom
     when an accordion closes/opens and the page height changes. */
  .rwm-main-accordion,
  .rwm-main-accordion * {
    overflow-anchor: none;
  }

  .rwm-main-tabs-nav {
    display: none; /* buttons are moved into the accordion by JS */
  }

  .rwm-main-accordion {
    display: block;
    margin: 10px 0;
  }

  .rwm-acc-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .rwm-acc-item > .rwm-main-tab-btn {
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0;
    padding: 12px 42px 12px 12px;
    font-size: 15px;
    position: relative;
  }

  /* + / - indicator on accordion headers */
  .rwm-acc-item > .rwm-main-tab-btn::after {
    content: '+';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
  }

  .rwm-acc-item.rwm-open > .rwm-main-tab-btn::after {
    content: '-';
  }

  .rwm-acc-item.rwm-open > .rwm-main-tab-btn {
    background: #fff;
    color: #356ECC;
  }

  .rwm-acc-item > .rwm-main-panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 220ms ease;
  }

  /* When opened, allow the panel itself to scroll on small screens.
     This prevents dynamic blocks (e.g. Wages -> Unpaid) from being cut off. */
  .rwm-acc-item.rwm-open > .rwm-main-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.rwm-tab-btn, .rwm-add-worker-btn { border: 1px solid #356ECC; background: #356ECC; color: #fff; padding: 4px 10px; cursor: pointer; font-size: 13px; }

.rwm-tab-btn.rwm-tab-active { background: #fff; color: #356ECC; }

.rwm-income-tab-btn { border: 1px solid #356ECC; background: #356ECC; color: #fff; padding: 4px 10px; cursor: pointer; font-size: 13px; }

.rwm-income-tab-btn.rwm-income-active { background: #fff; color: #356ECC; }

.rwm-main-tab-btn.rwm-main-active {
                    background: #ffffff;
                    color: #356ECC;
                }

.rwm-tab-btn.rwm-tab-active {
                    background: #ffffff;
                    color: #356ECC;
                }

.rwm-income-tab-btn.rwm-income-active {
                    background: #ffffff;
                    color: #356ECC;
                }

@media (max-width: 768px) {
                    .rwm-main-tabs-nav { flex-wrap: wrap; }
                    .rwm-tabs-nav { flex-wrap: wrap; }
                    .rwm-worker-card { margin-top: 10px; }
                    .rwm-weekly-hours { flex-direction: row; }
                    .rwm-day-box { flex: 1 1 45%; }
                    .rwm-fixed-row { flex-direction: column; align-items: stretch; }
                    .rwm-fixed-date,
                    .rwm-fixed-amount,
                    .rwm-fixed-receipt,
                    .rwm-fixed-remove-wrap { max-width: 100%; }
                }

.datepicker,
                .datepicker-dropdown {
                    position: absolute !important;
                    z-index: 99999 !important;
                    width: auto !important;
                    background:#fff;
                }

.datepicker table {
                    width: auto !important;
                }

.rwm-wrap input[type="text"],
.rwm-wrap input[type="number"],
.rwm-wrap textarea,
.rwm-wrap select{
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.rwm-wrap input[type="file"]{
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.rwm-main-tab-btn,
.rwm-tab-btn,
.rwm-income-tab-btn, .rwm-purchase-tab-btn, .rwm-fixed-tab-btn{
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 8px 10px;
border-radius: 10px;
  /* NOTE: Comment translated/cleaned (Arabic removed). */
}

.datepicker{
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  padding: 10px !important;
  font-size: 14px !important;
}

.datepicker table{
  width: 100% !important;
}

.datepicker thead tr:first-child th{
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.datepicker th,
.datepicker td{
  width: 38px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

.datepicker td.day:hover{
  background: #eef2ff !important;
}

.datepicker td.active,
.datepicker td.active:hover{
  background: #356ECC !important;
  color: #fff !important;
  text-shadow: none !important;
}

.datepicker td.today{
  background: #fff7ed !important;
  border-radius: 8px !important;
}

.datepicker td.disabled,
.datepicker td.disabled:hover{
  color: #cbd5e1 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.rwm-main-tabs-nav{
  border-bottom: 1px solid #19526e !important;
  padding-bottom: 0 !important;
}

.rwm-main-tab-btn{
  background: #19526e !important;
  color: #fff !important;
  border: 1px solid #19526e !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
}

.rwm-main-tab-btn.rwm-main-active{
  background: #fff !important;
  color: #19526e !important;
  border: 1px solid #19526e !important;
  border-bottom: 1px solid #fff !important;
}

input[type=file]::file-selector-button {
  border: 2px solid #356ECC;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #356ECC;
  color:#fff;
  cursor:pointer;
}

.rwm-tab-btn.rwm-attn-worker:not(.rwm-tab-active){
  background:#8b0000 !important;
  border-color:#8b0000 !important;
  color:#fff !important;
}

.rwm-tab-btn.rwm-tab-active.rwm-attn-worker{
  background:#fff !important;
  border-color:#8b0000 !important;
  color:#8b0000 !important;
}

#rwm-lightbox.rwm-lightbox-overlay{
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(2px);
}

#rwm-lightbox .rwm-lightbox-content{
  position: relative;
}

#rwm-lightbox .rwm-lightbox-close{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.60) !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35) !important;

  font-size: 22px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;


  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  z-index: 10001 !important;
}

#rwm-lightbox .rwm-lightbox-close:hover{
  background: #8b0000 !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: scale(1.06);
}

#rwm-lightbox .rwm-lightbox-close:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(53,110,204,0.35), 0 10px 26px rgba(0,0,0,0.35) !important;
}

#rwm-lightbox .rwm-lightbox-prev,
#rwm-lightbox .rwm-lightbox-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35) !important;

  font-size: 30px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;


  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  z-index: 10001 !important;
}

#rwm-lightbox .rwm-lightbox-prev{ left: 14px !important; }

#rwm-lightbox .rwm-lightbox-next{ right: 14px !important; }

#rwm-lightbox .rwm-lightbox-prev:hover,
#rwm-lightbox .rwm-lightbox-next:hover{
  background: #356ECC !important;
  border-color: rgba(255,255,255,0.28) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

#rwm-lightbox .rwm-lightbox-prev:focus,
#rwm-lightbox .rwm-lightbox-next:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(53,110,204,0.35), 0 10px 26px rgba(0,0,0,0.35) !important;
}

#rwm-lightbox #rwm-lightbox-img{
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.rwm-purchase-tab-btn,
.rwm-fixed-tab-btn{
  border:1px solid #356ECC;
  background:#356ECC;     /* NOTE: Comment translated/cleaned (Arabic removed). */
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  line-height:1;
}

.rwm-purchase-tab-btn.rwm-tab-active,
.rwm-fixed-tab-btn.rwm-tab-active{
  background:#fff;        /* NOTE: Comment translated/cleaned (Arabic removed). */
  border-color:#356ECC;
  color:#356ECC;
}

.rwm-purchase-tab-btn.rwm-attn-purchase:not(.rwm-tab-active),
.rwm-fixed-tab-btn.rwm-attn-fixed:not(.rwm-tab-active){
  background:#8B0000 !important;
  border-color:#8B0000 !important;
  color:#fff !important;
}

.rwm-purchase-tab-btn.rwm-attn-purchase.rwm-tab-active,
.rwm-fixed-tab-btn.rwm-attn-fixed.rwm-tab-active{
  background:#fff !important;          /* NOTE: Comment translated/cleaned (Arabic removed). */
  border-color:#8B0000 !important;
  color:#8B0000 !important;             /* NOTE: Comment translated/cleaned (Arabic removed). */
}

#loginform{
  max-width: 520px;
  margin: 28px auto 40px;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

#loginform p{
  margin: 12px 0;
}

#loginform label{
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111827;
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"]{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  background: #fff;
  font-size: 15px;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus{
  border-color: #356ECC;
  box-shadow: 0 0 0 3px rgba(53,110,204,0.18);
}

#loginform .forgetmenot{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

#loginform .forgetmenot label{
  margin: 0;
  font-weight: 500;
  color: #374151;
}

#loginform input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

#loginform .submit{
  margin-top: 16px;
}

#loginform input[type="submit"]{
  width: 100%;
  height: 46px;
  background: #356ECC;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

#loginform input[type="submit"]:hover{
  filter: brightness(0.95);
}

#loginform input[type="submit"]:active{
  transform: translateY(1px);
}

@media (max-width: 600px){
  #loginform{
    max-width: 92vw;
    margin: 18px auto 28px;
    padding: 18px 16px;
    border-radius: 12px;
  }
}

@media (max-width: 600px){

  /* NOTE: Comment translated/cleaned (Arabic removed). */
  .rwm-wrap input[type="checkbox"]{
    flex-shrink: 0;
  }

  .rwm-wrap label:has(input[type="checkbox"]){
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

}

@media (max-width: 768px){
  .rwm-fixed-row .rwm-fixed-paid{
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 768px){
  #rwm-income-online .rwm-fixed-row{
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  #rwm-income-online .rwm-fixed-row .rwm-field{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px){
  .rwm-weekly-hours{
    display: block !important;      /* NOTE: Comment translated/cleaned (Arabic removed). */
    max-width: 400px !important;
    width: 100% !important;
  }

  .rwm-weekly-hours > *{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 600px){
  #rwm-income-epos .rwm-weekly-hours{
    display: block !important;      /* NOTE: Comment translated/cleaned (Arabic removed). */
    flex-wrap: wrap !important;     /* NOTE: Comment translated/cleaned (Arabic removed). */
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  #rwm-income-epos .rwm-day-box{
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 10px !important;
  }
}

.datepicker.dropdown-menu{
  border-radius:12px;
  padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.datepicker table{
  width:100%;
}

.datepicker table tr td,
.datepicker table tr th{
  border-radius:10px;
}

.datepicker-months .month,
.datepicker-years .year,
.datepicker-decades .decade,
.datepicker-centuries .century{
  display:inline-block;
  width:25%;
  padding:10px 0;
  margin:2px 0;
  border-radius:10px;
  text-align:center;
  cursor:pointer;
  font-weight:600;
}

.datepicker-months .month:hover,
.datepicker-years .year:hover,
.datepicker-decades .decade:hover,
.datepicker-centuries .century:hover{
  background:#f2f2f2;
}

.datepicker-months .month.active,
.datepicker-years .year.active,
.datepicker-decades .decade.active,
.datepicker-centuries .century.active{
  background:#356ECC !important;
  color:#fff !important;
}

.datepicker-months .month.disabled,
.datepicker-years .year.disabled,
.datepicker-decades .decade.disabled,
.datepicker-centuries .century.disabled{
  color:#bbb !important;
  cursor:not-allowed;
  background:transparent !important;
}

.datepicker.dropdown-menu{
  border-radius:12px !important;
  padding:12px !important;
  box-shadow:0 12px 30px rgba(0,0,0,0.18) !important;
}

.datepicker .datepicker-months table td span,
.datepicker .datepicker-years table td span,
.datepicker .datepicker-decades table td span,
.datepicker .datepicker-centuries table td span{
  display:block !important;
  float:left !important;
  width:25% !important;
  margin:2px 0 !important;
  padding:10px 0 !important;
  border-radius:10px !important;
  text-align:center !important;
  cursor:pointer !important;
  font-weight:600 !important;
}

.datepicker .datepicker-months table td,
.datepicker .datepicker-years table td,
.datepicker .datepicker-decades table td,
.datepicker .datepicker-centuries table td{
  width:100% !important;
}

.datepicker .datepicker-months table td span:hover,
.datepicker .datepicker-years table td span:hover,
.datepicker .datepicker-decades table td span:hover,
.datepicker .datepicker-centuries table td span:hover{
  background:#f2f2f2 !important;
}

.datepicker .datepicker-months table td span.active,
.datepicker .datepicker-years table td span.active,
.datepicker .datepicker-decades table td span.active,
.datepicker .datepicker-centuries table td span.active{
  background:#356ECC !important;
  color:#fff !important;
}

.datepicker .datepicker-months table td span.disabled,
.datepicker .datepicker-years table td span.disabled,
.datepicker .datepicker-decades table td span.disabled,
.datepicker .datepicker-centuries table td span.disabled{
  color:#bbb !important;
  cursor:not-allowed !important;
  background:transparent !important;
}

.datepicker:after, .datepicker:before{
  display:none !important;
}
/* =========================
   Date inputs (match Summary search bar)
   ========================= */
.rwm-wrap input.rwm-date-input,
.rwm-wrap input.rwm-date-manager,
.rwm-summary-wrap input.rwm-date-input{
  padding: 8px 12px !important;
  border: 2px solid #356ECC !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  outline: none !important;
  background: #fff !important;
}

.rwm-wrap input.rwm-date-input:focus,
.rwm-wrap input.rwm-date-manager:focus,
.rwm-summary-wrap input.rwm-date-input:focus{
  box-shadow: 0 0 0 2px rgba(53,110,204,0.2) !important;
}

.rwm-wrap input.rwm-date-input::placeholder,
.rwm-wrap input.rwm-date-manager::placeholder,
.rwm-summary-wrap input.rwm-date-input::placeholder{
  color: #9aa3af !important;
  font-weight: 600 !important;
}


/* ---------- Mobile section indicator bar (shows current open accordion title) ---------- */
.rwm-section-indicator{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 140ms ease, opacity 140ms ease;
}

.rwm-section-indicator.rwm-show{
  transform: translateY(0);
  opacity: 1;
}

.rwm-section-indicator__label{
  display: block;
  margin: 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #356ECC;
  color: #fff;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

@media (min-width: 501px){
  .rwm-section-indicator{ display:none !important; }
}


/* ✅ Active numeric input highlight (select-all on focus) */
.rwm-input-active{
  border-color:#4177A6 !important;
  box-shadow:0 0 0 2px rgba(65,119,166,0.25) !important;
  background: #F8FAFC;
}


/* Quick Add: new item flash indicator */
.rwm-qa-newflash{ background:#a8ccff !important; }