/* Player support pages (resources/views/support). The shell (header, logo, menu) comes from public/support-theme; this file keeps the content flat and quiet in the same look: #fcfcfc panel, grey titles, blue links, olive buttons. */
:root{
	--ink:#333;
	--text:#555;
	--muted:#8a8a8a;
	--head:#f2f2f2;
	--line:#e2e2e2;
	--box:#b3b3b3;
	--link:#3260a1;
	--olive:#5a5a42;
	--olive-dark:#4a4a35;
	--olive-soft:#f1f1e8;
	--warn:#a36a10;
	--ok:#2e7d32;
	--err:#b3342d;
	--radius:4px;
}

.inner_content{background:#fcfcfc;margin:0 20px;padding:22px 24px;border-radius:var(--radius);color:var(--text);font:13px/1.6 Arial,Verdana,sans-serif;animation:supportIn .3s ease both}
@keyframes supportIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.inner_content{animation:none}*{transition:none !important}}
.inner_content a{color:var(--link)}
.inner_content p{margin:0;padding:0}
.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none}

/* Titles */
.page-head{margin-bottom:20px}
.page-head small{display:none}
.inner_content h2{margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:19px;font-weight:500;color:#5c5c5b}
.page-head h2{margin:0}
.hero h2,.ticket-head h2{padding:0;border:0}

/* Sections: no frames, only hairlines and space */
.card{margin-bottom:26px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.card:last-of-type{border-bottom:0}
.step{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;color:var(--ink)}
.step label,.step b{font-weight:700}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--olive);border-radius:50%;color:var(--olive);font-weight:700;font-size:11px;flex:none}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--ink)}
.counter,.help{font-size:11px;color:var(--muted);margin-top:5px}
.field-error{font-size:12px;color:var(--err);margin-top:5px}

