/* ============================================
   Gitjen Custom Branding — Ijen Technologies
   Brand colors:
     Primary teal:   #1fa0b4
     Dark navy:      #1d1f2c
     Gray blue:      #536d79
     White/Light:    #ffffff
   ============================================ */

/* --- Light mode overrides --- */
@media (prefers-color-scheme: light) {
  :root {
    --color-primary: #1fa0b4 !important;
    --color-primary-contrast: #ffffff !important;
    --color-primary-dark-1: #1a8c9d !important;
    --color-primary-dark-2: #167d8c !important;
    --color-primary-dark-3: #126e7b !important;
    --color-primary-dark-4: #0e5f6a !important;
    --color-primary-dark-5: #0a4150 !important;
    --color-primary-dark-6: #052028 !important;
    --color-primary-dark-7: #020a0c !important;
    --color-primary-light-1: #3ab3c4 !important;
    --color-primary-light-2: #55c2d1 !important;
    --color-primary-light-3: #70d1dd !important;
    --color-primary-light-4: #8bdfe8 !important;
    --color-primary-light-5: #b5ecf1 !important;
    --color-primary-light-6: #daf6f8 !important;
    --color-primary-light-7: #f2fcfd !important;
    --color-primary-alpha-10: #1fa0b419 !important;
    --color-primary-alpha-20: #1fa0b433 !important;
    --color-primary-alpha-30: #1fa0b44b !important;
    --color-primary-alpha-40: #1fa0b466 !important;
    --color-primary-alpha-50: #1fa0b480 !important;
    --color-primary-alpha-60: #1fa0b499 !important;
    --color-primary-alpha-70: #1fa0b4b3 !important;
    --color-primary-alpha-80: #1fa0b4cc !important;
    --color-primary-alpha-90: #1fa0b4e1 !important;
    --color-green: #1fa0b4 !important;
    --color-green-light: #3ab3c4 !important;
    --color-green-dark-1: #1a8c9d !important;
    --color-green-dark-2: #167d8c !important;
    --color-teal: #1fa0b4 !important;
    --color-teal-light: #3ab3c4 !important;
    --color-teal-dark-1: #1a8c9d !important;
    --color-teal-dark-2: #167d8c !important;
    --color-green-badge: #1fa0b4 !important;
    --color-green-badge-bg: #1fa0b41a !important;
    --color-green-badge-hover-bg: #1fa0b44d !important;
    --color-nav-bg: #1d1f2c !important;
    --color-nav-hover-bg: #2a2d3d !important;
    --color-nav-text: #ffffff !important;
    --color-footer: #1d1f2c !important;
  }
}

/* --- Dark mode overrides --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #3ab3c4 !important;
    --color-primary-contrast: #ffffff !important;
    --color-primary-dark-1: #55c2d1 !important;
    --color-primary-dark-2: #70d1dd !important;
    --color-primary-dark-3: #8bdfe8 !important;
    --color-primary-dark-4: #a6edf3 !important;
    --color-primary-dark-5: #c1f5fb !important;
    --color-primary-dark-6: #daf6f8 !important;
    --color-primary-dark-7: #f2fcfd !important;
    --color-primary-light-1: #1a8c9d !important;
    --color-primary-light-2: #167d8c !important;
    --color-primary-light-3: #126e7b !important;
    --color-primary-light-4: #0e5f6a !important;
    --color-primary-light-5: #0a4150 !important;
    --color-primary-light-6: #052028 !important;
    --color-primary-light-7: #020a0c !important;
    --color-primary-alpha-10: #3ab3c419 !important;
    --color-primary-alpha-20: #3ab3c433 !important;
    --color-primary-alpha-30: #3ab3c44b !important;
    --color-primary-alpha-40: #3ab3c466 !important;
    --color-primary-alpha-50: #3ab3c480 !important;
    --color-primary-alpha-60: #3ab3c499 !important;
    --color-primary-alpha-70: #3ab3c4b3 !important;
    --color-primary-alpha-80: #3ab3c4cc !important;
    --color-primary-alpha-90: #3ab3c4e1 !important;
    --color-green: #3ab3c4 !important;
    --color-green-light: #55c2d1 !important;
    --color-green-dark-1: #1fa0b4 !important;
    --color-green-dark-2: #1a8c9d !important;
    --color-teal: #3ab3c4 !important;
    --color-teal-light: #55c2d1 !important;
    --color-teal-dark-1: #1fa0b4 !important;
    --color-teal-dark-2: #1a8c9d !important;
    --color-green-badge: #3ab3c4 !important;
    --color-green-badge-bg: #3ab3c41a !important;
    --color-green-badge-hover-bg: #3ab3c44d !important;
    --color-nav-bg: #12141e !important;
    --color-nav-hover-bg: #1d1f2c !important;
    --color-nav-text: #d0d5da !important;
    --color-footer: #12141e !important;
  }
}

/* --- Fallback for non-auto themes --- */
:root {
  --color-primary: #1fa0b4 !important;
  --color-primary-contrast: #ffffff !important;
  --color-green: #1fa0b4 !important;
  --color-teal: #1fa0b4 !important;
}

