/* index.php additions on top of css/manual_modern.css (same palette).
   ROLLBACK: restore index.php.bak_before_redesign and js/lot_index.js.bak_before_slide. */

/* order panel needs more room than the manual page's control panel: grow the card and move what sits below it */
#update_table_div,#table_div,#order_table_div{height:208px !important}
#container{height:785px !important}
.bottom_btn{top:635px !important}
#responsecontainer,#responsecontainer2{top:278px !important}

/* ---------- order entry grid ---------- */
#time_data_table,#order_time_data_table{margin-bottom:2px}
#online_users{color:var(--gold2) !important;font-weight:600;letter-spacing:.4px;font-size:14px !important}
#sel_draw_time_left{color:var(--text) !important}
#game_time,#order_game_time,select.text{
  background:#0f0d19 !important;color:var(--text) !important;border:1px solid var(--line2) !important;border-radius:9px !important;
  height:32px !important;padding:0 8px;font:600 13px "Segoe UI",Arial,sans-serif;outline:none;
}
#game_time:focus,#order_game_time:focus{border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(246,196,69,.18)}
#game_time option,#order_game_time option{background:#1a1826;color:var(--text)}

#table_div #data_table{border-collapse:separate;border-spacing:0 1px}
#table_div #data_table thead th{color:var(--gold2) !important;background-color:transparent !important;border:0 !important;font-weight:700;letter-spacing:.4px;text-shadow:none !important}
#table_div #data_table td{background:transparent !important;border:0 !important;color:var(--text) !important;font-weight:600;text-shadow:none !important}
#table_div #data_table td.commontd_first{color:var(--gold2) !important;font-weight:800;letter-spacing:.3px}
#table_div #data_table td.commontxt{color:var(--text) !important}

.order_input{
  box-sizing:border-box;width:calc(100% - 6px) !important;height:24px !important;
  background:#0f0d19 !important;color:var(--gold2) !important;
  border:1px solid var(--line2) !important;border-radius:8px !important;
  font:700 14px "Segoe UI",Arial,sans-serif !important;text-align:center !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5) !important;outline:none;transition:border-color .15s,box-shadow .15s;
}
.order_input:focus{border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(246,196,69,.2) !important}
.order_input[readonly]{background:#17142a !important;color:var(--text) !important;border-color:var(--line) !important}
#total_tab_qty,#total_tab_price{width:calc(100% - 6px) !important;color:var(--gold) !important;font-size:15px !important}

#reset_table_button,#buy_table_button{width:112px !important;height:30px;margin-top:0 !important;padding:0 !important}
#buy_table_button{letter-spacing:.8px}

/* Voice-notification popup */
#sound-popup{background:rgba(7,7,12,.78) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#sound-popup .popup-content{background:linear-gradient(180deg,var(--card),#13111d) !important;border:1px solid var(--line2);border-radius:18px !important;box-shadow:0 30px 80px rgba(0,0,0,.7);
  margin:140px auto 0 !important;width:340px;max-width:90vw;padding:26px 24px !important}
#sound-popup h3{margin:0 0 4px;color:var(--gold2);font:700 18px "Segoe UI",Arial,sans-serif}
#btn-yes{background:linear-gradient(180deg,var(--gold2),var(--gold)) !important;color:#2a1d00 !important;border:0 !important;border-radius:11px !important;padding:10px 34px !important;
  font:800 13px "Segoe UI",Arial,sans-serif;letter-spacing:.6px;box-shadow:0 8px 18px rgba(246,196,69,.25)}
#btn-yes:hover{filter:brightness(1.06)}

/* login box (logged-out view) */
#login_div label{color:var(--muted) !important;font-size:12px !important;text-transform:uppercase;letter-spacing:.5px}
#login_div input.input{margin-left:6px !important}

/* footer links go below the All Results button / joker instead of under them */
#container{height:817px !important}
#footer_div{top:785px !important}
#footer_div a{color:var(--gold2) !important;font-weight:600 !important}

/* logo keeps its size next to the (wider) login box when logged out */
#logo_div,#logo_div .cycle-slideshow{width:250px !important}
#logo_div img{width:250px !important;height:auto !important}
#user_id,#user_pin{width:128px !important}
#login_div form{margin:0}

/* ---- extra compact order panel (small screens) ---- */
#table_div #data_table{border-spacing:0 3px}
#table_div #data_table thead th,#table_div #data_table td{padding-top:1px !important;padding-bottom:1px !important;line-height:1.1}
#table_div .order_input{height:22px !important}
#table_div #time_data_table{margin-bottom:0;margin-top:-4px}
#reset_table_button,#buy_table_button{height:28px;margin-top:6px !important}

/* ---- order panel sits higher: smaller logo, tabs closer to the login row ---- */
#logo_div img{width:200px !important;height:auto !important}
#tabbutton_div{margin-top:0 !important;margin-bottom:4px !important}

