/* Itmad Certification — brand override on top of WowDash style.css.
 * Loaded AFTER WowDash CSS so these win the cascade.
 *
 * Spec §9.2: primary navy #0F2C4A, accent teal #1E7A7A.
 * WowDash exposes its primary palette as Tailwind utility classes (.bg-primary-*,
 * .text-primary-*, .border-primary-* etc.). We override the literal hex values
 * by retargeting the same selectors. */

/* === Primary palette: WowDash defaults → Itmad navy === */
.bg-primary-50  { background-color: #E8EDF3 !important; }
.bg-primary-100 { background-color: #C7D2DF !important; }
.bg-primary-200 { background-color: #8DA4BD !important; }
.bg-primary-300 { background-color: #54779B !important; }
.bg-primary-400 { background-color: #2A5079 !important; }
.bg-primary-500 { background-color: #0F2C4A !important; }
.bg-primary-600 { background-color: #0F2C4A !important; }
.bg-primary-700 { background-color: #0C233B !important; }
.bg-primary-800 { background-color: #091B2D !important; }
.bg-primary-900 { background-color: #06121F !important; }

.text-primary-50  { color: #E8EDF3 !important; }
.text-primary-100 { color: #C7D2DF !important; }
.text-primary-200 { color: #8DA4BD !important; }
.text-primary-300 { color: #54779B !important; }
.text-primary-400 { color: #2A5079 !important; }
.text-primary-500 { color: #0F2C4A !important; }
.text-primary-600 { color: #0F2C4A !important; }
.text-primary-700 { color: #0C233B !important; }
.text-primary-800 { color: #091B2D !important; }
.text-primary-900 { color: #06121F !important; }

.border-primary-50  { border-color: #E8EDF3 !important; }
.border-primary-100 { border-color: #C7D2DF !important; }
.border-primary-200 { border-color: #8DA4BD !important; }
.border-primary-300 { border-color: #54779B !important; }
.border-primary-400 { border-color: #2A5079 !important; }
.border-primary-500 { border-color: #0F2C4A !important; }
.border-primary-600 { border-color: #0F2C4A !important; }
.border-primary-700 { border-color: #0C233B !important; }
.border-primary-800 { border-color: #091B2D !important; }
.border-primary-900 { border-color: #06121F !important; }

/* btn-primary baseline (WowDash defines its own; override the colour values) */
.btn-primary, .btn-primary-600 {
    background-color: #0F2C4A !important;
    border-color: #0F2C4A !important;
    color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary-600:hover {
    background-color: #0C233B !important;
    border-color: #0C233B !important;
}
.btn-outline-primary, .btn-outline-primary-600 {
    border-color: #0F2C4A !important;
    color: #0F2C4A !important;
}
.btn-outline-primary:hover, .btn-outline-primary-600:hover {
    background-color: #0F2C4A !important;
    color: #FFFFFF !important;
}

/* === Accent palette (teal) — Itmad-specific === */
.bg-accent-600   { background-color: #1E7A7A !important; }
.text-accent-600 { color: #1E7A7A !important; }
.border-accent-600 { border-color: #1E7A7A !important; }
.btn-accent { background-color: #1E7A7A; border-color: #1E7A7A; color: #FFFFFF; padding: .5rem 1rem; border-radius: .5rem; }
.btn-accent:hover { background-color: #176262; border-color: #176262; }

/* === Sidebar logo placeholder text — until a real PNG is provided === */
.itmad-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #1E7A7A;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    font-size: 14px;
}

/* === Mention pill (carry-over from Phase 3) === */
.mention {
    display: inline;
    background-color: #E8EDF3;
    color: #0F2C4A;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 500;
}
.dark .mention {
    background-color: rgba(15, 44, 74, 0.4);
    color: #C7D2DF;
}

/* === Status badges (spec §9.2) — override WowDash badge defaults
 * for status-specific tones. Class names match Itmad Phase 1. === */
.badge-not-started { background-color: #E5E7EB; color: #374151; }
.badge-started     { background-color: #DBEAFE; color: #1E40AF; }
.badge-completed   { background-color: #D1FAE5; color: #065F46; }
.badge-overdue     { background-color: #FEE2E2; color: #991B1B; }
.badge-at-risk     { background-color: #FEF3C7; color: #92400E; }

.badge-not-started, .badge-started, .badge-completed, .badge-overdue, .badge-at-risk {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
}

/* === Skeleton loaders (use on placeholders during data fetch) === */
.skeleton {
    background: linear-gradient(90deg, #E5E7EB 0%, #F3F4F6 50%, #E5E7EB 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: itmad-skeleton-shimmer 1.4s ease-in-out infinite;
}
.dark .skeleton {
    background: linear-gradient(90deg, #374151 0%, #4B5563 50%, #374151 100%);
    background-size: 200% 100%;
}
.skeleton-line { height: 12px; width: 100%; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-circle { border-radius: 9999px; aspect-ratio: 1; }
@keyframes itmad-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Print stylesheet — used for /reports/* CSV/PDF exports rendered in-browser
 *    Hides chrome (sidebar, navbar, footer, action buttons) and tightens spacing. === */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .sidebar, .dashboard-main-aside, x-wowdash\.sidebar,
    .navbar-header, .dashboard-header, x-wowdash\.navbar,
    .footer-section, x-wowdash\.footer { display: none !important; }
    .dashboard-main { margin: 0 !important; padding: 0 !important; }
    .dashboard-main-body { padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #d1d5db !important; break-inside: avoid; }
    .btn, .btn-primary, .btn-outline-primary, .btn-secondary,
    form, input, select, textarea, button { display: none !important; }
    a, a:visited { color: #000 !important; text-decoration: none !important; }
    table { border-collapse: collapse !important; width: 100% !important; }
    thead { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    th, td { border: 1px solid #e5e7eb !important; padding: 6px 8px !important; }
    h1, h2, h3, h4, h5, h6 { break-after: avoid; }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}
.print-only { display: none; }