/* Go2Core layout.
   Desktop (> 980px): navigation in a fixed sidebar on the left.
   Tablet and phone (<= 980px): compact header with a Menu button and a main
   menu bar that scrolls sideways. Phone (<= 720px): stacked forms and ticket
   details; wide tables scroll sideways inside their own box. */

/* The menu button only exists on small screens (added by theme.js). */
.gc-menu-btn { display: none; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 980px) {
  body { margin: .5em .75em; }
  img, video, iframe { max-width: 100%; height: auto; }
  pre, .wiki pre, pre.wiki { white-space: pre-wrap; word-break: break-word; overflow-x: auto; }

  /* Wide tables scroll inside their own box instead of stretching the page */
  #content table.listing, #content table.tickets, #content table.trac-report,
  #content .wikipage table.wiki, #content .searchable table.wiki, #ticket table.wiki,
  #changelog table.wiki, .gc-ed-preview table.wiki {
    display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Option boxes (report paging, timeline filters...) sit in the page */
  #prefs { float: none; margin: 0 0 1em; box-shadow: none; }

  /* Admin: section list above the content */
  #tabs { float: none; width: auto; margin: 0 0 1em; }
  #tabcontent { margin-left: 0; padding-left: 0; min-width: 0; }
}

/* ------------------------------------- compact header: tablet and phone */
@media (max-width: 980px) {
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  #main, #footer { padding-left: 14px; padding-right: 14px; }

  /* Header: logo + menu button; search, account links and theme in the menu */
  #banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px; margin: 0;
  }
  #header { margin: 0; flex: 0 1 auto; min-width: 0; }
  #header #logo { display: block; margin: 0; }
  #header #logo img { height: 34px !important; width: auto !important; max-width: 60vw; display: block; margin: 0 !important; }
  .gc-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-width: 44px; height: 40px; padding: 0 .8em; margin-left: auto;
    border: 1px solid var(--gc-border); border-radius: 10px;
    background: var(--gc-bg); color: var(--gc-text); font: inherit; font-weight: 600; font-size: .9em; cursor: pointer;
  }
  .gc-menu-btn svg { display: block; }
  #search, #metanav { display: none; }
  html.gc-nav-open #search, html.gc-nav-open #metanav { display: block; flex: 1 0 100%; }
  html.gc-nav-open #search { order: 3; margin: 10px 0 0; height: auto; text-align: left; font-size: 1em; }
  #search div { display: flex; gap: 6px; }
  #search input#proj-search { flex: 1; min-width: 0; }
  html.gc-nav-open #metanav { order: 4; padding: 6px 0 2px; }
  #metanav ul { text-align: left; font-size: 1em; }
  #metanav li {
    display: block; border: 0; padding: 0; white-space: normal;
    border-top: 1px solid var(--gc-border);
  }
  #metanav li > a, #metanav li form.trac-logout button {
    display: block; padding: 11px 2px; width: 100%; text-align: left; border-bottom: 0 !important;
  }
  #metanav li.first { padding: 11px 2px; color: var(--gc-muted); }
  #metanav li.gc-theme { padding: 12px 0 4px; }
  #metanav .gc-theme-switch { display: inline-flex; width: auto; }
  .gc-theme-switch button { padding: 9px 14px; }

  /* Main menu: one row, scrolls sideways when needed */
  #mainnav { margin: 0 14px 12px; border-radius: 10px; overflow: hidden; }
  #mainnav ul {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; text-align: left;
  }
  #mainnav ul::-webkit-scrollbar { display: none; }
  #mainnav li { flex: 1 0 auto; text-align: center; }
  #mainnav li a { padding: 12px 10px !important; display: block; letter-spacing: .02em; }

}

