/*
 * =====================================================
 *  MSNET Theme for osTicket - CLIENT PORTAL
 *  Inspired by https://www.msnet.si
 *  Dark theme with blue → purple gradient accents
 *  Compatible with osTicket 1.17.x / 1.18.x
 * =====================================================
 *
 * NAMESTITEV:
 * 1. Naloži to datoteko v:  assets/default/css/msnet-theme.css
 * 2. V include/client/header.inc.php dodaj (pred </head>):
 *
 *    <link rel="stylesheet" href="<?php echo ROOT_PATH; ?>assets/default/css/msnet-theme.css" media="screen"/>
 *
 * =====================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ms-bg-dark: #0A0A12;
  --ms-bg-card: #12121F;
  --ms-bg-card-hover: #1A1A2E;
  --ms-text-primary: #FFFFFF;
  --ms-text-secondary: #B0B8C8;
  --ms-text-muted: #6B7280;
  --ms-accent-blue: #4A6CF7;
  --ms-accent-purple: #8B5CF6;
  --ms-accent-gradient: linear-gradient(135deg, #4A6CF7 0%, #8B5CF6 100%);
  --ms-border: rgba(139, 92, 246, 0.15);
  --ms-glow: 0 0 40px rgba(74, 108, 247, 0.15);
  --ms-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========== BASE ========== */
html, body {
  background-color: var(--ms-bg-dark) !important;
  color: var(--ms-text-primary) !important;
  font-family: var(--ms-font) !important;
  line-height: 1.6 !important;
}

body {
  background-image: none !important;
  background: var(--ms-bg-dark) !important;
}

a {
  color: var(--ms-accent-blue) !important;
  transition: all 0.25s ease !important;
}

a:hover {
  color: var(--ms-accent-purple) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ms-text-primary) !important;
  font-weight: 700 !important;
  font-family: var(--ms-font) !important;
}

p, span, label, td, th, li, div {
  color: var(--ms-text-secondary);
}

/* ========== HEADER ========== */
#header {
  background: rgba(10, 10, 18, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
}

#header #logo {
  max-height: 42px !important;
}

#header #logo img,
#header .logo img {
  max-height: 40px !important;
  filter: brightness(1.1);
}

/* ========== NAVIGATION ========== */
#nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

#nav ul {
  background: transparent !important;
}

#nav li a,
#nav li a:link,
#nav li a:visited {
  background: transparent !important;
  background-image: none !important;
  color: var(--ms-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}

#nav li a:hover,
#nav li a.active,
#nav li.active a {
  background: rgba(74, 108, 247, 0.15) !important;
  color: var(--ms-text-primary) !important;
}

/* ========== CONTAINER / CONTENT ========== */
#container,
#content,
.container {
  background: transparent !important;
  color: var(--ms-text-primary) !important;
}

#landing_page,
#main_content,
.main-content {
  background: transparent !important;
}

/* ========== CARDS / BOXES ========== */
.ticket_info,
.form_table,
.dialog,
#ticketForm,
.file,
.message,
.response,
.thread-entry,
.ticket-info,
.sidebar,
.well,
.panel,
.box {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px !important;
  color: var(--ms-text-secondary) !important;
  box-shadow: none !important;
}

.thread-entry {
  margin-bottom: 1rem !important;
}

.thread-entry .header {
  background: var(--ms-bg-card-hover) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ========== BUTTONS ========== */
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button,
.btn,
a.button,
.blue.button,
.green.button {
  background: var(--ms-accent-gradient) !important;
  background-image: var(--ms-accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: var(--ms-font) !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3) !important;
  transition: all 0.25s ease !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.btn:hover,
a.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(74, 108, 247, 0.45) !important;
  filter: brightness(1.05);
}

/* Outline / secondary buttons */
.button.outline,
.btn-outline,
a.button.outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--ms-text-primary) !important;
  box-shadow: none !important;
}

