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

/* ========================================
   Design Tokens (Binance.US Inspired)
   ======================================== */
:root {
  /* Primary */
  --yellow: #F0B90B;
  --gold: #FFD000;
  --light-gold: #F8D12F;
  --active-yellow: #D0980B;
  --focus-blue: #1EAEDB;

  /* Surface & Background */
  --white: #FFFFFF;
  --snow: #F5F5F5;
  --dark: #222126;
  --dark-card: #2B2F36;
  --ink: #1E2026;

  /* Text */
  --text-primary: #1E2026;
  --text-secondary: #32313A;
  --slate: #848E9C;
  --steel: #686A6C;
  --muted: #777E90;
  --hover-dark: #1A1A1A;

  /* Semantic */
  --green: #0ECB81;
  --red: #F6465D;
  --border: #E6E8EA;
  --border-gold: #FFD000;
}

/* ========================================
   Base Styles
   ======================================== */
body {
  font-family: 'Kanit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--white);
  margin: 0;
  padding: 0;
}

a { color: var(--yellow); text-decoration: none; }
a:hover, a:focus { color: var(--hover-dark); text-decoration: none; }

hr { border-top: 1px solid var(--border); }

/* ========================================
   Arch Navbar
   ======================================== */
.arch-navbar {
  background: var(--white) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  min-height: 64px;
  padding: 0 !important;
  margin: 0 !important;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-radius: 0 !important;
}

.arch-navbar .container {
  max-width: 1200px;
}

.arch-navbar .navbar-brand {
  padding: 10px 20px !important;
  height: 64px;
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.arch-navbar .navbar-brand img {
  border-radius: 20%;
  height: 44px;
  width: 44px;
}

.arch-navbar .navbar-nav > li > a {
  color: var(--text-secondary) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 64px;
  padding: 0 16px !important;
  transition: color 200ms ease;
}

.arch-navbar .navbar-nav > li > a:hover,
.arch-navbar .navbar-nav > li > a:focus {
  color: var(--hover-dark) !important;
  background: transparent !important;
}

.arch-navbar .navbar-nav > .active > a,
.arch-navbar .navbar-nav > .active > a:hover,
.arch-navbar .navbar-nav > .active > a:focus {
  color: var(--yellow) !important;
  background: transparent !important;
}

/* Nav pill button (Login) */
.arch-navbar .arch-btn-nav {
  display: inline-block !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  border-radius: 50px !important;
  line-height: 1.4 !important;
  margin: 14px 4px !important;
  transition: background 200ms ease;
}

.arch-navbar .arch-btn-nav:hover,
.arch-navbar .arch-btn-nav:focus {
  background: var(--focus-blue) !important;
  color: var(--white) !important;
}

/* Version text in nav */
.arch-navbar .arch-version {
  color: var(--slate) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: default;
}

/* Hamburger toggle */
.arch-navbar .navbar-toggle {
  border: 1px solid var(--border) !important;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
}

.arch-navbar .navbar-toggle .icon-bar {
  background-color: var(--text-secondary) !important;
}

.arch-navbar .navbar-toggle:hover,
.arch-navbar .navbar-toggle:focus {
  background-color: var(--snow) !important;
}

/* Collapsed menu bg */
.arch-navbar .navbar-collapse {
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .arch-navbar .navbar-collapse {
    border-top: none !important;
  }
}

/* ========================================
   Hero Section (index page)
   ======================================== */
.arch-hero {
  background: var(--white);
  padding: 80px 32px 64px;
  text-align: center;
}

.arch-hero h1 {
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 16px;
}

.arch-hero .arch-hero-accent {
  color: var(--yellow);
}

.arch-hero p {
  font-size: 20px;
  font-weight: 400;
  color: var(--slate);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 32px;
}

.arch-hero .arch-btn-pill {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .arch-hero { padding: 48px 16px 32px; }
  .arch-hero h1 { font-size: 34px; }
  .arch-hero p { font-size: 16px; }
}

@media (max-width: 425px) {
  .arch-hero h1 { font-size: 28px; }
}

/* ========================================
   Feature Card Grid (index page)
   ======================================== */
.arch-card-section {
  background: var(--snow);
  padding: 64px 32px;
}

.arch-card-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 40px;
}

