/*
 * osTicket Editorial Workspace Theme
 * Custom reskin based on the "Editorial Workspace" design prototype
 * 
 * INSTALLATION:
 * 1. Copy this file to: /path/to/osticket/scp/css/custom-theme.css
 * 2. Add to staff header: include/staff/header.inc.php
 *    <link rel="stylesheet" href="css/custom-theme.css" />
 * 3. For client portal: include/client/header.inc.php
 *    <link rel="stylesheet" href="css/custom-theme.css" />
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --ost-bg:           #F6F4F0;
  --ost-bg-warm:      #EDEAE4;
  --ost-card:         #FFFFFF;
  --ost-card-hover:   #FDFCFB;
  --ost-deep:         #1B1B1F;
  --ost-surface:      #F0EDE8;

  /* Text */
  --ost-text:         #2D2D32;
  --ost-text-sec:     #6B6B76;
  --ost-text-muted:   #9D9DAA;

  /* Borders */
  --ost-border:       #E8E5DF;
  --ost-border-light: #F0EDE8;

  /* Accent — Terracotta */
  --ost-accent:       #D4583A;
  --ost-accent-light: rgba(212, 88, 58, 0.08);
  --ost-accent-mid:   rgba(212, 88, 58, 0.15);
  --ost-accent-hover: #C04E32;

  /* Status Colors */
  --ost-teal:         #1A8F7D;
  --ost-teal-light:   rgba(26, 143, 125, 0.08);
  --ost-amber:        #C4851C;
  --ost-amber-light:  rgba(196, 133, 28, 0.08);
  --ost-coral:        #E8533E;
  --ost-coral-light:  rgba(232, 83, 62, 0.08);
  --ost-indigo:       #5856D6;
  --ost-indigo-light: rgba(88, 86, 214, 0.08);

  /* Typography */
  --ost-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ost-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --ost-radius-sm:    8px;
  --ost-radius-md:    12px;
  --ost-radius-lg:    16px;

  /* Shadows */
  --ost-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.04);
  --ost-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.06);
  --ost-shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.08);
}


/* ═══════════════════════════════════════════
   GOOGLE FONTS IMPORT
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');


/* ═══════════════════════════════════════════
   GLOBAL RESET & BASE
   ═══════════════════════════════════════════ */

body {
  font-family: var(--ost-font-body) !important;
  background: var(--ost-bg) !important;
  color: var(--ost-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .page-header {
  font-family: var(--ost-font-display) !important;
  color: var(--ost-deep) !important;
  letter-spacing: -0.02em;
}

a {
  color: var(--ost-accent);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ost-accent-hover);
}


/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ost-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ost-text-muted); }


/* ═══════════════════════════════════════════
   TOP NAV BAR (#header)
   ═══════════════════════════════════════════ */

#header {
  background: var(--ost-deep) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 24px !important;
}

#header a,
#header .nav li a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
}

#header a:hover,
#header .nav li a:hover,
#header .nav li.active a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--ost-radius-sm) !important;
}

/* Logo area */
#header #logo a {
  color: #fff !important;
  font-family: var(--ost-font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Nav dropdown menus */
#header .nav li ul {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-md) !important;
  box-shadow: var(--ost-shadow-lg) !important;
  overflow: hidden;
}

#header .nav li ul li a {
  color: var(--ost-text) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}

#header .nav li ul li a:hover {
  background: var(--ost-accent-light) !important;
  color: var(--ost-accent) !important;
}


/* ═══════════════════════════════════════════
   SECONDARY NAV / SUB NAV
   ═══════════════════════════════════════════ */

#sub_nav,
.sub_nav,
ul.tabs {
  background: var(--ost-card) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  padding: 0 24px !important;
}

ul.tabs li a,
.sub_nav a {
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ost-text-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s !important;
}

ul.tabs li a:hover,
ul.tabs li.active a {
  color: var(--ost-accent) !important;
  border-bottom-color: var(--ost-accent) !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════ */

#content,
.main-content,
#pjax-container {
  background: var(--ost-bg) !important;
  padding: 24px !important;
}


/* ═══════════════════════════════════════════
   PAGE HEADERS
   ═══════════════════════════════════════════ */

.page-header h1,
h1.page-title {
  font-family: var(--ost-font-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ost-deep) !important;
  margin-bottom: 4px !important;
}


/* ═══════════════════════════════════════════
   TICKET LIST TABLE
   ═══════════════════════════════════════════ */

table.list,
.ticket-list table,
table.list.queue {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-lg) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: var(--ost-shadow-sm) !important;
  width: 100% !important;
}

/* Table Header */
table.list thead th,
table.list th {
  background: var(--ost-bg) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  font-family: var(--ost-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ost-text-muted) !important;
  padding: 12px 16px !important;
}

