/* ⚓ TheIsland Support — osTicket client portal skin matching theisland.cc (Castaway).
   Loaded after osTicket's theme.css from include/client/header.inc.php. */
:root{--abyss:#09182b;--deep:#11344f;--tide:#1fa6b8;--foam:#3ee6c7;--sand:#f4e3b2;--lamp:#ffe9a8;--fog:#9aa8b8;--coral:#ff7b6b;--line:rgba(255,255,255,.10);--card:#0f2740;--ink:#0c1a2b}
html,body{background:var(--abyss)!important}
body{font-family:Inter,system-ui,sans-serif!important;color:#e8eef2;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(62,230,199,.12),transparent 60%),
  radial-gradient(900px 500px at -10% 10%,rgba(31,166,184,.10),transparent 60%),var(--abyss)!important}
a{color:var(--foam)}a:hover{color:#8ff3e1}
h1,h2,h3,h4{font-family:Outfit,Inter,sans-serif!important;color:#fff!important;letter-spacing:-.01em}
#container{width:auto!important;max-width:1040px;margin:0 auto!important;padding:0 18px 40px;background:none!important;box-shadow:none!important;border:0!important}

/* top strip back to the main site */
.cw-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;font-size:13px;color:var(--fog);border-bottom:1px solid var(--line)}
.cw-strip a{color:var(--fog);text-decoration:none;margin-left:16px}.cw-strip a:hover{color:#fff}
.cw-strip b{color:var(--foam)}

/* header */
#header{background:none!important;height:auto!important;padding:22px 0 14px!important;border:0!important}
#header #logo{display:flex!important;align-items:center;gap:12px;height:auto!important;text-decoration:none}
#header #logo img{display:none!important}
#header #logo .cw-mark{width:46px;height:46px;border-radius:11px;image-rendering:pixelated;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#header #logo .cw-name{font:800 24px Outfit,sans-serif;color:#fff;letter-spacing:.03em;line-height:1}
#header #logo .cw-name small{display:block;font:600 12px Inter,sans-serif;letter-spacing:.14em;color:var(--foam);text-transform:uppercase;margin-top:5px}
#header .pull-right,#header .pull-right p{color:var(--fog)!important}
#header .pull-right a{color:#cfd8e0!important}

/* nav */
#nav{background:rgba(255,255,255,.04)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:6px!important;margin:6px 0 22px!important;box-shadow:none!important;height:auto!important;display:flex;flex-wrap:wrap;gap:4px}
#nav li{float:none!important;margin:0!important}
#nav li a{background:none!important;border:0!important;border-radius:10px!important;color:#cfd8e0!important;font-weight:600!important;padding:9px 14px 9px 36px!important;height:auto!important;line-height:1.3!important;background-position:12px center!important;background-repeat:no-repeat!important;filter:none}
#nav li a:hover{background-color:rgba(255,255,255,.07)!important;color:#fff!important}
#nav li a.active{background-color:rgba(62,230,199,.14)!important;color:var(--foam)!important}

/* content card */
#content{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:20px!important;padding:28px!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;color:#dfe7ee;min-height:0!important}
#content p,#content li,#content td,#content th,#content label,#content span,#content div{color:inherit}
#content .faded,#content .hint,#content small,#content em{color:var(--fog)!important}
#content hr{border-color:var(--line)!important;background:var(--line)!important}
#landing_page h1,#content h1{font-size:30px!important;margin-bottom:10px}
#landing_page .thread-body,#landing_page p{font-size:16px;line-height:1.65}

/* side panel / featured on landing */
.sidebar .front-page-button,.sidebar .content{background:none!important}
#landing_page #new_ticket,#landing_page #check_status,.front-page-button .button{border-radius:12px!important}
.sidebar .content{border:1px solid var(--line)!important;border-radius:14px;padding:12px 14px!important}
.sidebar .content h3{font-size:16px!important}

/* buttons */
.button,a.button,input[type=submit],input[type=button],input[type=reset],button.button,.action-button{
  background:linear-gradient(135deg,var(--foam),var(--tide))!important;color:#04202a!important;border:0!important;border-radius:11px!important;
  font:700 14px Inter,sans-serif!important;padding:10px 18px!important;text-shadow:none!important;box-shadow:0 8px 24px rgba(62,230,199,.22)!important;height:auto!important;cursor:pointer}
.button:hover,input[type=submit]:hover,input[type=button]:hover{filter:brightness(1.07)}
input[type=reset],input[name=cancel],.button.secondary{background:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:none!important;border:1px solid var(--line)!important}
#landing_page .button,.front-page-button .button{display:block;text-align:center;margin-bottom:10px;font-size:15px!important;padding:13px 18px!important}
.blue.button{background:linear-gradient(135deg,#7fd7ff,var(--tide))!important}
.green.button{background:linear-gradient(135deg,var(--foam),#22c58e)!important}

/* form fields — light for readability (editor, pickers, select2 all stay legible) */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea,.redactor-box,.select2-container .select2-selection{
  background:#f4f7fa!important;color:var(--ink)!important;border:1px solid #c9d6e2!important;border-radius:10px!important;padding:8px 10px;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(62,230,199,.55)!important;outline-offset:1px}
.redactor-box .redactor-editor,.redactor-styles,.redactor-in{background:#fff!important;color:var(--ink)!important}
.redactor-box .redactor-editor *,.redactor-in *{color:var(--ink)!important}
.redactor-toolbar{background:#e9eff5!important;border-radius:10px 10px 0 0}
#content table.form_table,#content .form-header,#content table th{background:none!important;border-color:var(--line)!important}
#content table td,#content table th{border-color:var(--line)!important}
.required,.error,font.error{color:var(--coral)!important}

/* messages */
#msg_notice,#msg_warning,#msg_error,.notice_bar,.warning_bar,.error_bar{border-radius:12px!important;border:0!important;padding:12px 16px 12px 44px!important;font-weight:600;background-position:14px center!important}
#msg_notice,.notice_bar{background-color:rgba(62,230,199,.14)!important;color:var(--foam)!important}
#msg_warning,.warning_bar{background-color:rgba(255,233,168,.14)!important;color:var(--lamp)!important}
#msg_error,.error_bar{background-color:rgba(255,123,107,.16)!important;color:var(--coral)!important}

/* ticket list + thread */
#ticketTable,#ticketTable th,#ticketTable td,table.list,table.list th,table.list td{background:none!important;border-color:var(--line)!important;color:#dfe7ee!important}
#ticketTable th,table.list th{color:var(--fog)!important;font-weight:700}
#ticketTable tr:hover td{background:rgba(255,255,255,.04)!important}
.thread-entry .header,#ticketThread .header{background:rgba(255,255,255,.06)!important;border-color:var(--line)!important;color:#cfd8e0!important;border-radius:10px 10px 0 0}
.thread-entry .thread-body,#ticketThread .thread-body{background:#f7fafc!important;color:var(--ink)!important;border-color:var(--line)!important}
.thread-entry .thread-body *{color:var(--ink)!important}
.thread-entry.response .header{background:rgba(62,230,199,.14)!important}
.thread-event{color:var(--fog)!important}
.infoTable th,.infoTable td{color:#dfe7ee!important}

/* knowledge base */
.featured-category,.kb-category{border-color:var(--line)!important}

/* footer */
#footer{background:none!important;color:var(--fog)!important;border-top:1px solid var(--line);padding:22px 0!important;margin-top:24px!important;text-align:center;font-size:13px}
#footer a{color:var(--fog)!important}
#footer #poweredBy{opacity:.55;filter:grayscale(1) brightness(2)}

@media (max-width:640px){#content{padding:18px!important;border-radius:16px!important}#header #logo .cw-name{font-size:20px}.cw-strip a{margin-left:10px}}

/* ── fixes after visual check ── */
#header #logo img.cw-mark{display:block!important}
#landing_page .thread-body,#landing_page #landing_page,#content .thread-body.landing,#content > .main-content .thread-body{background:none!important;color:#dfe7ee!important;border:0!important;padding:0!important;box-shadow:none!important}
#landing_page .thread-body *{color:inherit!important}
#landing_page .thread-body h1{color:#fff!important}
#landing_page .thread-body strong{color:#fff!important}
#landing_page code,#content code{background:rgba(62,230,199,.12)!important;color:var(--foam)!important;padding:1px 7px;border-radius:6px;font-size:.92em}
#nav li a{padding:9px 16px!important}
label.required,.required label,span.required{color:#fff!important}
label.required .error,span.error,.required .error{color:var(--coral)!important}
#content .form-header h2,#content .form-header p{color:#fff!important}
#content code{white-space:nowrap}

/* light boxes osTicket keeps white (Check Ticket Status / Sign In): dark text */
#content .login-box,#content .login-box *{color:#0c1a2b!important}
#content .login-box a{color:#0b7f8a!important;font-weight:600}
#content .login-box a:hover{color:#075c64!important}
#content .login-box .button,#content .login-box input[type=submit]{color:#04202a!important}
#content .login-box input::placeholder{color:#6b7c8c!important}
#content #clientLogin,#content #clientLogin *{color:#0c1a2b!important}
#content #clientLogin a{color:#0b7f8a!important;font-weight:600}
#content #clientLogin a:hover{color:#075c64!important}
#content #clientLogin .button,#content #clientLogin input[type=submit]{color:#04202a!important}
#content #clientLogin input::placeholder{color:#6b7c8c!important}