.arch-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.arch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 24px 32px;
  text-align: center;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  transition: box-shadow 200ms ease, transform 200ms ease;
  cursor: pointer;
}

.arch-card:hover,
.arch-card:focus {
  box-shadow: rgba(8, 8, 8, 0.08) 0px 6px 16px 0px;
  text-decoration: none !important;
  color: inherit !important;
  transform: translateY(-3px);
}

.arch-card:hover .arch-card-icon {
  background: var(--yellow);
  color: var(--white);
}

.arch-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(240, 185, 11, 0.1);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
  transition: all 200ms ease;
}

.arch-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.arch-card p {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .arch-card-section { padding: 48px 16px; }
  .arch-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .arch-card-grid { grid-template-columns: 1fr; }
}

/* ========================================
   Dark Section / Footer
   ======================================== */
.arch-dark-section {
  background: var(--dark);
  padding: 48px 32px;
}

.arch-dark-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.arch-dark-section p,
.arch-dark-section span {
  font-size: 14px;
  font-weight: 400;
  color: var(--slate);
  margin: 0;
  line-height: 1.8;
}

.arch-dark-section strong {
  color: var(--white);
  font-weight: 600;
}

.arch-dark-section a {
  color: var(--yellow);
}

.arch-dark-section a:hover {
  color: var(--light-gold);
}

@media (max-width: 768px) {
  .arch-dark-section { padding: 32px 16px; }
}

/* ========================================
   Page Title (subpages)
   ======================================== */
.arch-page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  padding: 0;
}

.arch-page-title i,
.arch-page-title span {
  color: var(--yellow);
  margin-right: 8px;
}

@media (max-width: 768px) {
  .arch-page-title { font-size: 22px; }
}

/* ========================================
   Content Wrapper (subpages)
   ======================================== */
.arch-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 15px;
  min-height: 60vh;
}

.arch-content hr {
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

@media (max-width: 768px) {
  .arch-content { padding: 24px 15px; }
}

/* ========================================
   Buttons
   ======================================== */
.arch-btn-primary {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink) !important;
  font-family: 'Kanit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 200ms ease;
  text-decoration: none !important;
  letter-spacing: 0.16px;
  line-height: 1.25;
}

.arch-btn-primary:hover,
.arch-btn-primary:focus {
  background: var(--focus-blue);
  color: var(--white) !important;
}

.arch-btn-primary:active {
  background: var(--active-yellow);
}

.arch-btn-pill {
  display: inline-block;
  background: var(--gold);
  color: var(--white) !important;
  font-family: 'Kanit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 36px;
  border: 1px solid var(--gold);
  border-radius: 50px;
  cursor: pointer;
  box-shadow: rgb(153,153,153) 0px 2px 10px -3px;
  transition: background 200ms ease;
  text-decoration: none !important;
}

.arch-btn-pill:hover,
.arch-btn-pill:focus {
  background: var(--focus-blue);
  color: var(--white) !important;
  border-color: var(--focus-blue);
  text-decoration: none !important;
}

.arch-btn-secondary {
  display: inline-block;
  background: var(--white);
  color: var(--yellow) !important;
  font-family: 'Kanit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 36px;
  border: 1px solid var(--yellow);
  border-radius: 50px;
  cursor: pointer;
  box-shadow: rgb(153,153,153) 0px 2px 10px -3px;
  transition: background 200ms ease;
  text-decoration: none !important;
}

.arch-btn-secondary:hover,
.arch-btn-secondary:focus {
  background: var(--focus-blue);
  color: var(--white) !important;
  border-color: var(--focus-blue);
  text-decoration: none !important;
}

/* ========================================
   Form Overrides (inside arch-content)
   ======================================== */
.arch-content .form-control {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Kanit', Arial, sans-serif;
  transition: border-color 200ms ease;
}

.arch-content .form-control:focus {
  border-color: #000;
  box-shadow: none;
  outline: 1px solid #000;
}

.arch-content label {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.arch-content .input-group-addon {
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
  color: var(--slate);
}

.arch-content .input-group .form-control {
  border-radius: 0;
}

.arch-content .input-group .input-group-btn .btn {
  border-radius: 0 8px 8px 0;
  background: var(--yellow);
  color: var(--ink);
  border: 1px solid var(--yellow);
  font-weight: 600;
  font-family: 'Kanit', Arial, sans-serif;
  transition: background 200ms ease;
}

.arch-content .input-group .input-group-btn .btn:hover {
  background: var(--focus-blue);
  border-color: var(--focus-blue);
  color: var(--white);
}

/* ========================================
   Content Card
   ======================================== */
.arch-content-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  margin-bottom: 24px;
}