/* Table Rows */
table.list tbody tr {
  transition: background 0.15s ease !important;
  border-bottom: 1px solid var(--ost-border-light) !important;
}

table.list tbody tr:hover {
  background: var(--ost-bg-warm) !important;
}

table.list tbody tr td {
  padding: 14px 16px !important;
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  color: var(--ost-text) !important;
  border-bottom: 1px solid var(--ost-border-light) !important;
  vertical-align: middle !important;
}

/* Ticket subject/title in list */
table.list tbody tr td a.preview {
  font-weight: 500 !important;
  color: var(--ost-deep) !important;
  text-decoration: none !important;
}

table.list tbody tr td a.preview:hover {
  color: var(--ost-accent) !important;
}

/* Priority indicators */
.Icon.priHigh,
.pri-high { color: var(--ost-coral) !important; }
.Icon.priMed,
.pri-med { color: var(--ost-amber) !important; }
.Icon.priLow,
.pri-low { color: var(--ost-teal) !important; }


/* ═══════════════════════════════════════════
   TICKET STATUS BADGES
   ═══════════════════════════════════════════ */

.badge,
span.label,
.status-label {
  font-family: var(--ost-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  display: inline-block !important;
}

/* Open */
.badge.open,
.label-danger {
  background: var(--ost-coral-light) !important;
  color: var(--ost-coral) !important;
}

/* In Progress */
.badge.progress,
.label-warning {
  background: var(--ost-amber-light) !important;
  color: var(--ost-amber) !important;
}

/* Resolved/Closed */
.badge.resolved,
.badge.closed,
.label-success {
  background: var(--ost-teal-light) !important;
  color: var(--ost-teal) !important;
}

/* Default/info */
.label-info {
  background: var(--ost-indigo-light) !important;
  color: var(--ost-indigo) !important;
}


/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

/* Primary */
.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary,
.green.button,
input.btn {
  background: var(--ost-accent) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: var(--ost-radius-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.btn-primary:hover,
input[type="submit"].btn-primary:hover,
.green.button:hover {
  background: var(--ost-accent-hover) !important;
  box-shadow: 0 4px 16px rgba(212, 88, 58, 0.25) !important;
  transform: translateY(-1px);
}

/* Secondary/Default */
.btn-default,
.btn,
button.btn-default {
  background: transparent !important;
  border: 1px solid var(--ost-border) !important;
  color: var(--ost-text-sec) !important;
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border-radius: var(--ost-radius-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-shadow: none !important;
}

.btn-default:hover,
button.btn-default:hover {
  border-color: var(--ost-text-muted) !important;
  color: var(--ost-text) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Danger */
.btn-danger {
  background: var(--ost-coral) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--ost-radius-sm) !important;
}


/* ═══════════════════════════════════════════
   FORMS & INPUTS
   ═══════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select,
.form-control {
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  color: var(--ost-text) !important;
  background: var(--ost-bg) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-sm) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--ost-accent) !important;
  box-shadow: 0 0 0 3px var(--ost-accent-light) !important;
  background: var(--ost-card) !important;
}

label {
  font-family: var(--ost-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ost-text-sec) !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
}

/* Form tables (osTicket uses tables for form layouts) */
table.form td,
.form-horizontal .control-group {
  padding: 8px 0 !important;
}


/* ═══════════════════════════════════════════
   SIDEBAR / LEFT NAV (Staff Panel)
   ═══════════════════════════════════════════ */

#nav,
.sidebar,
nav.sidebar {
  background: var(--ost-deep) !important;
  border-right: none !important;
}

#nav ul li a,
.sidebar a {
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding: 10px 16px !important;
  border-radius: var(--ost-radius-sm) !important;
  margin: 1px 8px !important;
  transition: all 0.2s !important;
}

#nav ul li a:hover,
.sidebar a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

#nav ul li.active a,
.sidebar a.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

/* Sidebar section headers */
#nav ul li.heading,
.sidebar .nav-header {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.25) !important;
  padding: 16px 16px 6px !important;
}


/* ═══════════════════════════════════════════
   TICKET DETAIL VIEW
   ═══════════════════════════════════════════ */

/* Ticket header */
#ticket_thread .header,
.ticket-info-header {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
}

/* Thread entries */
.thread-entry,
#ticket_thread .thread-body {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-md) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.thread-entry .header,
#ticket_thread .thread-body .header {
  background: var(--ost-bg) !important;
  border-bottom: 1px solid var(--ost-border-light) !important;
  padding: 12px 18px !important;
  font-size: 12px !important;
}

.thread-entry .body,
#ticket_thread .thread-body .body {
  padding: 18px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ost-text) !important;
}

