/* ===== manual.php modern skin =====
   Loaded after css/default.css. It only changes how things look; the page layout, element ids and scripts are untouched.
   ROLLBACK: restore manual.php.bak_before_redesign (or remove the <link> to this file from manual.php). */

:root{--bg1:#07070c;--bg2:#15131f;--card:#1a1826;--card2:#221f31;--line:#34304a;--line2:#4a4470;--text:#ece9f6;--muted:#9a95b3;--gold:#f6c445;--gold2:#ffdf8a;--red:#ff6b7a}

body{
  background:radial-gradient(1100px 560px at 12% -10%,#2a2150 0,transparent 60%),radial-gradient(900px 500px at 100% 0,#3a2a12 0,transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg2)) !important;
  background-attachment:fixed !important;
  color:var(--text) !important;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif !important;
  font-size:13px !important;
  text-shadow:none !important;
}
#side_ribbon{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* main card */
#container{
  background:linear-gradient(180deg,var(--card),#13111d) !important;
  border:1px solid var(--line) !important;
  border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.6) !important;
  margin-top:34px !important;
}
#logo_div img{filter:drop-shadow(0 4px 10px rgba(246,196,69,.25))}

/* panels */
#login_div,#update_table_div,#update_numb_div,#update_time_div{
  border:1px solid var(--line) !important;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:var(--text) !important;
}
#login_div{padding:10px 14px !important;font-size:13px !important;color:var(--text) !important}
#login_div span{color:var(--gold2)}
#update_time_div{border:0 !important;background:transparent !important}
#table_div,#order_table_div{color:var(--text) !important}

/* labels and text */
label{color:#d9d4f0 !important;font-weight:600;font-size:13px !important;letter-spacing:.3px}
#tabbutton_div{color:var(--gold2) !important;font-weight:600}
#top_text,#top_text *{color:var(--gold2) !important;font-family:"Segoe UI",Arial,sans-serif !important;font-size:14px !important}
.next_draw_time{color:var(--gold2) !important;font-family:"Segoe UI",Arial,sans-serif !important}
#footer_div font{color:#6f6a8a !important}

/* result entry inputs */
#first,#second,#royale{
  width:64px !important;height:36px !important;
  background:#0f0d19 !important;
  border:1px solid var(--line2) !important;border-radius:10px;
  color:var(--red) !important;
  font:700 19px/1 "Segoe UI",Arial,sans-serif !important;
  text-align:center !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5) !important;
  transition:border-color .15s,box-shadow .15s;
}
#first:focus,#second:focus,#royale:focus,.input:focus,#mark:focus{border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(246,196,69,.2) !important;outline:none}
.order_input:hover,.order_input:active{border-color:var(--gold) !important}

/* login fields */
#user_id,#user_pin{
  background:#0f0d19 !important;color:var(--text) !important;
  border:1px solid var(--line2) !important;border-radius:9px;
  height:30px !important;padding:2px 10px !important;font-size:13px !important;box-shadow:none !important;
}

/* marquee text box */
#mark{
  background:#0f0d19 !important;color:var(--text) !important;
  border:1px solid var(--line2) !important;border-radius:12px;
  padding:10px 12px;font:13px/1.45 "Segoe UI",Arial,sans-serif;
  width:330px !important;height:112px !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}

/* buttons */
#control_button,#logout_button,#login_button,#addconf_button,#update_button,#close_err_msg,
.fsubmit,#print_order_tkt,#buy_table_button,#reset_table_button{
  -webkit-appearance:none;appearance:none;
  background:#2a2540 !important;color:var(--text) !important;
  border:1px solid var(--line2) !important;border-radius:11px !important;
  padding:8px 16px !important;
  font:600 12px "Segoe UI",Arial,sans-serif !important;letter-spacing:.4px;text-transform:uppercase;
  cursor:pointer;text-shadow:none !important;box-shadow:none !important;
  transition:background .15s,border-color .15s,transform .1s;
}
#control_button:hover,#logout_button:hover,#login_button:hover,#close_err_msg:hover,#print_order_tkt:hover,#reset_table_button:hover{background:#352f52 !important;border-color:var(--gold) !important}
#addconf_button,#update_button,#buy_table_button{
  background:linear-gradient(180deg,var(--gold2),var(--gold)) !important;color:#2a1d00 !important;border-color:transparent !important;font-weight:800 !important;
  box-shadow:0 8px 18px rgba(246,196,69,.25) !important;
}
#addconf_button:hover,#update_button:hover,#buy_table_button:hover{filter:brightness(1.06);transform:translateY(-1px)}
#addconf_button:active,#update_button:active{transform:translateY(0)}
#logout_button{margin-left:6px}

