/* ECLA Africa Consult — Audit Management System */
/* Brand Colors: Green #1B6B3A, Orange #E8912D, Dark Green #145A2F */

:root {
    --ecla-green: #1B6B3A;
    --ecla-dark-green: #145A2F;
    --ecla-orange: #E8912D;
    --ecla-gold: #F5A623;
    --ecla-light-green: #e8f5e9;
    --ecla-light-orange: #fff3e0;
    --ecla-text: #2c3e2d;
    --ecla-muted: #6c757d;
    --ecla-bg: #f4f7f4;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    background-color: var(--ecla-bg);
    color: var(--ecla-text);
}

/* Navbar — ECLA Green */
.navbar {
    position: relative;
    background: linear-gradient(135deg, var(--ecla-dark-green) 0%, var(--ecla-green) 100%) !important;
}
.navbar { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.navbar-brand { margin-right: 12px; padding: 0; }
.navbar-brand img { height: 30px; }
.navbar .navbar-nav .nav-link { font-size: 0.78rem; padding: 0.3rem 0.5rem; white-space: nowrap; }
.navbar .dropdown-toggle::after { margin-left: 0.15em; }
.navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ecla-orange) !important; }
.navbar .dropdown-menu { border: 1px solid var(--ecla-green); border-top: 3px solid var(--ecla-orange); }
.navbar .dropdown-item:hover { background-color: var(--ecla-light-green); color: var(--ecla-green); }

@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

/* Dashboard Cards */
.stat-card { border-left: 4px solid var(--ecla-green); }
.stat-card.success { border-left-color: var(--ecla-green); }
.stat-card.warning { border-left-color: var(--ecla-orange); }
.stat-card.danger  { border-left-color: #c62828; }
.stat-card .stat-number { font-size: 2rem; font-weight: 700; color: var(--ecla-green); }
.stat-card .stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ecla-muted); }

/* Tables */
.table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-dark, .table-dark th { background-color: var(--ecla-dark-green) !important; color: white !important; }

/* Badges */
.badge { font-weight: 500; font-size: 0.75rem; }

