/*==========================================================================
   EduMasr Theme for osTicket
   File: assets/custom/custom.css
   Background: assets/custom/rev-big.jpg
   ========================================================================== */

/* ===== Brand variables ===== */
:root {
  --brand-dark:    #1a1a1a;     /* topbar */
  --brand-primary: #ffffff;     /* header / surface */
  --brand-accent:  #f26522;     /* orange (headings, CTAs) */
  --brand-gold:    #d1913c;     /* buttons */
  --text-strong:   #0b2141;
  --text-normal:   #1f2a44;
  --text-muted:    #6b7280;
  --surface:       #ffffff;
  --surface-2:     #f9f9fb;
  --radius:        10px;
  --font-main:     "Cairo", "Inter", system-ui, sans-serif;
}

/* ===== Base ===== */
html, body {
  font-family: var(--font-main);
  color: var(--text-normal);
  background: url("./rev-big.jpg") center center / cover no-repeat fixed;
}
a { color: var(--brand-accent); text-decoration: none; }
a:hover { opacity: .8; }

/* ===== Header / Top bar ===== */
#header, .masthead, .navbar, .banner, .content-header {
  background: var(--brand-primary) !important;
  color: var(--text-strong) !important;
  border-bottom: 2px solid #eee;
}
#top_bar, .top-bar, .navbar-top {
  background: var(--brand-dark) !important;
  color: #fff !important;
  font-size: 14px;
}
#top_bar a, .top-bar a { color: #fff !important; }
#top_bar a:hover { color: var(--brand-accent) !important; }

/* Logo */
.logo img, #logo img, .brand img {
  max-height: 48px;
  width: auto;
}

/* ===== Hero background (login / landing) ===== */
body.client #content {
  background: url("../custom/rev-big.jpg") center center / cover no-repeat fixed;
  padding: 40px 0;
}
.thread-body h1, .thread-body .h1 {
  font-family: var(--font-main);
    font-weight: 700;
}
body.client #content .content {
  background: rgba(0,0,0,.55);
  border-radius: var(--radius);
  color: #fff;
  padding: 32px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3);
}
body.client #content h1, 
body.client #content h2, 
body.client #content h3 {
  color: #fff;
  font-weight: 700;
}
body.client #content h1 span,
body.client #content h2 span {
  color: var(--brand-accent);
}

/* ===== Buttons ===== */
.btn, button, input[type=submit], .action-button {
  background: var(--brand-gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius);
  font-weight: 600;
  padding: 10px 18px;
  transition: background .2s ease, transform .1s ease;
}
.btn:hover, button:hover, input[type=submit]:hover {
  background: var(--brand-accent) !important;
  transform: translateY(-1px);
}

/* ===== Forms ===== */
input, select, textarea {
  border-radius: var(--radius);
  border: 1px solid #ccc;
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(242,101,34,.2);
  outline: none;
}

/* ===== Tables ===== */
.table, table.list, table#ticketTable {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th {
  background: #fafafa;
  color: var(--text-strong);
  font-weight: 600;
}
.table tbody tr:hover { background: #fdf7f4; }

/* ===== Alerts ===== */
.alert-success { background: #ecfdf5; color: #065f46; }
.alert-warning { background: #fff7ed; color: #7c2d12; }
.alert-danger  { background: #fef2f2; color: #991b1b; }

/* ===== Footer ===== */
#footer, .footer {
  background: var(--brand-dark) !important;
  color: #ccc !important;
  padding: 20px;
}
#footer a { color: var(--brand-accent) !important; }

/* ===== RTL Support ===== */
html[dir="rtl"] body { direction: rtl; font-family: var(--font-main); }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; }

/* ===== Mobile ===== */
@media (max-width:768px) {
  body.client #content { padding: 20px 0; }
  body.client #content .content { padding: 20px; }
}