/* tabs */
.topmenu_but{
  -webkit-appearance:none;appearance:none;
  background:#2a2540 !important;color:var(--muted) !important;
  border:1px solid var(--line) !important;border-radius:12px !important;
  margin:0 6px 0 0 !important;padding:9px 18px !important;
  font:700 12px "Segoe UI",Arial,sans-serif !important;letter-spacing:.8px;text-shadow:none !important;
  transition:all .15s;
}
.topmenu_but:hover,.topmenu_but:focus{background:#352f52 !important;color:var(--text) !important;margin-top:0 !important;padding:9px 18px !important;border-color:var(--gold) !important}

/* clock strip: NEXT DRAW / TIME LEFT / SERVER TIME / DATE */
#next_game_time_div,#next_game_time_left_div,#srvtime_div,#srvdate_div{
  color:var(--text) !important;font-weight:600;font-size:13px !important;letter-spacing:.3px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;margin-top:2px !important;height:auto !important;text-align:center;
}
#next_game_time_div{width:160px !important}#next_game_time_left_div{width:170px !important}#srvtime_div{width:160px !important}#srvdate_div{width:180px !important}

/* draw cards */
#update_numb_div{background:rgba(255,255,255,.02) !important;overflow:hidden}
#update_numb_div > div:first-child img{border-radius:14px;filter:saturate(1.1) drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* confirmed order table */
#order_sel_time_div label{color:var(--gold2) !important}
#order_game_time,.text{
  background:#0f0d19 !important;color:var(--text) !important;border:1px solid var(--line2) !important;border-radius:9px;height:32px !important;font-size:13px !important;
}
#data_table{border-collapse:separate !important;border-spacing:0 3px;font-size:13px !important;width:100% !important}
#data_table th,#data_table th.first_left,#data_table th.first_right{
  background-color:#241f36 !important;color:var(--gold2) !important;font-weight:700;letter-spacing:.5px;padding:8px 4px;border:0 !important;
}
#data_table th.first_left{border-radius:10px 0 0 10px}#data_table th.first_right{border-radius:0 10px 10px 0}
#data_table td,#data_table td.commontd,#data_table td.commontxt,#data_table td.commontd_first,#data_table td.commontd_last{
  background:#201c31 !important;color:var(--text) !important;border:0 !important;padding:8px 4px;
}
#data_table td.commontd_first{border-radius:10px 0 0 10px;font-weight:700;color:var(--gold2) !important}
#data_table td.commontd_last{border-radius:0 10px 10px 0;font-weight:700}
#data_table tbody tr:hover td{background:#2a2540 !important}

/* error / message pop-up */
#close_terms_div{
  background:linear-gradient(180deg,#201c33,#191628) !important;
  border:1px solid var(--line2) !important;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);color:var(--text) !important;
}
#msg_div{color:var(--text) !important}

/* ---- layout fixes for the larger controls ---- */
#container{height:845px !important}
#update_table_div,#table_div{height:240px !important}
#order_table_div{height:240px !important}
#table_div > div:first-child > div{margin-bottom:6px !important}
#addconf_button{margin-top:2px !important;margin-left:122px !important}
#update_button{margin-left:110px !important;margin-top:2px !important}
#update_time_div{display:flex;gap:8px;margin-top:10px !important;width:820px !important;height:auto !important}
#update_time_div > div{margin-left:0 !important;margin-top:0 !important;width:auto !important;flex:1 1 0;box-sizing:border-box;white-space:nowrap}
#tabbutton_div{display:flex !important;align-items:center;gap:8px;margin-top:14px !important;margin-bottom:12px;float:none !important;clear:both;margin-left:30px !important}
#tabbutton_div input{margin-left:0 !important;float:none !important}
#tabbutton_div > div{float:none !important;margin-left:14px !important;color:var(--gold2)}
#footer_div{top:825px !important}
.bottom_btn{top:695px !important}
#update_numb_div{height:350px !important}