/* ========================================
   List Group Override (inside arch-content)
   ======================================== */
.arch-content .list-group-item.active,
.arch-content .list-group-item.active:hover,
.arch-content .list-group-item.active:focus {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.arch-content .list-group-item {
  border-color: var(--border);
  color: var(--text-primary);
  font-weight: 500;
  transition: background 200ms ease;
}

.arch-content .list-group-item:hover {
  background: var(--snow);
  color: var(--yellow);
}

.arch-content .list-group {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
}

.arch-content .list-group-item:first-child {
  border-radius: 12px 12px 0 0;
}

.arch-content .list-group-item:last-child {
  border-radius: 0 0 12px 12px;
}

/* ========================================
   Alert Override (inside arch-content)
   ======================================== */
.arch-content .alert {
  border-radius: 8px;
  font-weight: 500;
}

/* ========================================
   Select Override (bootstrap-select)
   ======================================== */
.arch-content .bootstrap-select .btn {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-family: 'Kanit', Arial, sans-serif;
  transition: border-color 200ms ease;
}

.arch-content .bootstrap-select .btn:focus,
.arch-content .bootstrap-select .btn:active {
  border-color: #000;
  outline: 1px solid #000;
  box-shadow: none !important;
}

/* ========================================
   Section Title
   ======================================== */
.arch-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 24px;
}

/* ========================================
   Admin Wrapper
   ======================================== */
.arch-admin-wrap {
  padding: 24px 15px;
  min-height: calc(100vh - 64px - 128px);
}

/* ========================================
   Navbar Dropdown (admin Settings menu)
   ======================================== */
.arch-navbar .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  padding: 8px 0;
  margin-top: 0;
}

.arch-navbar .dropdown-menu > li > a {
  padding: 8px 16px !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.arch-navbar .dropdown-menu > li > a:hover {
  background: var(--snow) !important;
  color: var(--hover-dark) !important;
}

.arch-navbar .dropdown-menu .divider {
  background-color: var(--border);
  margin: 4px 0;
}

.arch-navbar .caret {
  color: var(--slate);
}

/* User label & Logout in navbar */
.arch-navbar .arch-user-label {
  color: var(--slate) !important;
  font-weight: 500 !important;
  cursor: default !important;
}

.arch-navbar .arch-btn-logout {
  color: var(--red) !important;
  font-weight: 600 !important;
}

.arch-navbar .arch-btn-logout:hover {
  background: rgba(246, 70, 93, 0.1) !important;
}

/* ========================================
   Admin Panel Redesign
   ======================================== */
.arch-admin-wrap .panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  overflow: hidden;
}

.arch-admin-wrap .panel-default > .panel-heading {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  padding: 16px 20px;
}

.arch-admin-wrap .panel-heading h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.arch-admin-wrap .panel-heading h3 i,
.arch-admin-wrap .panel-heading h3 span.glyphicon {
  color: var(--yellow);
  margin-right: 8px;
}

.arch-admin-wrap .panel-body {
  padding: 20px;
}

/* ========================================
   Admin Tabs
   ======================================== */
.arch-admin-wrap .nav-tabs {
  border-bottom: 2px solid var(--border);
}

.arch-admin-wrap .nav-tabs > li > a {
  font-weight: 600;
  color: var(--slate);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 12px 20px;
  transition: all 200ms ease;
}

.arch-admin-wrap .nav-tabs > li > a:hover {
  background: transparent;
  border-bottom-color: var(--border);
  color: var(--text-primary);
}

.arch-admin-wrap .nav-tabs > li.active > a,
.arch-admin-wrap .nav-tabs > li.active > a:hover,
.arch-admin-wrap .nav-tabs > li.active > a:focus {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--yellow);
  color: var(--yellow);
}

/* ========================================
   Admin Buttons
   ======================================== */
.arch-admin-wrap .btn-info {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  border-radius: 6px;
  transition: background 200ms ease;
}