.button.outline:hover {
  border-color: var(--ms-accent-purple) !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ========== FORMS ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select,
.form-control {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 8px !important;
  color: var(--ms-text-primary) !important;
  padding: 10px 14px !important;
  font-family: var(--ms-font) !important;
  transition: border-color 0.25s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ms-accent-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ms-text-muted) !important;
}

label {
  color: var(--ms-text-secondary) !important;
  font-weight: 500 !important;
}

/* ========== TABLES ========== */
table {
  background: transparent !important;
  color: var(--ms-text-secondary) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table th {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-primary) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}

table td {
  background: transparent !important;
  border-bottom: 1px solid var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  padding: 12px 14px !important;
}

table tr:hover td {
  background: var(--ms-bg-card-hover) !important;
}

/* ========== TICKET LIST / STATUS ========== */
.ticket-status,
.status,
.priority {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
}

/* ========== FOOTER ========== */
#footer,
.footer {
  background: #05050A !important;
  border-top: 1px solid var(--ms-border) !important;
  color: var(--ms-text-muted) !important;
  padding: 2rem 0 !important;
}

#footer a {
  color: var(--ms-text-secondary) !important;
}

#footer a:hover {
  color: var(--ms-accent-blue) !important;
}

/* ========== MESSAGES / ALERTS ========== */
#msg_notice,
.success,
.alert-success {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
  border-radius: 8px !important;
}

#msg_warning,
.warning,
.alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
  border-radius: 8px !important;
}

#msg_error,
.error,
.alert-error,
.alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  border-radius: 8px !important;
}

#msg_info,
.info,
.alert-info {
  background: rgba(74, 108, 247, 0.15) !important;
  border: 1px solid rgba(74, 108, 247, 0.3) !important;
  color: #93c5fd !important;
  border-radius: 8px !important;
}

/* ========== SEARCH / FILTERS ========== */
.search,
#search,
.filter {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 8px !important;
}

/* ========== KNOWLEDGE BASE ========== */
.kb-category,
.kb-article,
.faq {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.kb-category:hover,
.kb-article:hover {
  background: var(--ms-bg-card-hover) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: var(--ms-glow);
}

/* ========== LOGIN PAGE ========== */
#loginBox,
.login-box,
.client-choice {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ms-glow) !important;
  padding: 2rem !important;
}

#loginBox h1,
.login-box h1 {
  color: var(--ms-text-primary) !important;
}

/* ========== MISC ========== */
hr {
  border-color: var(--ms-border) !important;
}

.powered-by,
.poweredby {
  opacity: 0.5 !important;
}

/* Scrollbar (Chrome/Edge/Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ms-bg-dark);
}
::-webkit-scrollbar-thumb {
  background: #2a2a3d;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a55;
}

/* Selection */
::selection {
  background: rgba(74, 108, 247, 0.4);
  color: #fff;
}

/* ========== ADDITIONAL POLISH ========== */
.thread-body, .message-body, .response-body {
  color: var(--ms-text-secondary) !important;
}

.ticket-number, .ticket-id {
  color: var(--ms-accent-blue) !important;
  font-weight: 600 !important;
}

/* Better form table look */
.form_table th {
  background: var(--ms-bg-card-hover) !important;
  color: var(--ms-text-primary) !important;
}

/* Knowledge base articles */
.kb-article, .faq, .category {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}

/* Pagination client side */
#pagination a, .pagination a {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-secondary) !important;
  border-radius: 6px !important;
}

#pagination a:hover, #pagination .current {
  background: var(--ms-accent-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* =====================================================
   POPRAVKI ZA HOMEPAGE + LOGIN (brez belih oken)
   ===================================================== */

/* Skrij Guest User */
#header a[href*="guest"],
#header .guest,
a[href*="login.php?guest"],
.guest-user,
#guest-user {
  display: none !important;
}

/* Celotna landing / homepage vsebina – temna */
#landing_page,
#landing_page .main,
#content,
#main_content,
.front-page,
.home-content {
  background: transparent !important;
  color: var(--ms-text-secondary) !important;
}