/* the flip-counter digits are placed with absolute offsets inside these containers; shift them with the taller panels above */
#responsecontainer,#responsecontainer2{position:absolute !important;left:83px;top:338px;width:0;height:0}

/* ---- auto / manual mode badge (icons come from the LOCAL Font Awesome in css/font-awesome_css + css/webfonts) ---- */
.auto-badge{display:flex;flex-direction:column;align-items:center;gap:6px;width:132px;padding:14px 6px 12px;border-radius:18px;text-decoration:none !important;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.06),transparent 70%),rgba(255,255,255,.025);border:1px solid var(--line);transition:transform .15s,border-color .15s,box-shadow .15s}
.auto-badge:hover{transform:translateY(-2px)}
.auto-badge .ab-icon{position:relative;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;background:radial-gradient(circle at 35% 30%,#3a3556,#1c1930);border:2px solid var(--line2)}
.auto-badge .ab-icon::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px dashed transparent}
.auto-badge .ab-l1{font:800 12px "Segoe UI",Arial,sans-serif;letter-spacing:1.6px}
.auto-badge .ab-l2{font:600 11px "Segoe UI",Arial,sans-serif;letter-spacing:.8px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.auto-badge .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
/* AUTO ON: robot, green, glowing, ring turns */
.auto-badge.on{border-color:rgba(62,229,130,.45);box-shadow:0 0 28px rgba(62,229,130,.14)}
.auto-badge.on:hover{box-shadow:0 0 34px rgba(62,229,130,.3)}
.auto-badge.on .ab-icon{color:#3ee582;border-color:rgba(62,229,130,.6);box-shadow:0 0 22px rgba(62,229,130,.35),inset 0 0 14px rgba(62,229,130,.18)}
.auto-badge.on .ab-icon i{filter:drop-shadow(0 0 7px #3ee582);animation:botFloat 3s ease-in-out infinite}
.auto-badge.on .ab-icon::after{border-color:rgba(62,229,130,.45);animation:botSpin 14s linear infinite}
.auto-badge.on .ab-l1{color:#58f2a0}
.auto-badge.on .ab-l2{color:#8dd9b0}
.auto-badge.on .dot{background:#3ee582;box-shadow:0 0 10px #3ee582;animation:botPulse 1.6s ease-in-out infinite}
/* MANUAL: keyboard, red, still */
.auto-badge.off{border-color:rgba(255,92,108,.5);box-shadow:0 0 24px rgba(255,92,108,.12)}
.auto-badge.off:hover{border-color:#ff5c6c;box-shadow:0 0 30px rgba(255,92,108,.3)}
.auto-badge.off .ab-icon{color:#ff5c6c;border-color:rgba(255,92,108,.6);box-shadow:0 0 18px rgba(255,92,108,.25),inset 0 0 12px rgba(255,92,108,.15)}
.auto-badge.off .ab-icon i{filter:drop-shadow(0 0 6px rgba(255,92,108,.6))}
.auto-badge.off .ab-icon::after{border-color:rgba(255,92,108,.3)}
.auto-badge.off .ab-l1{color:#ff7f8c}
.auto-badge.off .ab-l2{color:#e0a3aa}
.auto-badge.off .dot{background:#ff5c6c;box-shadow:0 0 8px #ff5c6c}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes botPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes botSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auto-badge *,.auto-badge .ab-icon::after{animation:none !important}}

/* badge: no outer box (border / background / glow around the whole badge); the icon circle stays */
.auto-badge,.auto-badge.on,.auto-badge.off,.auto-badge:hover,.auto-badge.on:hover,.auto-badge.off:hover{border:0 !important;background:transparent !important;box-shadow:none !important}


/* ---- top ticker (replaces the obsolete <marquee> tag: CSS animation, pauses on hover) ---- */
#top_text{top:4px !important;height:40px !important;width:800px !important;display:flex;align-items:center}
.ticker{overflow:hidden;white-space:nowrap;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:inline-flex;animation-name:tickerMove;animation-timing-function:linear;animation-iteration-count:infinite}
.ticker-item{flex:0 0 auto;min-width:800px;padding-right:90px;box-sizing:border-box;font:600 22px/36px "Segoe UI",Arial,sans-serif;letter-spacing:.4px;color:var(--gold2) !important}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the news ticker keeps scrolling even when the PC has "show animations" turned off (that setting used to stop it and show a scrollbar) */
#top_text .ticker-item{font-size:22px !important;line-height:36px !important;font-weight:600 !important}

/* joker: stands on the bottom edge of the card (the All Results button keeps its place) */
.bottom_btn + .bottom_btn{top:auto !important;bottom:0 !important;margin-left:60px !important}
.bottom_btn + .bottom_btn{height:auto !important;line-height:0}
.bottom_btn + .bottom_btn img{display:block}


/* ---- tab panels: stacked in one box; the incoming panel slides up from the bottom of that box ---- */
#update_table_div{position:relative !important;overflow:hidden !important;box-sizing:border-box}
#table_div,#order_table_div{
  position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;box-sizing:border-box;
  display:block !important;overflow:hidden;
  transform:translateY(100%);visibility:hidden;
  transition:transform .5s cubic-bezier(.22,.8,.3,1);will-change:transform;
}
#table_div.panel-active,#order_table_div.panel-active{transform:translateY(0);visibility:visible;z-index:3}
#table_div.panel-leaving,#order_table_div.panel-leaving{transform:translateY(0);visibility:visible;z-index:2;transition:none}
@media (prefers-reduced-motion:reduce){#table_div,#order_table_div{transition:none}}

/* orders table must stay inside its panel */
#order_table_div{padding:8px 10px !important}
#order_time_data_table,#data_table{width:100% !important;max-width:100%}
#data_table{table-layout:fixed}
#data_table th:first-child,#data_table td:first-child{width:21% !important}
#data_table th,#data_table td{width:auto !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* column widths for the confirmed-orders table (fixed layout, adds up to 100%) */
#data_table th,#data_table td{text-overflow:clip !important;padding-left:2px !important;padding-right:2px !important}
#data_table thead th{font-size:12px !important}
#data_table thead th:nth-child(1){width:17% !important}
#data_table thead th:nth-child(2),#data_table thead th:nth-child(3){width:6% !important}
#data_table thead th:nth-child(n+4):nth-child(-n+13){width:5.6% !important}
#data_table thead th:nth-child(14),#data_table thead th:nth-child(15){width:7.5% !important}

/* panels are opaque (same tone as the box behind them), so the sliding panel fully covers the one beneath it */
#table_div,#order_table_div{background:#1d1b2a !important;border-radius:15px}


/* Home button (same look as the other header buttons) */
.home-btn{display:inline-block;margin-left:14px;-webkit-appearance:none;appearance:none;text-decoration:none !important;
  background:#2a2540;color:var(--text) !important;border:1px solid var(--line2);border-radius:11px;padding:8px 16px;
  font:600 12px "Segoe UI",Arial,sans-serif;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s}
.home-btn:hover{background:#352f52;border-color:var(--gold)}
.home-btn::before{content:"\f015";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:7px;color:var(--gold)}

/* header strip: tighter buttons, moved up beside the logo */
#login_div{margin-top:6px !important;margin-left:24px !important}
#login_div > div:first-child{width:175px !important}
#login_div .home-btn{margin-left:8px !important}
#login_div #control_button,#login_div #logout_button{margin-left:8px !important}
.member-btn::before{content:none !important;margin:0 !important}