/* ============================================================================
   SoftSys Hosting — SupportPal 6.x CUSTOMER PORTAL restyle  (Direction D)
   ----------------------------------------------------------------------------
   Presentation-only refresh matching the website + WHMCS. Confirmed against the
   live markup of help.softsyshosting.com (SupportPal 6.0.3).

   SupportPal is token-driven: the whole theme flows from --color-primary-* (a
   100–900 scale) plus --color-background-* / --color-text-* neutrals, and the UI
   uses a Tailwind utility system with an `sp:` prefix (sp:bg-primary, etc).

   TWO-STEP INSTALL:
   1) NATIVE (do first): Admin → Settings → Brand / Appearance → set the PRIMARY
      colour to #1E63E9. SupportPal regenerates the --color-primary-* scale and
      recolours buttons/links/nav in light AND dark mode. This CSS also re-points
      the scale (below) as a backstop, but the admin setting is the clean path.
   2) THIS CSS: paste into Admin → Settings → (Brand) → Custom CSS. Loads last.

   INSTALL (upgrade-safe custom template — SupportPal's supported method):
   1. Copy the default frontend template folder to your own:
        resources/templates/frontend/default  ->  resources/templates/frontend/softsys
      (no periods in the folder name).
   2. Drop THIS file in it as:
        resources/templates/frontend/softsys/softsys-custom.css
   3. In that folder, find the head template (the file that outputs the existing
      <link ... frontend/css/main.min.css> line) and add, right after it:
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet" />
        <link href="{{ asset_rev('resources/templates/frontend/softsys/softsys-custom.css') }}" rel="stylesheet" />
   4. Activate: Settings -> Core -> Brands -> [brand] -> Website tab ->
      Frontend Template -> "softsys" -> Save. Then clear SupportPal cache.
   Fonts load via the <link> above (step 3), so there is no @import here.
   On each SupportPal upgrade, check release notes for changes to the default
   template and merge them into the softsys copy.
   ----------------------------------------------------------------------------
   v1.0.0 — 2026-07-15
   ========================================================================== */


/* ============================================================================
   1. SOFTSYS TOKENS  (our own vars, used by the component rules below)
   ========================================================================== */