/* Buttons — ECLA theme */
.btn-primary { background-color: var(--ecla-green); border-color: var(--ecla-green); }
.btn-primary:hover { background-color: var(--ecla-dark-green); border-color: var(--ecla-dark-green); }
.btn-outline-primary { color: var(--ecla-green); border-color: var(--ecla-green); }
.btn-outline-primary:hover { background-color: var(--ecla-green); color: white; }
.btn-warning { background-color: var(--ecla-orange); border-color: var(--ecla-orange); color: white; }
.btn-warning:hover { background-color: #d07d1f; border-color: #d07d1f; color: white; }
.btn-outline-warning { color: var(--ecla-orange); border-color: var(--ecla-orange); }
.btn-outline-warning:hover { background-color: var(--ecla-orange); color: white; }

/* Forms */
.form-label { font-weight: 600; font-size: 0.85rem; }
.form-text { font-size: 0.75rem; }
.form-control:focus, .form-select:focus { border-color: var(--ecla-green); box-shadow: 0 0 0 0.2rem rgba(27,107,58,0.15); }

/* Cards */
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-radius: 8px; }
.card-header { background: white; font-weight: 600; border-bottom: 2px solid #e9ecef; }

/* Login */
.login-container { max-width: 420px; margin: 80px auto; }
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo img { max-height: 60px; margin-bottom: 0.5rem; }
.login-logo h2 { color: var(--ecla-green); font-weight: 700; }
.login-logo small { color: var(--ecla-muted); }
.login-card { border-top: 4px solid var(--ecla-orange); }

/* Working paper sections */
.wp-section { border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; background: white; }
.wp-section h6 { color: var(--ecla-green); font-weight: 700; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e9ecef; }

/* Activity */
.activity-item { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.85rem; }
.activity-item:last-child { border-bottom: none; }

/* Progress */
.progress-thin { height: 6px; border-radius: 3px; }
.progress-bar { background-color: var(--ecla-green); }

/* Stage tracker */
.stage-tracker { display: flex; justify-content: space-between; margin: 1rem 0; }
.stage-step { flex: 1; text-align: center; padding: 0.5rem; font-size: 0.75rem; position: relative; }
.stage-step::after { content: ''; position: absolute; top: 50%; right: 0; width: 100%; height: 2px; background: #dee2e6; z-index: 0; }
.stage-step:last-child::after { display: none; }
.stage-step .step-dot { width: 24px; height: 24px; border-radius: 50%; background: #dee2e6; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: white; position: relative; z-index: 1; margin-bottom: 0.25rem; }
.stage-step.active .step-dot { background: var(--ecla-orange); }
.stage-step.completed .step-dot { background: var(--ecla-green); }

/* Breadcrumbs */
.breadcrumb { background: none; padding: 0; font-size: 0.85rem; }
.breadcrumb-item a { color: var(--ecla-green); }

/* Tabs — ECLA style */
.nav-tabs .nav-link.active { color: var(--ecla-green); border-bottom: 3px solid var(--ecla-orange); font-weight: 600; }
.nav-tabs .nav-link { color: var(--ecla-muted); }
.nav-tabs .nav-link:hover { color: var(--ecla-green); }

/* Footer */
footer { background-color: var(--ecla-dark-green) !important; color: rgba(255,255,255,0.7) !important; }
footer small { color: rgba(255,255,255,0.7) !important; }

/* Alert success = green */
.alert-success { background-color: var(--ecla-light-green); border-color: var(--ecla-green); color: var(--ecla-dark-green); }

/* Links */
a { color: var(--ecla-green); }
a:hover { color: var(--ecla-dark-green); }

/* Responsive */
@media (max-width: 768px) {
    .stat-card .stat-number { font-size: 1.5rem; }
    .stage-tracker { flex-wrap: wrap; }
    .stage-step { flex: none; width: 33.33%; }
}

/* Auto-expand textarea fields */
textarea.auto-expand {
    resize: none;
    overflow: hidden;
    min-height: 2.5rem;
    line-height: 1.5;
    font-family: inherit;
    font-size: inherit;
}

/* Print */
@media print {
    .navbar, footer, .btn, .filter-panel { display: none !important; }
    .container-fluid { padding: 0 !important; }
}

/* Choices.js (searchable dropdowns)
   Table cells and flex children can collapse the trigger to a few px; Choices then
   sizes the dropdown to that width and long labels wrap one character per line. */
.choices {
  margin-bottom: 0;
  min-width: 6rem;
  max-width: 100%;
  font-size: inherit;
}

.table td > .choices,
.table th > .choices,
.table-responsive td > .choices,
.table-responsive th > .choices {
  min-width: 9rem;
}

.choices__inner {
  min-height: 31px;
  min-width: 0;
  padding: 2px 7px;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.table .choices__inner,
.table-responsive .choices__inner {
  min-width: 7rem;
}

/* Dropdown list: override inline width Choices sets from a collapsed trigger */
.choices__list--dropdown,
.is-flipped .choices__list--dropdown {
  z-index: 3000;
  min-width: 11rem !important;
  box-sizing: border-box;
  max-width: min(100vw - 1.5rem, 36rem);
}

.choices__list--dropdown .choices__item,
.choices__list--dropdown .choices__item--selectable,
.choices__list--dropdown .choices__group .choices__item {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.choices__list--dropdown .choices__input,
.choices__list--dropdown .choices__input--cloned {
  min-width: 5rem !important;
}

/* Auto-expand text fields: prefer native field-sizing; JS handles textarea fallback */
@supports (field-sizing: content) {
    textarea.form-control:not([rows]):not([data-fixed-size="1"]),
    textarea.form-control-sm:not([rows]):not([data-fixed-size="1"]) {
        field-sizing: content;
        min-height: 2.5rem;
        max-height: 70vh;
        resize: vertical;
    }
    input.form-control[type="text"]:not([data-fixed-size="1"]),
    input.form-control-sm[type="text"]:not([data-fixed-size="1"]),
    input.form-control[type="search"]:not([data-fixed-size="1"]),
    input.form-control[type="email"]:not([data-fixed-size="1"]),
    input.form-control[type="url"]:not([data-fixed-size="1"]) {
        field-sizing: content;
        width: 100%;
        max-width: 100%;
    }
}