/* ----------------------------------------------------------------- phone */
@media (max-width: 720px) {
  /* Context links (Previous / Next ticket, Available reports...) */
  #ctxtnav { margin: 0 0 .6em; }
  #ctxtnav ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 0; text-align: left; }
  #ctxtnav li:first-child { padding-left: 0; }

  /* Headings */
  #content h1 { font-size: 1.55em; line-height: 1.2; }
  #content h2 { font-size: 1.25em; }

  /* Touch-friendly controls; 16px inputs stop iPhone from zooming in */
  input[type=text], input[type=search], input[type=email], input[type=password],
  input[type=url], input[type=number], input[type=date], input:not([type]), select, textarea {
    font-size: 16px !important; max-width: 100%;
  }
  input[type=submit], input[type=button], button, .button, .trac-button { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }

  /* ------------------------------------------------------ ticket page */
  #ticket { padding: 14px !important; margin: 0 0 1em; }
  #ticket .trac-topnav, #ticket .date { float: none; text-align: left; margin: 0 0 .4em; font-size: .85em; }
  #ticket h1, #ticket h2.summary, #ticket .trac-id { line-height: 1.2; }
  #ticket .trac-id { font-size: 1.6em; }
  #ticket .trac-status, #ticket .trac-type, #ticket .trac-resolution { font-size: 1.1em; }
  #trac-ticket-title { font-size: 1.35em !important; margin: .3em 0 .6em; }
  #ticket #trac-ticket-title .summary { font-size: 1em; }
  #ticket, #ticketbox { margin-left: 0 !important; margin-right: 0 !important; }
  #ticketbox table.properties, #ticketbox table.properties > tbody { display: block; width: 100%; }
  #ticketbox table.properties > tbody > tr {
    display: grid; grid-template-columns: minmax(7em, 34%) 1fr; border-bottom: 0;
  }
  #ticketbox table.properties > tbody > tr > th,
  #ticketbox table.properties > tbody > tr > td {
    display: block; width: auto !important; padding: 6px 0; border-bottom: 1px dotted var(--gc-border);
    text-align: left; word-break: break-word;
  }
  #ticketbox table.properties > tbody > tr > th { padding-right: 10px; }
  #ticketbox table.properties > tbody > tr > th:empty,
  #ticketbox table.properties > tbody > tr > th:empty + td { display: none; }
  #ticket .description h3, #ticket .description { clear: both; }
  #ticket .trac-ticket-buttons, .trac-ticket-buttons { float: none; margin: .5em 0; }

  /* Change history: property changes go full width above the comment */
  #changelog .changes, #ticketchange .changes { float: none; margin: .4em 0 .8em; width: auto; }
  #changelog h3.change { font-size: .95em; }
  #changelog .change .trac-ticket-buttons { float: none; }
  #changelog .comment, #changelog .change { margin-left: 0; padding-left: 0; }

  /* --------------------------------- new ticket / modify ticket forms */
  #properties { padding: .8em !important; }
  #properties table.trac-properties, #properties table.trac-properties > tbody { display: block; width: 100%; }
  #properties table.trac-properties > colgroup { display: none; }
  #properties table.trac-properties > tbody > tr { display: block; }
  #properties table.trac-properties > tbody > tr > th,
  #properties table.trac-properties > tbody > tr > td {
    display: block; width: auto !important; text-align: left !important; padding: 2px 0 !important;
    border: 0 !important;
  }
  #properties table.trac-properties > tbody > tr > th { padding-top: 10px !important; }
  #properties table.trac-properties input[type=text], #properties table.trac-properties select,
  #properties table.trac-properties textarea { width: 100% !important; box-sizing: border-box; }
  #action .trac-action-line, #action div { line-height: 1.8; }
  #action select, #action input[type=text] { max-width: 100%; }
  fieldset { min-width: 0; }
  div.buttons, .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  div.buttons input, .buttons input { margin: 0 !important; }

  /* Editor toolbar wraps nicely */
  .gc-ed-bar { gap: .3em; }
  .gc-ed-tools { margin-left: 0; width: 100%; }
  .gc-ed-btn { width: 36px; height: 34px; }
  .gc-ed-picker { left: 8px !important; right: 8px; }

  /* Attachments */
  #attachments .attachments, dl.attachments dt, dl.attachments dd { word-break: break-word; }
  #attachment input[type=file] { max-width: 100%; }

  /* ------------------------------------ reports, queries, timeline */
  #report-descr, .report-descr { margin-right: 0; }
  #content table.listing td, #content table.listing th,
  #content table.tickets td, #content table.tickets th { white-space: nowrap; }
  #content table.listing td.summary, #content table.tickets td.summary { white-space: normal; min-width: 12em; }
  #query fieldset, #query #filters { overflow-x: auto; }
  #query #filters table { min-width: 100%; }
  #query .trac-clause, #query .trac-clause table { max-width: 100%; }
  #columns div label, #columns label { display: inline-block; margin: 2px 8px 2px 0; }
  .numresults { display: block; }
  #fullsearch input[type=text], #fullsearch input#q, #content.search input[name=q] { width: 100% !important; box-sizing: border-box; }

  #content.timeline dt { white-space: normal; }
  #content.timeline dd { margin-left: 1.2em; }
  #content.timeline h2 { font-size: 1.05em; }

  /* -------------------------------------------- login, prefs, admin */
  #content.login form, #content.login fieldset, form#acctmgr_loginform, #content.prefs form { max-width: 100%; }
  #content.login input[type=text], #content.login input[type=password],
  #content.login input[name=username], #content.login input[name=password] { width: 100%; box-sizing: border-box; }
  #content.login .field, #content.login div { margin-bottom: .6em; }
  #content.prefs ul#tabs, #content.prefs .tabs { display: flex; flex-wrap: wrap; gap: 4px; }
  #tabs ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  #tabs li { display: block; }
  #tabcontent form table, #tabcontent table.listing { display: block; overflow-x: auto; }
  #tabcontent .field input[type=text], #tabcontent .field input[type=password],
  #tabcontent input[type=text][size], #tabcontent input[type=email] { width: 100%; box-sizing: border-box; }

  /* ------------------------------------------------------- footer */
  #footer { flex-direction: column; align-items: flex-start; gap: .4em; text-align: left; }
  #footer p.right { float: none; text-align: left; width: auto; margin: 0; position: static; }
  #footer { margin: 0; flex-wrap: nowrap; }

  /* ---------------------------------------------- Go2Core dashboard */
  .gc-dash-head h1 { font-size: 1.6em; }
  .gc-kpis { grid-template-columns: 1fr 1fr; gap: .6em; }
  .gc-kpi { padding: .8em .9em; }
  .gc-kpi-value { font-size: 1.9em; }
  .gc-report-grid { grid-template-columns: 1fr; }
  .gc-btn { padding: .65em 1em; }
}