.arch-admin-wrap .btn-info:hover,
.arch-admin-wrap .btn-info:focus {
  background: var(--focus-blue);
  border-color: var(--focus-blue);
  color: var(--white);
}

.arch-admin-wrap .btn-success {
  background: var(--green);
  border-color: var(--green);
  font-weight: 600;
  border-radius: 6px;
}

.arch-admin-wrap .btn-danger {
  background: var(--red);
  border-color: var(--red);
  font-weight: 600;
  border-radius: 6px;
}

.arch-admin-wrap .btn-primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  border-radius: 6px;
}

.arch-admin-wrap .btn-primary:hover,
.arch-admin-wrap .btn-primary:focus {
  background: var(--focus-blue);
  border-color: var(--focus-blue);
  color: var(--white);
}

/* ========================================
   Admin Tables
   ======================================== */
.arch-admin-wrap .table > thead > tr > th {
  background: var(--dark);
  color: var(--white);
  font-weight: 600;
  border: none;
  padding: 12px;
}

.arch-admin-wrap .table-hover > tbody > tr:hover {
  background: rgba(240, 185, 11, 0.05);
}

/* ========================================
   Admin Forms
   ======================================== */
.arch-admin-wrap .form-control {
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Kanit', Arial, sans-serif;
  transition: border-color 200ms ease;
}

.arch-admin-wrap .form-control:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.15);
}

.arch-admin-wrap .input-group-addon {
  background: var(--snow);
  border: 1px solid var(--border);
  color: var(--slate);
}

.arch-admin-wrap .alert {
  border-radius: 8px;
  font-weight: 500;
}

/* ========================================
   Admin Modal
   ======================================== */
.modal-content {
  border-radius: 12px;
  border: 1px solid var(--border);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}

/* ========================================
   Login Page
   ======================================== */
.arch-login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--snow);
}

.arch-login-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.arch-login-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  padding: 40px 32px;
}

.arch-login-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  text-align: center;
}

.arch-login-card .arch-login-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(240, 185, 11, 0.1);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 24px;
}

.arch-login-card .arch-login-sub {
  font-size: 14px;
  color: var(--slate);
  text-align: center;
  margin: 0 0 32px;
}

.arch-login-card .form-group {
  margin-bottom: 16px;
}

.arch-login-card .form-control {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  height: auto;
  font-family: 'Kanit', Arial, sans-serif;
  transition: border-color 200ms ease;
}

.arch-login-card .form-control:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.15);
}

.arch-login-card .input-group-addon {
  background: var(--snow);
  border: 1px solid var(--border);
  color: var(--slate);
  border-radius: 8px 0 0 8px;
}

.arch-login-card .input-group .form-control {
  border-radius: 0 8px 8px 0;
}

.arch-login-card .checkbox label {
  color: var(--slate);
  font-weight: 400;
}

.arch-login-card .arch-btn-login {
  display: block;
  width: 100%;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Kanit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 200ms ease;
  margin-bottom: 12px;
}

.arch-login-card .arch-btn-login:hover {
  background: var(--focus-blue);
  color: var(--white);
}

.arch-login-card .arch-btn-back {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--slate);
  font-size: 14px;
  font-weight: 500;
  padding: 8px;
  transition: color 200ms ease;
}

.arch-login-card .arch-btn-back:hover {
  color: var(--hover-dark);
}

/* Maintenance page */
.arch-maintenance {
  text-align: center;
  padding: 80px 20px;
  max-width: 520px;
  margin: 0 auto;
}

.arch-maintenance-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(240, 185, 11, 0.1);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 24px;
}

.arch-maintenance h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

.arch-maintenance p {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
  margin: 0 0 32px;
}

/* Patch Note restyling */
.arch-admin-wrap .patch-header {
  border-left: 4px solid var(--yellow);
  background: var(--snow);
  border-radius: 0 8px 8px 0;
}

.arch-admin-wrap .version-badge {
  background: var(--yellow);
  color: var(--ink);
}

.arch-admin-wrap .patch-list li {
  border-bottom: 1px solid var(--border);
}

/* ========================================
   LEGACY STYLES (preserved for admin pages)
   ======================================== */

/* --- Navbar Inverse (admin) --- */
.navbar {margin: 0; padding: 0;}
.navbar-inverse .navbar-nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #3773FF;
}