/* --- Navbar text color fix (dark bg needs white text) --- */
.navbar,
.navbar a,
.navbar .item,
.navbar .item a {
  color: #ffffff !important;
}
.navbar .item:hover {
  background-color: #2a2d3d !important;
}

/* --- Logo sizing --- */
.navbar .logo {
  max-height: 30px;
  width: auto;
}
.page-content .logo {
  max-height: 80px;
  width: auto;
}

/* --- OAuth login button (Ijen SSO) --- */
.oauth-login-link {
  background-color: #1d1f2c !important;
  color: #ffffff !important;
  border: 1px solid #536d79 !important;
}
.oauth-login-link:hover {
  background-color: #536d79 !important;
  color: #ffffff !important;
}

/* --- Footer branding --- */
.page-footer .left-links { visibility: hidden; }
/* ============================================
   Ijen Publish Button & Modal
   ============================================ */

/* --- Publish Button --- */
.ijen-publish-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #1fa0b4;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s;
}
.ijen-publish-btn:hover {
  background: #1a8c9d;
}

/* --- Modal Overlay --- */
.ijen-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

/* --- Modal --- */
.ijen-modal {
  background: var(--color-body, #fff);
  border: 1px solid var(--color-secondary-alpha-40, #d0d5da);
  border-radius: 8px;
  width: 460px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ijen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-secondary-alpha-20, #e8eaed);
}
.ijen-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #1d1f2c);
}
.ijen-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--color-text-light, #536d79);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ijen-modal-close:hover { color: var(--color-text, #1d1f2c); }

.ijen-modal-body {
  padding: 20px;
}

.ijen-modal-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.ijen-modal-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-light, #536d79);
  width: 60px;
  flex-shrink: 0;
}
.ijen-modal-value {
  font-size: 14px;
  color: var(--color-text, #1d1f2c);
}
.ijen-modal-value code {
  background: var(--color-secondary-alpha-10, #f3f4f6);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}

.ijen-modal-divider {
  height: 1px;
  background: var(--color-secondary-alpha-20, #e8eaed);
  margin: 16px 0;
}

/* --- Radio Options --- */
.ijen-modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ijen-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--color-secondary-alpha-20, #e0e3e7);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ijen-radio-option:hover {
  border-color: var(--color-secondary-alpha-40, #c0c5cc);
}
.ijen-radio-option.ijen-radio-selected {
  border-color: #1fa0b4;
  background: rgba(31, 160, 180, 0.05);
}
.ijen-radio-option input[type="radio"] {
  margin-top: 2px;
  accent-color: #1fa0b4;
}
.ijen-radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ijen-radio-content strong {
  font-size: 14px;
  color: var(--color-text, #1d1f2c);
}
.ijen-radio-content span {
  font-size: 12px;
  color: var(--color-text-light, #536d79);
}

/* --- Schedule Fields --- */
.ijen-schedule-fields {
  margin-top: 16px;
  padding: 12px;
  background: var(--color-secondary-alpha-10, #f7f8f9);
  border-radius: 6px;
}
.ijen-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light, #536d79);
  margin-bottom: 6px;
}
.ijen-datetime-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--color-secondary-alpha-40, #d0d5da);
  border-radius: 4px;
  background: var(--color-body, #fff);
  color: var(--color-text, #1d1f2c);
  box-sizing: border-box;
}
.ijen-datetime-input:focus {
  outline: none;
  border-color: #1fa0b4;
  box-shadow: 0 0 0 2px rgba(31, 160, 180, 0.2);
}
.ijen-datetime-input.ijen-input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.ijen-tz-hint {
  display: block;
  font-size: 11px;
  color: var(--color-text-light-2, #8b95a0);
  margin-top: 4px;
}

/* --- Footer --- */
.ijen-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-secondary-alpha-20, #e8eaed);
  background: var(--color-secondary-alpha-10, #f7f8f9);
}

.ijen-btn-cancel {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #1d1f2c);
  background: var(--color-body, #fff);
  border: 1px solid var(--color-secondary-alpha-40, #d0d5da);
  border-radius: 4px;
  cursor: pointer;
}
.ijen-btn-cancel:hover {
  background: var(--color-secondary-alpha-10, #f3f4f6);
}

.ijen-btn-publish {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #1fa0b4;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.ijen-btn-publish:hover {
  background: #1a8c9d;
}
.ijen-btn-publish:disabled {
  opacity: 0.7;
  cursor: wait;
}
.ijen-btn-publish.ijen-btn-schedule {
  background: #1d1f2c;
}
.ijen-btn-publish.ijen-btn-schedule:hover {
  background: #2a2d3d;
}
.ijen-btn-publish.ijen-btn-done {
  background: #16a34a;
  cursor: default;
}

/* --- Status Bar --- */
.ijen-modal-status {
  padding: 10px 20px;
  font-size: 13px;
  border-top: 1px solid transparent;
}
.ijen-status-info {
  background: #eff6ff;
  color: #1e40af;
  border-top-color: #bfdbfe;
}
.ijen-status-success {
  background: #f0fdf4;
  color: #166534;
  border-top-color: #bbf7d0;
}
.ijen-status-error {
  background: #fef2f2;
  color: #991b1b;
  border-top-color: #fecaca;
}