/* ============================================================
   TOOLBAYAN — PAGE-SPECIFIC STYLES
   Overrides and additions per tool page
   ============================================================ */

/* ── Sidebar Content (inner items for tool pages) ── */
.sidebar-home-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #0038A8 0%, #1A56D4 100%);
  color: white;
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: opacity .15s;
}

.sidebar-home-link:hover {
  opacity: .88;
  color: white;
}

/* ── Working Days Calendar Grid ── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-header {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gov-text-muted);
  text-transform: uppercase;
  padding: .5rem 0;
}

.cal-day {
  text-align: center;
  padding: .5rem .25rem;
  border-radius: 6px;
  font-size: .83rem;
  cursor: pointer;
  transition: background .12s;
  border: 1px solid transparent;
}

.cal-day:hover {
  background: var(--gov-blue-muted);
}

.cal-day.weekend {
  color: var(--gov-red);
  background: var(--gov-red-light);
}

.cal-day.holiday {
  background: var(--gov-yellow-light);
  color: var(--gov-gold);
  font-weight: 700;
}

.cal-day.selected {
  background: var(--gov-blue);
  color: white;
}

.cal-day.in-range {
  background: var(--gov-blue-muted);
  color: var(--gov-blue);
}

.cal-day.other-month {
  opacity: .35;
  pointer-events: none;
}

.cal-day.today {
  border-color: var(--gov-blue);
  font-weight: 700;
}

/* ── Salary Breakdown Bar ── */
.salary-breakdown-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--gov-border);
  overflow: hidden;
  margin-top: .25rem;
}

.salary-breakdown-bar .bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

.salary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}

.salary-row.deduction {
  background: #FEF2F2;
  border-color: var(--gov-danger);
}

.salary-row.net {
  background: var(--gov-success-light);
  border-color: var(--gov-success);
  font-weight: 700;
}

.salary-row.gross {
  background: var(--gov-blue-muted);
  border-color: var(--gov-blue);
  font-weight: 700;
}

/* ── Budget Table ── */
.budget-item-row {
  position: relative;
}

.budget-item-row .remove-row-btn {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gov-danger);
  border: none;
  color: white;
  font-size: .65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}

.budget-item-row:hover .remove-row-btn {
  opacity: 1;
}

.budget-total-section {
  background: linear-gradient(135deg, var(--gov-dark) 0%, var(--gov-dark-2) 100%);
  border-radius: 12px;
  padding: 1.25rem;
  color: white;
}

.budget-total-section .total-label {
  font-size: .78rem;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.budget-total-section .total-value {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gov-yellow);
}

/* ── QR Code Output ── */
.qr-output-box {
  background: white;
  border: 2px dashed var(--gov-border);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.qr-placeholder-text {
  color: var(--gov-text-muted);
  font-size: .85rem;
  margin-top: .5rem;
}

/* ── ID Picture Preview ── */
.id-pic-canvas-wrapper {
  position: relative;
  background: #f0f0f0;
  border: 2px dashed var(--gov-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.id-size-btn {
  padding: .5rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--gov-border);
  background: white;
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--gov-text);
}

.id-size-btn.active,
.id-size-btn:hover {
  background: var(--gov-blue);
  border-color: var(--gov-blue);
  color: white;
}

/* ── Holiday Calendar ── */
.holiday-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: .75rem 1rem;
  border-radius: 10px;
  border-left: 3px solid var(--gov-border);
  background: white;
  margin-bottom: 6px;
  transition: border-color .12s;
}

.holiday-item.regular {
  border-color: var(--gov-red);
}

.holiday-item.special {
  border-color: var(--gov-yellow);
}

.holiday-item.special-working {
  border-color: var(--gov-info);
}

.holiday-date-badge {
  min-width: 48px;
  text-align: center;
  background: var(--gov-surface);
  border-radius: 8px;
  padding: .35rem .5rem;
  flex-shrink: 0;
}

.holiday-date-badge .h-day {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

.holiday-date-badge .h-month {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gov-text-muted);
}

.holiday-name {
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: 2px;
}

.holiday-type {
  font-size: .74rem;
  color: var(--gov-text-muted);
}