.navbar-inverse .navbar-nav > .active > a {
    border-radius: 0;
    color: #000;
    background-color: #3773FF;
}
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    border-radius: 0;
    color: #FFF;
    background-color: #3773FF;
}

.navbar:not(.arch-navbar) {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    border-color: transparent;
}

.navbar-brand{
	padding: 0px 20px 0px 20px;
}

.styleMenu { font-size: 18px; color:#000000 }

/* --- Legacy sub-labels & styles --- */
.subLabel{
	color: #FFFFFF;
	background-color: #5EB5FF;
	padding: 8px;
	border-radius: 8px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-moz-box-shadow: 2px 2px 3px #000;
	-webkit-box-shadow: 2px 2px 3px #000;
}

.styleHeader{ font-size: 30px; color:#000000; }
.styleContent1{ font-size: 16px; color:#000000; }
.styleInput{ font-size: 16px; color:#000000; }
.styleSelect{ font-size: 16px; color:#000000; }
.styleButton{ font-size: 16px; color:#000000; }
.styleButtonBig{ font-size: 20px; color:#FFFFFF;}
.styleSearch{ font-size: 16px; color:#000000; }
.styleStat{ font-size: 16px; }
.styleManual{ font-size: 20px; }
.styleManual > a:link,
.styleManual > a:visited {color: #D9B200;}
.styleManual > a:hover,
.styleManual > a:focus,
.styleManual > a:active {color: #FFA948;}

/* --- Badges --- */
.badge {
	padding: 1px 9px 2px;
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	color: #ffffff;
	background-color: #999999;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error { background-color: #b94a48; }
.badge-error:hover { background-color: #953b39; }
.badge-warning { background-color: #f89406; }
.badge-warning:hover { background-color: #c67605; }
.badge-success { background-color: #468847; }
.badge-success:hover { background-color: #356635; }
.badge-info { background-color: #3a87ad; }
.badge-info:hover { background-color: #2d6987; }
.badge-inverse { background-color: #333333; }
.badge-inverse:hover { background-color: #1a1a1a; }

/* --- Nav sub-menus --- */
.navsMenu{ padding: 5px 0px 5px 0px; background: #FED559; }
.styleNavs{ font-size: 16px; color: #FFFFFF; text-align: center;}
.styleNavs > a:link,
.styleNavs > a:visited {color: #000;}
.styleNavs > a:hover,
.styleNavs > a:focus,
.styleNavs > a:active {color: #000;}

/* --- Icon styles --- */
.styleIcon{ font-size: 20px; color: #000000; text-align: center;}
.styleIcon > a:link,
.styleIcon > a:visited {color: #985728;}
.styleIcon > a:hover,
.styleIcon > a:focus,
.styleIcon > a:active {color: #4C2E17;}

.styleIconFile{ font-size: 20px; text-align: center;}

.styleIconEdit{ font-size: 20px; color: #FED559; text-align: center;}
.styleIconEdit > a:link,
.styleIconEdit > a:visited {color: #FED559;}
.styleIconEdit > a:hover,
.styleIconEdit > a:focus,
.styleIconEdit > a:active {color: #4C2E17;}

.styleIconDel{ font-size: 20px; color: #EF5350; text-align: center;}
.styleIconDel > a:link,
.styleIconDel > a:visited {color: #EF5350;}
.styleIconDel > a:hover,
.styleIconDel > a:focus,
.styleIconDel > a:active {color: #D32F2F;}

.styleIconYes{ font-size: 20px; color: #00E676; text-align: center;}
.styleIconYes > a:link,
.styleIconYes > a:visited {color: #00E676;}
.styleIconYes > a:hover,
.styleIconYes > a:focus,
.styleIconYes > a:active {color: #00C853;}

.styleIconNo{ font-size: 20px; color: #EF5350; text-align: center;}
.styleIconNo > a:link,
.styleIconNo > a:visited {color: #EF5350;}
.styleIconNo > a:hover,
.styleIconNo > a:focus,
.styleIconNo > a:active {color: #D32F2F;}

.styleNo{ font-size: 16px; color: #000000; text-align: center;}
.styleNo > a:link,
.styleNo > a:visited {color: #000000;}
.styleNo > a:hover,
.styleNo > a:focus,
.styleNo > a:active {color: #000000;}

.styleDel > a:link,
.styleDel > a:visited {color: #FFFFFF;}
.styleDel > a:hover,
.styleDel > a:focus,
.styleDel > a:active {color: #FFFFFF;}

.styleIconStar{ font-size: 20px; color: #FED559;}

/* --- Timetable --- */
.styleTime{ font-size: 16px; color: #FFFFFF; text-align: center; background-color: #515151}
.styleWeek{ font-size: 16px; color: #000000; text-align: center; background-color: #E7E7E7}
.styleTitle{ font-size: 16px; color: #000000; text-align: center; background-color: #C0D0FF}

/* --- Button full width --- */
.buttonFull { width: 100%; }

/* --- LabelRepair (legacy, kept for compatibility) --- */
.LabelRepair{
  display: block;
  font-family: 'Kanit', Helvetica, Arial, sans-serif;
  font-size: 25px;
  text-align: center;
  color: #FFFFFF;
  border-radius: 30px;
  padding:50px 25px 50px 25px;
  background-attachment: scroll;
  background-image: url("../../images/slider/ar_bg.jpg");
  background-position: center center;
  background-size: cover;
}

.LabelRepair > a:link,
.LabelRepair > a:visited {color: #FFFFFF;}
.LabelRepair > a:hover,
.LabelRepair > a:focus,
.LabelRepair > a:active {color: #FED559;}

/* --- Bootstrap-select search --- */
.bs-searchbox .form-control {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMTA3MzIzRjZCODExRTg5ODU5RThGOUE5MjEzQTkxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMTA3MzI0RjZCODExRTg5ODU5RThGOUE5MjEzQTkxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQxMDczMjFGNkI4MTFFODk4NTlFOEY5QTkyMTNBOTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQxMDczMjJGNkI4MTFFODk4NTlFOEY5QTkyMTNBOTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SGakMAAABBUlEQVR42mJgQABGII4B4n1A/AGIfwDxPSCeAsTqDASAABBvBuL/QPwGiNcB8XwgPgEV+w7E0bg0MwPxVqjCZiDmR5O3AOKrUHlXbAZEQSVb8LhQGohfAvEtIOZAlzwExK+BmIuAN/OwuYIJiA2A+CAQfyNgwB4obYpuACcQv2cgDGAWcKMb8ByI9YgwQAFK30eXmAb1mwkBA1YD8U8gVkKXUIE6DxRVsjg050AtWY3L9GioAlBUFUC9pAwN8ZVQORB+B8QpuAzxBOJrSIqR8WqoK2H8VFyGsAOxCxCXA3ETECdBvcgAtfk/MYbgA6lohiRRasgnZjIMOAfET4DYEIg3AQQYAKvpRrTzVBWuAAAAAElFTkSuQmCC");
  background-position: right 10px center;
  background-repeat: no-repeat;
  border-radius: 10px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* --- Tooltip --- */
.tooltip-inner {
    max-width: 350px !important;
    width: auto !important;
    font-size: 14px;
    text-align: left;
    background-color: var(--dark) !important;
    color: #ffffff !important;
    border-radius: 8px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--dark) !important;
}

/* ========================================
   FullCalendar Overrides
   ======================================== */
.fc-day,
.fc-day-top {
    cursor: pointer !important;
}

.fc-day-number {
    cursor: pointer !important;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
    cursor: pointer !important;
}

.fc-day:hover,
.fc-day-top:hover {
    background-color: rgba(240, 185, 11, 0.08) !important;
    transition: background-color 0.2s;
}

.fc-today:hover {
    background-color: rgba(240, 185, 11, 0.15) !important;
}

.fc-row .fc-content-skeleton td:hover,
.fc-row .fc-helper-skeleton td:hover {
    background: transparent !important;
}

.popover-title .close {
    float: right;
    margin-top: -2px;
    cursor: pointer;
    outline: none;
}

.fc-event {
    cursor: pointer !important;
    border-radius: 4px;
}

.fc-event:hover {
    opacity: 0.75;
}

/* FullCalendar header buttons styled with design system */
.fc-button {
  font-family: 'Kanit', Arial, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: background 200ms ease !important;
}

.fc-state-active {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border-color: var(--yellow) !important;
}