/* Controls */
.inner_content select,.inner_content input[type=text],.inner_content textarea{box-sizing:border-box;width:100%;padding:9px 11px;background:#fff;color:var(--ink);border:1px solid #c8c8c8;border-radius:var(--radius);font:inherit;transition:border-color .15s,box-shadow .15s}
.inner_content select:hover,.inner_content input[type=text]:hover,.inner_content textarea:hover{border-color:#9a9a9a}
.inner_content select:focus,.inner_content input[type=text]:focus,.inner_content textarea:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(90,90,66,.15)}
.inner_content textarea{min-height:160px;resize:vertical}
.inner_content input[type=file]{box-sizing:border-box;width:100%;padding:10px;border:1px dashed #c0c0c0;border-radius:var(--radius);background:#fff;font:inherit;color:var(--muted)}
.inner_content input[type=file]::file-selector-button{margin-right:12px;padding:5px 14px;border:1px solid #c0c0c0;border-radius:var(--radius);background:#f6f6f6;color:var(--ink);font:inherit;cursor:pointer}
.inner_content input[type=file]::file-selector-button:hover{background:#ececec}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 24px;border:1px solid var(--olive-dark);border-radius:var(--radius);background:var(--olive);color:#fff !important;font:700 12px/1.2 Arial,Verdana,sans-serif;cursor:pointer;text-decoration:none !important;transition:background .15s}
.btn:hover{background:var(--olive-dark)}
.btn:focus-visible{outline:3px solid rgba(90,90,66,.35);outline-offset:2px}
.btn.ghost{background:#fff;color:var(--ink) !important;border-color:#c0c0c0}
.btn.ghost:hover{background:#f3f3f3}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.card .btn-row{margin-top:8px}

/* Alerts */
.alert{padding:10px 14px;margin-bottom:18px;border:1px solid;border-left-width:3px;border-radius:var(--radius)}
.alert ul{margin:0;padding-left:18px}
.alert-success{border-color:#9fcba2;background:#f4faf4;color:var(--ok)}
.alert-error{border-color:#dcaaa6;background:#fdf4f3;color:var(--err)}

/* Attention box: the original grey head + dashed outline */
.callout{margin-bottom:22px;border:1px dashed var(--box);border-radius:var(--radius);overflow:hidden}
.callout .head{padding:6px 10px;background:var(--head);border-bottom:1px dashed var(--box);text-align:center;font-weight:700;color:#666}
.callout-body{padding:10px 14px}
.callout-body p{margin-top:4px}
.callout-body p:first-child{margin-top:0}

/* Home */
.welcome{display:block;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.avatar{display:none}
.welcome-title{margin-bottom:8px;font-size:17px;font-weight:700;color:var(--ink)}
.welcome-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.welcome-links a{font-size:12px;text-decoration:none}
.welcome-links a:hover{text-decoration:underline}
.welcome-links .ico{margin-right:4px;color:#999}
.tiles{display:block;border-top:1px solid var(--line)}
.tile{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink) !important;text-decoration:none;transition:background .15s,padding .15s}
.tile:hover{background:var(--olive-soft);padding-left:12px;padding-right:12px}
.tile-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--olive-soft);color:var(--olive);flex:none}
.tile-icon .ico{width:19px;height:19px}
.tile-text{flex:1;min-width:0}
.tile-text b{display:block;font-size:14px;color:var(--link)}
.tile-text small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.tile-go{color:#bbb;transition:transform .15s,color .15s}
.tile:hover .tile-go{color:var(--olive);transform:translateX(3px)}
.hero{padding:2px 0 6px}
.hero-icon,.empty-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:12px;border-radius:50%;background:var(--olive-soft);color:var(--olive)}
.hero-icon .ico,.empty-icon .ico{width:22px;height:22px}
.hero h2{margin-bottom:8px}
.hero p{max-width:620px}

.link-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 0;border-top:1px solid var(--line);color:var(--text) !important;text-decoration:none}
.link-row:hover b{text-decoration:underline}
.link-row b{color:var(--link);font-weight:700}
.link-row .ico{transition:transform .15s}
.link-row:hover .ico{transform:translateX(3px)}

/* History */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters input[type=text]{flex:2 1 200px;width:auto}
.filters select{flex:1 1 150px;width:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:8px 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover td{background:var(--olive-soft)}
.tbl-id{color:var(--muted)}
.tbl-title a{font-weight:700;text-decoration:none}
.tbl-title a:hover{text-decoration:underline}
.tbl-date{white-space:nowrap;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill-open{color:var(--warn)}
.pill-answered{color:var(--ok)}
.pill-closed{color:var(--muted)}
.empty{padding:30px 0;text-align:center}
.empty p{margin:2px 0 18px;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin:20px 0 0;list-style:none;padding:0}
.pager a,.pager span{display:block;min-width:32px;padding:5px 10px;text-align:center;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;background:#fff;color:var(--ink)}
.pager a:hover{background:var(--olive-soft)}
.pager .current{background:var(--olive);color:#fff;border-color:var(--olive)}
.pager .disabled{color:var(--muted);opacity:.5}

/* Ticket */
.back{display:inline-block;margin-bottom:10px;font-size:12px;color:var(--muted) !important;text-decoration:none}
.back:hover{color:var(--link) !important}
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.ticket-head h2{margin:0;word-break:break-word}
.ticket-no{color:var(--muted)}
.ticket-meta{display:flex;flex-wrap:wrap;gap:6px 34px;margin-bottom:22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticket-meta div{color:var(--ink)}
.ticket-meta small{display:block;margin-bottom:1px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.answers{margin-bottom:24px}
.answers-head{margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.answer{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.answer small{font-size:12px;font-weight:700;color:var(--muted)}
.answer span{white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.thread{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.msg{display:block;padding-left:14px;border-left:3px solid var(--olive)}
.msg.staff{border-left-color:#5f7ea8}
.msg .avatar{display:none}
.bubble{border:0;background:none}
.msg-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;color:var(--ink)}
.msg.staff .msg-head b{color:#2c4a73}
.msg-head span{font-size:11px;font-weight:400;color:var(--muted)}
.msg-body{white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.msg.system{padding:2px 0;border:0;font-size:11px;color:var(--muted);text-align:center}
.attachments{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 0}
.attachments a{display:block;width:108px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;font-size:10px;color:var(--muted);overflow:hidden;background:#fff;transition:box-shadow .15s}
.attachments a:hover{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.attachments img{display:block;width:100%;height:76px;object-fit:cover}
.attachments a span{display:block;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply{padding-top:22px;border-top:1px solid var(--line);border-bottom:0}

/* Themed select (public/support-theme/scripts/select.js replaces the native popup) */
.cs{position:relative}
.inner_content select.cs-native{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cs-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:9px 12px;background:#fff;color:var(--ink);border:1px solid #c8c8c8;border-radius:var(--radius);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cs-btn:hover{border-color:#9a9a9a}
.cs-btn:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(90,90,66,.15)}
.cs-btn::after{content:"";flex:none;width:6px;height:6px;margin-top:-3px;border-right:2px solid #777;border-bottom:2px solid #777;transform:rotate(45deg);transition:transform .15s}
.cs.open .cs-btn{border-color:var(--olive);box-shadow:0 0 0 3px rgba(90,90,66,.15)}
.cs.open .cs-btn::after{margin-top:3px;transform:rotate(225deg)}
.cs-btn.is-empty .cs-label{color:var(--muted)}
.cs-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-list{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 4px);display:none;max-height:260px;margin:0;padding:4px;overflow-y:auto;list-style:none;background:#fff;border:1px solid #bdbdbd;border-radius:var(--radius);box-shadow:0 8px 20px rgba(0,0,0,.2);scrollbar-width:thin}
.cs.open .cs-list{display:block;animation:csIn .12s ease both}
.cs.up .cs-list{top:auto;bottom:calc(100% + 4px)}
@keyframes csIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.cs-item{position:relative;padding:9px 12px 9px 30px;border-radius:3px;color:var(--ink);cursor:pointer}
.cs-item.cs-empty{color:var(--muted)}
.cs-item.active,.cs-item:hover{background:var(--olive-soft)}
.cs-item.selected{font-weight:700;color:var(--olive-dark)}
.cs-item.selected::before{content:"";position:absolute;left:11px;top:50%;width:5px;height:9px;margin-top:-6px;border-right:2px solid var(--olive);border-bottom:2px solid var(--olive);transform:rotate(45deg)}

/* Extra questions of a topic */
.req{color:var(--err);font-style:normal;font-weight:700}
.inner_content textarea.short{min-height:90px}
.check{display:flex;align-items:flex-start;gap:9px;margin-bottom:0 !important;cursor:pointer}
.check input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--olive-dark)}
.check span{font-weight:700;color:var(--ink)}

@media (max-width:760px){
	.inner_content{padding:20px}
}
@media (max-width:560px){
	.inner_content{margin:0 6px;padding:16px 14px}
	.inner_content h2{font-size:17px}
	.btn-row .btn{flex:1 1 100%}
	.ticket-head{flex-direction:column}
	.ticket-meta{flex-direction:column;gap:8px}
	.answer{grid-template-columns:1fr;gap:2px}
	.tbl thead{display:none}
	.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;box-sizing:border-box}
	.tbl tr{padding:8px 0;border-bottom:1px solid var(--line)}
	.tbl td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:0}
	.tbl td::before{content:attr(data-label);flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
	.tbl tbody tr:hover td{background:none}
	.tbl-title{text-align:right}
	.attachments a{width:calc(50% - 4px)}
}
.dz .dz-area{display:flex;margin:0;font-size:13px}

[hidden]{display:none !important}
.reveal{animation:supportIn .3s ease both}

/* Selects inside filters and long lists */
.filters .cs{flex:1 1 150px;min-width:0}
.cs-list{right:auto;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 48px));overflow-x:hidden}
.cs-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Attachment picker */
.dz{box-sizing:border-box}
.dz.is-on .dz-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dz-area{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:1px dashed #b9b9b9;border-radius:var(--radius);background:#fff;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.dz-area:hover,.dz-area.over{background:var(--olive-soft);border-color:var(--olive)}
.dz-icon{width:30px;height:30px;margin-bottom:2px;fill:none;stroke:var(--olive);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dz-title{font-weight:700;color:var(--ink)}
.dz-hint{font-size:11px;color:var(--muted)}
.dz-list{margin:10px 0 0;padding:0;list-style:none}
.dz-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.dz-list li:last-child{border-bottom:0}
.dz-list img{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius);object-fit:cover;background:#f3f3f3}
.dz-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.dz-name small{display:block;margin-top:1px;font-size:11px;color:var(--muted)}
.dz-remove{flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#777;font:18px/1 Arial,sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.dz-remove:hover{background:#fdf1f0;border-color:#dcaaa6;color:var(--err)}
.dz-error{margin-top:6px;font-size:12px;color:var(--err)}
.dz-error:empty{display:none}

.dz .dz-area{display:flex;margin:0;font-size:13px}

/* Live history list */
#historyList{transition:opacity .15s}
#historyList.loading{opacity:.45;pointer-events:none}
.filters.is-live .btn{display:none}

/* Formatted replies of the support team (sanitized server side) */
.msg-body.rich{white-space:normal}
.msg-body.rich p{margin:0 0 .6em}
.msg-body.rich p:last-child{margin-bottom:0}
.msg-body.rich ul,.msg-body.rich ol{margin:.3em 0 .6em;padding-left:1.4em}
.msg-body.rich ul{list-style:disc}
.msg-body.rich ol{list-style:decimal}
.msg-body.rich blockquote{margin:.4em 0;padding-left:.9em;border-left:3px solid var(--line);color:var(--muted)}
.msg-body.rich a{text-decoration:underline}
.msg-body.rich code,.msg-body.rich pre{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#f3f3f3;border-radius:4px}
.msg-body.rich code{padding:1px 4px}
.msg-body.rich pre{padding:8px 10px;overflow:auto}