/* ── Meeting Minutes Grid ── */
.attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gov-blue-muted);
  color: var(--gov-blue);
  border-radius: 999px;
  padding: .28rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  margin: 2px;
}

.attendee-chip .remove-chip {
  cursor: pointer;
  font-size: .7rem;
  opacity: .6;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.attendee-chip .remove-chip:hover {
  opacity: 1;
}

/* ── Accomplishment Table ── */
.accomplishment-row {
  transition: background .12s;
}

.accomplishment-row:hover {
  background: var(--gov-surface);
}

.percentage-bar-wrap {
  background: var(--gov-border);
  border-radius: 999px;
  height: 6px;
  width: 80px;
  overflow: hidden;
}

.percentage-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--gov-blue);
  transition: width .4s ease;
}

/* ── Checklist Items ── */
.checklist-item-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.checklist-item-input input[type="text"] {
  flex: 1;
}

/* ── File Name Standardizer ── */
.filename-preview {
  font-family: 'Courier New', monospace;
  background: var(--gov-dark);
  color: #A5F3A5;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: .88rem;
  word-break: break-all;
  min-height: 60px;
}

/* ── Number to Words ── */
.words-output {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gov-blue);
  line-height: 1.5;
  border: 2px dashed var(--gov-blue-muted);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  min-height: 80px;
  background: var(--gov-blue-muted);
}

/* ── AI Summarizer ── */
.ai-output-box {
  background: linear-gradient(135deg, #F8F9FB 0%, #EEF2FF 100%);
  border: 1px solid rgba(0, 56, 168, .1);
  border-radius: 14px;
  padding: 1.5rem;
  font-size: .9rem;
  line-height: 1.75;
  min-height: 200px;
}

.ai-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gov-blue);
  animation: blink .7s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ── Gov Reference Hub — Tab Content ── */
.ref-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--gov-border);
  background: white;
  text-decoration: none;
  color: var(--gov-text);
  transition: all .15s;
  margin-bottom: 6px;
}

.ref-item:hover {
  border-color: var(--gov-blue);
  box-shadow: 0 2px 8px rgba(0, 56, 168, .1);
  transform: translateX(3px);
  color: var(--gov-text);
}

.ref-item .ref-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gov-blue-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gov-blue);
  font-size: 1rem;
  flex-shrink: 0;
}

.ref-item .ref-title {
  font-size: .87rem;
  font-weight: 600;
}

.ref-item .ref-desc {
  font-size: .76rem;
  color: var(--gov-text-muted);
}

/* ── PDF Tools Tabs ── */
.pdf-tool-tab-content {
  min-height: 350px;
}

.drop-zone {
  border: 2px dashed var(--gov-border);
  border-radius: 14px;
  padding: 3rem 2rem;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
  background: var(--gov-surface);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--gov-blue);
  background: var(--gov-blue-muted);
}

.drop-zone i {
  font-size: 2.5rem;
  color: var(--gov-border);
  margin-bottom: 1rem;
  display: block;
}

.drop-zone:hover i {
  color: var(--gov-blue);
}

.drop-zone p {
  font-size: .88rem;
  color: var(--gov-text-muted);
  margin: 0;
}

/* ── Office Directory ── */
.contact-card {
  background: white;
  border: 1px solid var(--gov-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}

/* ── Event Tracker ── */
.event-item {
  background: white;
  border: 1px solid var(--gov-border);
  border-radius: 12px;
  padding: .85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
  transition: all .15s;
}

.event-item:hover {
  box-shadow: var(--shadow-sm);
}

.event-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.event-dot.training {
  background: var(--gov-purple);
}

.event-dot.meeting {
  background: var(--gov-blue);
}

.event-dot.deadline {
  background: var(--gov-danger);
}

.event-dot.holiday {
  background: var(--gov-yellow);
}

.event-dot.seminar {
  background: var(--gov-teal);
}

/* ── Print Preview Mode ── */
.print-preview-active .no-print {
  display: none !important;
}

.print-preview-active .document-preview {
  box-shadow: 0 0 0 2px var(--gov-blue) !important;
  outline: none;
}

/* ── Responsive Tool Pages ── */
@media (max-width: 991.98px) {
  .two-col-tool {
    flex-direction: column;
  }

  .doc-preview-wrapper {
    margin-top: 1rem;
  }
}

/* ── Featured Tool Cards (For Home Page/Dashboard prominence) ── */
.featured-tool-card {
  background: var(--gov-white);
  border: 1px solid var(--gov-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
}

.featured-tool-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gov-blue), var(--gov-blue-light));
  transform: scaleX(1);
  transition: all var(--transition-base);
}