/* Reply box */
#reply-box,
.reply-form {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-lg) !important;
  padding: 20px !important;
}


/* ═══════════════════════════════════════════
   DASHBOARD / STATS
   ═══════════════════════════════════════════ */

.stat-box,
.dashboard-widget,
.card {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--ost-shadow-sm) !important;
  transition: all 0.25s !important;
}

.stat-box:hover,
.dashboard-widget:hover {
  box-shadow: var(--ost-shadow-md) !important;
  transform: translateY(-2px);
}

/* Dashboard numbers */
.stat-box .stat-value,
.dashboard-widget h2 {
  font-family: var(--ost-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ost-deep) !important;
}


/* ═══════════════════════════════════════════
   CLIENT PORTAL — TICKET SUBMISSION
   ═══════════════════════════════════════════ */

#landing_page,
.landing-page {
  background: var(--ost-bg) !important;
}

/* Main content card */
.main-content .card,
#ticketForm,
.client-form {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border-light) !important;
  border-radius: var(--ost-radius-lg) !important;
  box-shadow: var(--ost-shadow-sm) !important;
  padding: 28px !important;
}

/* Client nav */
#client_nav,
.client-header {
  background: var(--ost-card) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  box-shadow: var(--ost-shadow-sm) !important;
}


/* ═══════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════ */

.search-bar,
#search input,
.search input[type="text"] {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-md) !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
}

.search-bar:focus,
#search input:focus {
  border-color: var(--ost-accent) !important;
  box-shadow: 0 0 0 3px var(--ost-accent-light) !important;
}


/* ═══════════════════════════════════════════
   DIALOGS & MODALS
   ═══════════════════════════════════════════ */

.dialog,
.modal-content,
.ui-dialog {
  background: var(--ost-card) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-lg) !important;
  box-shadow: var(--ost-shadow-lg) !important;
  overflow: hidden !important;
}

.dialog .header,
.modal-header,
.ui-dialog-titlebar {
  background: var(--ost-bg) !important;
  border-bottom: 1px solid var(--ost-border-light) !important;
  padding: 16px 20px !important;
  font-family: var(--ost-font-display) !important;
}


/* ═══════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════ */

.pagination a,
.pager a {
  font-family: var(--ost-font-body) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  border-radius: var(--ost-radius-sm) !important;
  border: 1px solid var(--ost-border) !important;
  color: var(--ost-text-sec) !important;
  transition: all 0.2s !important;
}

.pagination a:hover {
  border-color: var(--ost-accent) !important;
  color: var(--ost-accent) !important;
}

.pagination a.active,
.pagination .current {
  background: var(--ost-accent) !important;
  border-color: var(--ost-accent) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════
   ALERTS & MESSAGES
   ═══════════════════════════════════════════ */

.alert,
.notice,
.msg {
  border-radius: var(--ost-radius-md) !important;
  font-family: var(--ost-font-body) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  border: 1px solid !important;
}

.alert-success, .msg.success {
  background: var(--ost-teal-light) !important;
  border-color: rgba(26, 143, 125, 0.2) !important;
  color: var(--ost-teal) !important;
}

.alert-danger, .alert-error, .msg.error {
  background: var(--ost-coral-light) !important;
  border-color: rgba(232, 83, 62, 0.2) !important;
  color: var(--ost-coral) !important;
}

.alert-warning, .msg.warning {
  background: var(--ost-amber-light) !important;
  border-color: rgba(196, 133, 28, 0.2) !important;
  color: var(--ost-amber) !important;
}

.alert-info, .msg.info {
  background: var(--ost-indigo-light) !important;
  border-color: rgba(88, 86, 214, 0.2) !important;
  color: var(--ost-indigo) !important;
}


/* ═══════════════════════════════════════════
   TOOLTIPS & POPOVERS
   ═══════════════════════════════════════════ */

.tooltip-inner,
.popover {
  background: var(--ost-deep) !important;
  color: #fff !important;
  font-family: var(--ost-font-body) !important;
  font-size: 12px !important;
  border-radius: var(--ost-radius-sm) !important;
  padding: 8px 12px !important;
}


/* ═══════════════════════════════════════════
   UTILITY: SMOOTH TRANSITIONS
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* Disable transition on scroll to prevent janky rendering */
html.is-scrolling * {
  transition: none !important;
}


/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

#footer,
.footer {
  background: var(--ost-bg) !important;
  border-top: 1px solid var(--ost-border) !important;
  color: var(--ost-text-muted) !important;
  font-size: 12px !important;
  font-family: var(--ost-font-body) !important;
  padding: 16px 24px !important;
}