/* Very small phones */
@media (max-width: 360px) {
  .gc-kpis { grid-template-columns: 1fr; }
  #mainnav li a { padding: 12px 11px !important; }
}

/* --------------------------------------------- desktop: left sidebar nav */
@media (min-width: 981px) {
  :root { --gc-side: 236px; --gc-nav-top: 142px; --gc-nav-space: 270px; }
  body { margin: 0; padding-left: var(--gc-side); }

  /* Sidebar: logo, search, (main menu), account links + theme at the bottom */
  #banner {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; box-sizing: border-box;
    width: var(--gc-side); margin: 0; padding: 22px 16px 16px;
    display: flex; flex-direction: column;
    background: var(--gc-surface); border-right: 1px solid var(--gc-border); overflow-y: auto;
  }
  #banner > * { flex-shrink: 0; }
  #header { margin: 0 4px 16px; height: auto; }
  #header #logo { display: block; margin: 0; }
  #header #logo img { width: 172px !important; height: auto !important; display: block; margin: 0 !important; }
  #search {
    order: 2; height: auto; margin: 0 0 var(--gc-nav-space); text-align: left; font-size: .9em; clear: none;
  }
  #search div { display: flex; gap: 6px; }
  #search input#proj-search { flex: 1; min-width: 0; }
  #search input[type=submit] { flex: 0 0 auto; }
  #metanav { order: 9; margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--gc-border); }
  #metanav ul { text-align: left; font-size: .92em; }
  #metanav li { display: block; border: 0; padding: 4px 0; white-space: normal; }
  #metanav li > a, #metanav li form.trac-logout button { border-bottom: 0 !important; }
  #metanav li.first { color: var(--gc-muted); }
  #metanav li.gc-theme { padding-top: 10px; }

  /* Main menu: vertical list in the sidebar */
  #mainnav {
    position: fixed; top: var(--gc-nav-top); left: 0; z-index: 41; box-sizing: border-box;
    width: var(--gc-side); max-height: calc(100vh - var(--gc-nav-top) - 170px); overflow-y: auto;
    margin: 0; padding: 0 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none;
    font-size: .95em; letter-spacing: 0;
  }
  #mainnav ul { display: flex; flex-direction: column; gap: 2px; text-align: left; font-size: 1em; }
  #mainnav li { display: block; border: 0 !important; padding: 0; margin: 0; background: none; }
  #mainnav li a:link, #mainnav li a:visited {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
    color: var(--gc-text); font-weight: 600; text-transform: none; border: 0; background: none;
  }
  #mainnav li a:hover { background: var(--gc-hover-bg); color: var(--gc-text); }
  #mainnav li.active a:link, #mainnav li.active a:visited { background: var(--gc-brand); color: #fff; }
  #mainnav li a::before {
    content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; opacity: .85;
    -webkit-mask: var(--gc-ico, var(--gc-ico-dot)) center / contain no-repeat;
            mask: var(--gc-ico, var(--gc-ico-dot)) center / contain no-repeat;
  }
  #mainnav a[href$="/dashboard"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/timeline"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/roadmap"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/search"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/admin"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/report"], #mainnav a[href*="/query"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E"); }
  #mainnav a[href$="/newticket"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
  #mainnav a[href*="/wiki"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h11l5 5v11H4z'/%3E%3Cpath d='M15 4v5h5M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
  #mainnav a[href*="/browser"] { --gc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 8l-4 4 4 4M15 8l4 4-4 4'/%3E%3C/svg%3E"); }
  :root { --gc-ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }

  /* Content area */
  #main { padding: 22px 36px 0; margin: 0; }
  #footer { margin: 2em 36px 1.5em; }
  #ctxtnav { margin-top: 0; }
}