/* no box around the draw cards */
#update_numb_div{border:0 !important;background:transparent !important;box-shadow:none !important}

/* game names in white */
#table_div #data_table td.commontd_first{color:#fff !important}

/* ---- folder-style tabs: active = light, other = orange ---- */
#tabbutton_div{gap:4px !important;margin-bottom:0 !important;align-items:flex-end}
#tabbutton_div .topmenu_but{
  background:linear-gradient(180deg,#ffb347,#f28c1e) !important;color:#3b2204 !important;
  border:0 !important;border-radius:14px 14px 0 0 !important;margin:0 !important;padding:9px 20px 8px !important;
  font:700 12px Georgia,"Times New Roman",serif !important;letter-spacing:.5px;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
#tabbutton_div .topmenu_but:hover,#tabbutton_div .topmenu_but:focus{background:linear-gradient(180deg,#ffc266,#f69a30) !important;color:#3b2204 !important;padding:9px 20px 8px !important}
#tabbutton_div .topmenu_but.tab-active{background:linear-gradient(180deg,#ffffff,#d4d4d4) !important;color:#2a2a2a !important;text-shadow:none !important;padding-top:11px !important}

/* square top-left corner so the tab joins the panel */
#update_table_div,#table_div,#order_table_div{border-top-left-radius:0 !important}

/* ---- table header bar: orange like the inactive tab, WIN in red ---- */
#table_div #data_table thead th{
  background-color:#f6a02c !important;color:#3b2204 !important;
  font-family:Georgia,"Times New Roman",serif;font-variant-numeric:lining-nums;font-weight:700;padding-top:5px !important;padding-bottom:5px !important;
}
#table_div #data_table thead th.first_left{border-radius:8px 0 0 8px}
#table_div #data_table thead th:last-child{border-radius:0 8px 8px 0}
#table_div #data_table thead th:nth-child(2){color:#d0101a !important}

/* thin orange border with small rounded corners round the number table */
#table_div #data_table{border:1px solid rgba(242,140,30,.3);border-radius:9px;border-spacing:0 !important;width:100% !important;box-sizing:border-box}
#table_div #data_table tbody td{padding-top:3px !important;padding-bottom:3px !important}
#table_div #data_table thead th{padding-top:6px !important;padding-bottom:6px !important}
#table_div #data_table thead th.first_left{border-radius:8px 0 0 0}
#table_div #data_table thead th:last-child{border-radius:0 8px 0 0}

/* border round header + 3 game rows only (RESET / BUY row stays outside) */
#table_div #data_table{border:0 !important;border-radius:0}
#table_div #data_table thead th{border-top:1px solid rgba(242,140,30,.3) !important}
#table_div #data_table thead th.first_left{border-left:1px solid rgba(242,140,30,.3) !important;border-radius:9px 0 0 0}
#table_div #data_table thead th:last-child{border-right:1px solid rgba(242,140,30,.3) !important;border-radius:0 9px 0 0}
#table_div #data_table tbody tr:nth-child(-n+3) td.commontd_first{border-left:1px solid rgba(242,140,30,.3) !important}
#table_div #data_table tbody tr:nth-child(-n+3) td.commontd_last{border-right:1px solid rgba(242,140,30,.3) !important}
#table_div #data_table tbody tr:nth-child(3) td{border-bottom:1px solid rgba(242,140,30,.3) !important}
#table_div #data_table tbody tr:nth-child(3) td.commontd_first{border-radius:0 0 0 9px}
#table_div #data_table tbody tr:nth-child(3) td.commontd_last{border-radius:0 0 9px 0}
#table_div #data_table tbody td.commontd_first,#table_div #data_table tbody td.commontd_last{border-radius:0 !important}
#table_div #data_table tbody tr:nth-child(3) td.commontd_first{border-radius:0 0 0 9px !important}
#table_div #data_table tbody tr:nth-child(3) td.commontd_last{border-radius:0 0 9px 0 !important}

#table_div #data_table tbody tr:nth-child(3) td{padding-bottom:7px !important}

/* ---- golden shine sweeping across the whole header bar (two overlay spans over the header; a second beam starts when the first is half way) ---- */
.nl-shine{
  position:absolute;left:7px;top:44px;width:804px;height:26px;pointer-events:none;z-index:3;border-radius:9px 9px 0 0;
  background:linear-gradient(105deg,transparent 46%,rgba(255,226,140,.5) 50%,transparent 54%) no-repeat;background-size:300% 100%;
  background-position:130% 0;animation:nlShine 5s linear infinite;
}
.nl-shine2{animation-delay:2.5s}
@keyframes nlShine{0%{background-position:130% 0}100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.nl-shine{animation:none;display:none}}
#table_div #data_table thead th{background-image:linear-gradient(180deg,#ffb347,#f28c1e)}