:root{
  --ss-primary:      #1E63E9;
  --ss-primary-dark: #1450C4;
  --ss-primary-light:#EAF1FF;
  --ss-accent:       #7C5CFC;
  --ss-accent-2:     #22D3EE;
  --ss-ink:          #0E1426;
  --ss-body:         #344056;
  --ss-muted:        #5A6786;
  --ss-surface:      #ffffff;
  --ss-surface-alt:  #F4F7FC;
  --ss-border:       #E6EDF5;
  --ss-border-strong:#D2DEEC;

  --ss-grad-accent:  linear-gradient(95deg, #7C5CFC 0%, #2E7BFF 100%);
  --ss-grad-ai:      linear-gradient(90deg, #22D3EE 0%, #A78BFA 100%);
  --ss-grad-hero:    linear-gradient(150deg, #081233 0%, #0C2050 52%, #171545 100%);

  --ss-font-head: "Plus Jakarta Sans", "Urbanist", system-ui, sans-serif;
  --ss-font-body: "Inter", "Mulish", system-ui, sans-serif;

  --ss-radius-sm: 8px;
  --ss-radius:    14px;
  --ss-radius-lg: 20px;
  --ss-shadow-1: 0 1px 3px rgba(14,20,38,.05);
  --ss-shadow-2: 0 12px 34px rgba(14,20,38,.10);
  --ss-shadow-accent: 0 8px 24px rgba(124,92,252,.30);
  --ss-ease: cubic-bezier(.22,.61,.36,1);
  --ss-dur:  .22s;
}


/* ============================================================================
   2. RE-POINT SUPPORTPAL'S BRAND SCALE  (backstop for the admin brand colour)
   ----------------------------------------------------------------------------
   Re-declared on both :root (light) and .sp-theme-dark so the azure brand is
   consistent in both themes. Neutrals are left to each theme. If you set the
   brand colour in admin (recommended) these simply match it.
   ========================================================================== */
:root,
.sp-theme-dark{
  --color-primary-100: #EAF1FF;
  --color-primary-200: #C9DBFF;
  --color-primary-300: #9DBEFB;
  --color-primary-400: #5B8DF3;
  --color-primary-500: #3B76EE;
  --color-primary-600: #1E63E9;   /* main brand — buttons, links */
  --color-primary-700: #1854CC;
  --color-primary-800: #1450C4;   /* mobile nav background */
  --color-primary-900: #123f9c;
}


/* ============================================================================
   3. GLOBAL BASE — fonts
   ========================================================================== */
body{ font-family: var(--ss-font-body); }
h1, h2, h3, h4, h5, h6,
.sp-content h1, .sp-content h2, .sp-content h3, .sp-content h4{
  font-family: var(--ss-font-head);
  letter-spacing: -0.02em;
}


/* ============================================================================
   4. BUTTONS — .sp-button → the signature gradient CTA
   ========================================================================== */
.sp-button,
button.sp-rate-article + .sp-button,
.sp-button-group .sp-button{
  background-image: var(--ss-grad-accent) !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-family: var(--ss-font-head) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;        /* centre the label vertically */
  height: auto !important;
  vertical-align: middle !important;
  box-shadow: var(--ss-shadow-accent);
  transition: transform var(--ss-dur) var(--ss-ease),
              filter var(--ss-dur) var(--ss-ease) !important;
}
.sp-button:hover{ transform: translateY(-2px); filter: brightness(1.06); color: #fff !important; }
.sp-button i{ color: #fff !important; }


/* ============================================================================
   5. HERO — the "How can we help you today?" search band  (key match cue)
   ----------------------------------------------------------------------------
   .sp-search-container is a white band under the logo header. Re-skin to the
   website's navy hero gradient + AI glows, with a white heading + search field.
   ========================================================================== */
.sp-search-container{
  background-color: var(--ss-surface) ; /* fallback */
  background-image:
    radial-gradient(50% 70% at 88% 0%, rgba(46,123,255,.42), transparent 70%),
    radial-gradient(46% 60% at 4% 100%, rgba(124,92,252,.32), transparent 70%),
    var(--ss-grad-hero) !important;
  box-shadow: none !important;
}
.sp-search-container .sp-search > div:first-child{   /* the heading */
  color: #fff !important;
  font-family: var(--ss-font-head) !important;
}
.sp-search-container input[type="search"]{
  border-radius: var(--ss-radius-sm) !important;
  border: none !important;
  padding: 12px 16px !important;
  box-shadow: var(--ss-shadow-2);
}


/* ============================================================================
   6. CARDS — dashboard tiles, content card, category cards, sidebar boxes
   ========================================================================== */
/* Submit Ticket / Track a Ticket tiles (a.sp:bg-secondary) + KB category cards */
.sp-dashboard-section,
a.sp-category-title{
  border-radius: var(--ss-radius) !important;
  transition: transform var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease) !important;
}
a[href*="/tickets/"].sp\:bg-secondary,
a.sp-category-title:hover{
  box-shadow: var(--ss-shadow-2) !important;
}
/* Dashboard tile + section icons → violet→blue accent gradient, like the
   website's icon tiles. Gradient is clipped to the glyph; solid violet fallback
   for browsers without background-clip:text. */
.sp-icon i{
  color: var(--ss-accent) !important;          /* fallback */
  background: var(--ss-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Main white content card */
.sp-content-inner{
  border-radius: var(--ss-radius) !important;
  box-shadow: var(--ss-shadow-1);
}

/* Sidebar boxes (Categories / Tags) */
.sp-sidebar-box{
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 16px 18px;
  box-shadow: var(--ss-shadow-1);
}
.sp-sidebar-box h2{
  font-family: var(--ss-font-head);
  color: var(--ss-ink);
}
.sp-sidebar-box .sp-nav a:hover{ color: var(--ss-primary); }

/* KB/nav COUNT badges → brand azure. Scoped to sidebar/nav only, and WITHOUT
   !important, so ticket status/priority badges keep their per-status inline
   colours (e.g. style="background-color:#5650a8"). */
.sp-nav .sp-badge,
.sp-sidebar-box .sp-badge{
  background-color: var(--ss-primary);
  color: #fff;
  border-radius: 999px;
}


/* ============================================================================
   7. LISTS / TABS / MISC
   ========================================================================== */
/* Article list rows — soft hover */
.sp-article-list > li{
  border-radius: var(--ss-radius-sm);
  transition: background var(--ss-dur) var(--ss-ease);
}
.sp-article-list > li:hover{ background: var(--ss-surface-alt); }

/* KB tabs (Popular / Latest) active state */
.sp-tabs li.sp-active a,
.sp-tabs li a:hover{ color: var(--ss-primary) !important; }
.sp-tabs li.sp-active{ border-bottom: 3px solid var(--ss-primary); }

/* Breadcrumb + links */
.sp-breadcrumb a{ color: var(--ss-primary); }
.sp-content a:not(.sp-button){ color: var(--ss-primary); }
.sp-content a:not(.sp-button):hover{ color: var(--ss-accent); }

/* Heading accent underline echo (page h1) */
.sp-content-inner > h2:first-of-type{ color: var(--ss-ink); }

/* Alerts */
.sp-alert-error{
  border-radius: var(--ss-radius-sm) !important;
}


/* ============================================================================
   8. TONE DOWN THE BLUE — headings/titles to INK (they were link-blue)
   ----------------------------------------------------------------------------
   SupportPal wraps section titles in <a>, and §7 colours all content links
   azure — so every heading ("Submit Ticket", "Announcements", the page title,
   KB category names) went bright blue. The website keeps headings ink and
   reserves azure for CTAs + genuine inline links. Force headings back to ink.
   ========================================================================== */
.sp-content h1,
.sp-content-inner h1,
.sp-content-inner h2,
.sp-content h2,
h1.sp\:text-3xl,        /* the page title ("Support Portal") */
.sp-dashboard-section h4,
.sp-dashboard-section h4 a,
.sp-dashboard-section a h4,
.sp-article-list h4,
.sp-article-list h4 a,
a.sp-category-title,
a.sp-category-title:visited{
  color: var(--ss-ink) !important;
}
/* keep the click affordance on hover, not by default */
.sp-dashboard-section a:hover h4,
.sp-article-list h4 a:hover,
a.sp-category-title:hover{
  color: var(--ss-primary) !important;
}

/* KB/announcement LIST links (article titles under each category, related
   articles, and the small category/tag meta chips) — calm dark text at rest,
   azure + underline on hover. Prose links INSIDE an article (.sp-article) stay
   azure via §7. This is what kills the "wall of blue" on listing pages. */
.sp-category-article-list a,
.sp-related-articles a,
.sp-article-details a,
.sp-item-list a{
  color: var(--ss-body) !important;
}
.sp-category-article-list a:hover,
.sp-related-articles a:hover,
.sp-article-details a:hover,
.sp-item-list a:hover{
  color: var(--ss-primary) !important;
  text-decoration: underline;
}


/* ============================================================================
   9. FORMS — Submit Ticket, Login, custom fields, ticket reply
   ----------------------------------------------------------------------------
   Selectors confirmed from the ticket/create + ticket-view markup:
   .sp-form-row (row), .sp-input-container (wrap), .sp-form-button (submit wrap),
   and bare <input type="submit">.
   ========================================================================== */
.sp-form-row{ margin-bottom: 18px; }
.sp-form-row > label{
  font-family: var(--ss-font-head);
  font-weight: 600;
  color: var(--ss-ink);
  display: inline-block;
  margin-bottom: 6px;
}

/* Inputs / selects / textareas — rounded, soft border, azure focus ring */
.sp-content-inner input[type="text"],
.sp-content-inner input[type="email"],
.sp-content-inner input[type="password"],
.sp-content-inner input[type="number"],
.sp-content-inner input[type="tel"],
.sp-content-inner input[type="url"],
.sp-content-inner input[type="search"],
.sp-content-inner select,
.sp-content-inner textarea,
.sp-input-container input,
.sp-input-container select,
.sp-input-container textarea{
  border: 1.5px solid var(--ss-border-strong) !important;
  border-radius: var(--ss-radius-sm) !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease) !important;
}
.sp-content-inner input:focus,
.sp-content-inner select:focus,
.sp-content-inner textarea:focus,
.sp-input-container input:focus,
.sp-input-container select:focus,
.sp-input-container textarea:focus{
  border-color: var(--ss-primary) !important;
  box-shadow: 0 0 0 3px rgba(30,99,233,.15) !important;
  outline: none !important;
}

/* Submit buttons (bare <input type=submit>) → the gradient CTA */
.sp-content-inner input[type="submit"],
.sp-form-button input[type="submit"],
.sp-message-form input[type="submit"],
.sp-custom-fields input[type="submit"]{
  background-image: var(--ss-grad-accent) !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  /* top padding 2px less than bottom nudges the low-sitting input text to
     optical centre (an <input type=submit> baseline quirk). */
  padding: 11px 28px 13px !important;
  font-family: var(--ss-font-head) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  height: auto !important;          /* drop any inherited fixed height */
  min-height: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  box-shadow: var(--ss-shadow-accent);
  transition: transform var(--ss-dur) var(--ss-ease),
              filter var(--ss-dur) var(--ss-ease) !important;
}
.sp-content-inner input[type="submit"]:hover,
.sp-form-button input[type="submit"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.sp-content-inner input[type="submit"]:disabled{
  opacity: .5 !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed;
}
/* Secondary ticket action ("Mark as Resolved") → white ghost, not gradient */
button.sp-mark-resolved{
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--ss-border-strong) !important;
  color: var(--ss-ink) !important;
  border-radius: 10px !important;
  font-family: var(--ss-font-head) !important;
  font-weight: 600 !important;
}
button.sp-mark-resolved:hover{ border-color: var(--ss-primary) !important; color: var(--ss-primary) !important; }

/* Ticket reply editor container — soft rounded frame */
.sp-editor-container .sp-input-container{ border-radius: var(--ss-radius-sm); }