/* ------------------------------------------- sign-in / reset password page */
html.gc-auth-page body, body:has(#acctmgr_loginform), body:has(#acctmgr_passwd_reset) {
  margin: 0 !important; padding: 0 !important; min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 110% -10%, color-mix(in srgb, var(--gc-orange) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--gc-brand) 35%, transparent), transparent 60%),
    var(--gc-brand);
}
html.gc-auth-page #banner, html.gc-auth-page #mainnav, html.gc-auth-page #ctxtnav,
html.gc-auth-page #footer, html.gc-auth-page .gc-menu-btn,
body:has(#acctmgr_loginform) #banner, body:has(#acctmgr_loginform) #mainnav,
body:has(#acctmgr_loginform) #footer, body:has(#acctmgr_passwd_reset) #banner,
body:has(#acctmgr_passwd_reset) #mainnav, body:has(#acctmgr_passwd_reset) #footer { display: none !important; }
html.gc-auth-page #main { padding: 0 !important; margin: 0 !important; }
html.gc-auth-page #content {
  min-height: 100vh; box-sizing: border-box; padding: 32px 16px !important; margin: 0 !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.gc-auth-card {
  width: 100%; max-width: 400px; box-sizing: border-box; padding: 32px 30px 26px;
  background: var(--gc-bg); color: var(--gc-text); border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(10, 12, 50, .55);
}
.gc-auth-logo { display: block; margin: 0 0 20px; border: 0 !important; }
.gc-auth-logo img { display: block; width: 170px; height: auto; }
html[data-theme="dark"] .gc-auth-logo img { background: #fff; padding: 6px 10px; border-radius: 10px; }
.gc-auth-card h1 { margin: 0 0 4px !important; font-size: 1.6em !important; color: var(--gc-text); }
.gc-auth-sub, .gc-auth-card > p { margin: 0 0 18px; color: var(--gc-muted); font-size: .95em; }
.gc-auth-card form > div, .gc-auth-card .textbox { margin: 0 0 14px; }
.gc-auth-card label { display: block; font-weight: 600; font-size: .9em; color: var(--gc-text); }
.gc-auth-card label br { display: none; }
.gc-auth-card input[type=text], .gc-auth-card input[type=password], .gc-auth-card input.textwidget {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  padding: 11px 12px; font-size: 16px; border-radius: 10px;
}
.gc-auth-card #login_options, .gc-auth-card .central { text-align: left; margin: 0; }
.gc-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 18px; }
.gc-auth-row .textbox { margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.gc-auth-row .textbox label { display: inline; font-weight: 500; }
.gc-auth-row p.hint { margin: 0; font-size: .9em; }
.gc-auth-card .buttons { margin: 0; }
.gc-auth-card .buttons input[type=submit] {
  width: 100%; min-height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--gc-orange); color: #fff; font-weight: 700; font-size: 1em;
}
.gc-auth-card .buttons input[type=submit]:hover { filter: brightness(.95); }
.gc-auth-back { margin: 16px 0 0; text-align: center; font-size: .92em; }
.gc-auth-card .system-message, .gc-auth-card .warning { border-radius: 10px; }
.gc-auth-foot { text-align: center; color: rgba(255, 255, 255, .82); font-size: .85em; line-height: 1.6; }