/* Odstrani bela okna na homepage */
#landing_page .content,
#landing_page .left,
#landing_page .right,
#landing_page .box,
#landing_page .info,
#landing_page p,
.front-page .box,
.front-page .content,
.front-page .left,
.front-page .right,
.home-content .box,
.home-content .content {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-secondary) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Tekst znotraj homepage okvirjev naj bo berljiv */
#landing_page p,
#landing_page .content p,
#landing_page .left p,
#landing_page .right p,
.front-page p,
.home-content p,
#landing_page div,
.front-page div {
  color: var(--ms-text-secondary) !important;
  background: transparent !important;
}

/* Naslovi na homepage */
#landing_page h1,
#landing_page h2,
#landing_page h3,
.front-page h1,
.front-page h2 {
  color: var(--ms-text-primary) !important;
}

/* ========== LOGIN STRAN – celotno temna ========== */
#loginPage,
#login,
.login-page,
body.login {
  background: var(--ms-bg-dark) !important;
}

/* Login box – levi del (form) */
#loginBox,
.login-box,
.client-choice,
#clientLogin,
.login-form,
.form-signin {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 16px !important;
  color: var(--ms-text-primary) !important;
  box-shadow: var(--ms-glow) !important;
}

/* Desna stran login-a (beli del) – naredi temno */
#loginBox .right,
#loginBox .aside,
.client-choice .right,
.client-choice .aside,
.login-box .right,
.login-box .aside,
#login .right,
.login-aside {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-secondary) !important;
  border-left: 1px solid var(--ms-border) !important;
  border-radius: 0 16px 16px 0 !important;
}

/* Tekst v desnem delu login-a */
#loginBox .right *,
.client-choice .right *,
.login-box .right *,
.login-aside * {
  color: var(--ms-text-secondary) !important;
  background: transparent !important;
}

/* Povezave v desnem delu */
#loginBox .right a,
.client-choice .right a,
.login-box .right a {
  color: var(--ms-accent-blue) !important;
}

#loginBox .right a:hover,
.client-choice .right a:hover {
  color: var(--ms-accent-purple) !important;
}

/* Inputi v login formi */
#loginBox input[type="text"],
#loginBox input[type="password"],
#loginBox input[type="email"],
.client-choice input,
.login-box input {
  background: var(--ms-bg-dark) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-primary) !important;
  border-radius: 10px !important;
}

#loginBox input:focus,
.client-choice input:focus {
  border-color: var(--ms-accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.25) !important;
}

/* Gumb Sign In */
#loginBox input[type="submit"],
#loginBox button,
.client-choice input[type="submit"],
.login-box button {
  background: var(--ms-accent-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.35) !important;
}

/* Ikona ključavnice in drugi elementi – ne beli */
#loginBox img,
.client-choice img,
.login-box img {
  filter: brightness(0.9) !important;
  opacity: 0.85;
}

/* Splošno – vsak element z belim ozadjem na client strani */
#content > div,
#content .box,
#content .panel,
#content .well,
#content .card,
.main-content > div {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-secondary) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 14px !important;
}

/* Poskrbi, da nič ne ostane belo */
body #content *,
body #landing_page *,
body #loginBox * {
  /* ne force-amo vsega, ampak pokrijemo najpogostejše */
}

/* Explicitno pokrijemo bele ozadje, ki se pogosto pojavijo */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"] {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-secondary) !important;
}

/* Navigacija na vrhu – aktivni tab */
#nav .active,
#nav li.active a,
#nav a.active {
  background: rgba(74, 108, 247, 0.2) !important;
  color: var(--ms-text-primary) !important;
  border-radius: 10px !important;
}

/* Gumbi na homepage (Open a New Ticket / Check Ticket Status) */
#landing_page a.button,
#landing_page .button,
.front-page a.button,
.front-page .button {
  background: var(--ms-accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  box-shadow: 0 4px 18px rgba(74, 108, 247, 0.35) !important;
  display: block !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

#landing_page a.button:hover,
.front-page a.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(74, 108, 247, 0.45) !important;
  color: #fff !important;
}