.featured-tool-card.ftc-teal::after {
  background: linear-gradient(90deg, var(--gov-teal), #14B8A6);
}

.featured-tool-card.ftc-green::after {
  background: linear-gradient(90deg, var(--gov-success), #10B981);
}

.featured-tool-card.ftc-red::after {
  background: linear-gradient(90deg, var(--gov-danger), #EF4444);
}

.featured-tool-card.ftc-yellow::after {
  background: linear-gradient(90deg, var(--gov-gold), var(--gov-yellow));
}

.featured-tool-card.ftc-purple::after {
  background: linear-gradient(90deg, var(--gov-purple), #9F67F5);
}

.featured-tool-card:hover {
  border-color: rgba(0, 56, 168, 0.25);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 56, 168, 0.05);
  transform: translateY(-5px);
  color: inherit;
  text-decoration: none;
}

.featured-tool-card:hover .ftc-btn {
  background: var(--gov-blue-dark);
  color: white;
  box-shadow: 0 4px 10px rgba(0, 56, 168, 0.25);
}

.featured-tool-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.featured-tool-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gov-text);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.featured-tool-desc {
  font-size: 0.83rem;
  color: var(--gov-text-muted);
  line-height: 1.6;
  flex: 1;
}

.featured-tool-meta {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gov-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
}

.ftc-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--gov-blue);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
}

.ftc-btn:hover {
  background: var(--gov-blue-dark);
  color: white;
}

.ftc-badge {
  font-size: 0.68rem;
  padding: 0.25em 0.6em;
  font-weight: 600;
  border-radius: var(--radius-full);
}

/* ============================================================
   AD SLOT PREPARATION — Future Ad Placement Containers
   These containers are hidden by default and will only display
   content once ad scripts populate them. They ensure ads can
   be added later without disrupting the layout.
   ============================================================ */

/* Generic ad slot container — hidden until populated */
.ad-slot {
  display: none; /* Hidden until ad code is injected */
  width: 100%;
  min-height: 90px;
  margin: 1.5rem 0;
  text-align: center;
  overflow: hidden;
}

/* Ad slot visible state — activated by ad scripts */
.ad-slot.active,
.ad-slot:not(:empty) {
  display: block;
}

/* Between content sections (informational pages) */
.ad-slot-between-sections {
  padding: 1rem 0;
  border-top: 1px solid var(--gov-border, #e2e8f0);
  border-bottom: 1px solid var(--gov-border, #e2e8f0);
  background: var(--gov-surface, #f8fafc);
}

/* Below long articles */
.ad-slot-below-content {
  margin-top: 2rem;
  padding: 1rem 0;
}

/* Footer area ad slot */
.ad-slot-footer {
  margin: 1rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--gov-border, #e2e8f0);
}

/* Sidebar ad slot (desktop only) */
.ad-slot-sidebar {
  margin: 1.5rem 0;
  min-height: 250px;
}

/* Between tool descriptions (not inside tool workspaces) */
.ad-slot-between-tools {
  margin: 1rem 0;
  padding: 0.5rem 0;
}

/* Responsive: hide sidebar ads on small screens */
@media (max-width: 991.98px) {
  .ad-slot-sidebar {
    display: none !important;
  }
}

/* Ensure ads never appear inside tool workspaces */
.editor-shell .ad-slot,
.tool-form-card .ad-slot,
.sticky-preview-container .ad-slot,
.live-preview .ad-slot {
  display: none !important;
}

/* ============================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================ */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--gov-blue, #0038A8);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s ease;
}

.skip-to-main:focus {
  top: 0;
  color: #fff;
}

/* Enhanced focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gov-blue, #0038A8);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Ensure sufficient color contrast for muted text */
.text-gov-muted {
  color: #5a6577 !important; /* WCAG AA compliant against white */
}