/* =========================================
   NC-AGENT.DE - COMPONENTS
   Header, Navigation, Footer, Cards, Alerts,
   Badges, Buttons, Dropdowns
   Based on netclusive.de design system
   ========================================= */


/* ==========================================================================
   1. LAYOUT CONTAINER
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}


/* ==========================================================================
   2. SITE HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Logo */
.header-logo a {
  display: block;
  text-indent: -9999px;
  width: 180px;
  height: 54px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9InRpbnkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTM2IDI4OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IkhpbGZzbGluaWVuIiBkaXNwbGF5PSJub25lIj48L2c+PGcgaWQ9IkxvZ28iPjxnIGlkPSJTY2hyaWZ0enVnIiBkaXNwbGF5PSJub25lIj48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik0yODAuMDYsMTIwLjEyYzUuMy04LjY1LDEzLjU0LTEzLjY4LDIzLjg3LTEzLjY4YzE5LjEyLDAsMjUuODIsMTIuNDIsMjUuODIsMzEuNjlWMTgwaC0xOC40M3YtMzQuNjJjMC0xMy44Mi0wLjctMjQuMDEtMTIuOTgtMjQuMDFjLTYuMTQsMC0xMS43MywzLjc3LTE0LjY2LDkuMzVjLTIuMDksNC4wNS0zLjA3LDkuNjMtMy4wNywxNi43NVYxODBoLTE4LjQzdi00OS41NWMwLTYuOTgtMC4xNC0xNC42Ni0wLjctMjIuMzNoMTcuNzNjMC4yOCwzLjA3LDAuNTYsOC4yNCwwLjU2LDEySDI4MC4wNnoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik0zNTguNjUsMTQ5LjI5YzAuMjgsMTEuMDMsOS4yMSwxOC4xNSwyMi4xOSwxOC4xNWM3Ljk2LDAsMTQuOTQtMi4wOSwyMC45NC01Ljg2bDAuMjgsMTUuMzVjLTYuMTQsMi45My0xNC4zOCw0Ljc1LTIzLjQ1LDQuNzVjLTIzLjU5LDAtMzkuMDgtMTMuODItMzkuMDgtMzcuOTdjMC0yMS42NCwxNC4zOC0zNy4yNywzNi4wMS0zNy4yN2MyMC44LDAsMzEuNTUsMTIuNDIsMzEuNTUsMzguMzljMCwxLjEyLTAuMTQsMy40OS0wLjI4LDQuNDdIMzU4LjY1eiBNMzg5LjkyLDEzNi40NWMwLTExLjczLTUuODYtMTYuNzUtMTUuMDgtMTYuNzVjLTguMjQsMC0xNS40OSw1LjU4LTE2LjQ3LDE2Ljc1SDM4OS45MnoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik00MTEuMjgsMTIxLjkzdi0xMy44MmgxNC4xVjkzLjA0bDE3LjU5LTZ2MjEuMDhoMTcuMTd2MTMuODJoLTE3LjE3djI4LjA2YzAsMTAuODksMi4wOSwxNS43NywxMS4xNywxNS43N2MyLjIzLDAsNC43NS0wLjQyLDYuODQtMS4xMmwwLjQyLDE0LjM4Yy0zLjQ5LDEuMjYtOC4xLDEuODItMTIuODQsMS44MmMtMTYuNDcsMC0yMy40NS04LjEtMjMuNDUtMjcuMDh2LTMxLjgzSDQxMS4yOHoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiMwRDY1QUUiIGQ9Ik01MTcuNSwxMjMuNDdjLTMuMzUtMS40LTYuNy0yLjIzLTExLjMxLTIuMjNjLTE0LjEsMC0yMS41LDEwLjE5LTIxLjUsMjIuNzVjMCwxMi45OCw2LjcsMjIuNjEsMjEuOTIsMjIuNjFjNC4zMywwLDguMS0wLjcsMTIuMTQtMi41MWwwLjk4LDE0LjY2Yy00Ljc1LDEuNTQtOS4wNywyLjIzLTE1LjIxLDIuMjNjLTIzLjg3LDAtMzkuMzYtMTQuMjQtMzkuMzYtMzYuNTdjMC0yMy4xNywxNy43My0zNy4xMywzOC44LTM3LjEzYzUuODYsMCwxMC40NywwLjU2LDE0Ljk0LDEuOTVMNTE3LjUsMTIzLjQ3eiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTUzMC42Miw3NC40N2gxOC43MVYxODBoLTE4LjcxVjc0LjQ3eiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTYxMi40MiwxNjguMTNjLTQuNjEsNy40LTEyLDEzLjU0LTI0LjcxLDEzLjU0Yy0xNS4yMSwwLTI1LjI2LTExLjAzLTI1LjI2LTI3Ljkydi00NS42NWgxOC40MnYzNy4yN2MwLDEyLjU2LDIuNjUsMjAuOTQsMTMuNTQsMjAuOTRjMTAuNzUsMCwxNy4wMy05LjkxLDE3LjAzLTIyLjMzdi0zNS44N2gxOC41NnY1MC41M2MwLDcuNTQsMCwxNS4zNSwwLjcsMjEuMzZoLTE3LjQ1Yy0wLjI4LTIuOTMtMC41Ni03LjEyLTAuNTYtMTEuODdINjEyLjQyeiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTY0MywxNjMuMTFjNi45OCwzLjM1LDEzLjk2LDQuODgsMjAuMjQsNC44OHMxMS43My0yLjUxLDExLjczLTcuNjhjMC01LjAzLTIuNjUtNi45OC0xNC4xLTExLjAzYy0xMy42OC00Ljc1LTE5LjEyLTEwLjE5LTE5LjEyLTIwLjhjMC0xMy42OCwxMS4zMS0yMi4wNSwyOC40OC0yMi4wNWM3LjU0LDAsMTQuMSwxLjEyLDE5LjU0LDMuMzVsLTEuNTQsMTMuOTZjLTYuMTQtMi43OS0xMS40NS00LjA1LTE3LjE3LTQuMDVjLTYuMjgsMC0xMC44OSwyLjY1LTEwLjg5LDcuNTRjMCw0Ljg5LDIuOTMsNi41NiwxMy4xMiw5LjkxYzEyLjcsNC4xOSwyMC4zOCw5LjM1LDIwLjM4LDIxLjY0YzAsMTQuOC0xMiwyMi44OS0yOS40NSwyMi44OWMtNy44MiwwLTE1LjA4LTEuMTItMjIuMi0zLjc3TDY0MywxNjMuMTF6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNNzA0Ljk3LDk0LjQzVjc2LjU3aDE4LjcxdjE3Ljg3SDcwNC45N3ogTTcwNC45NywxMDguMTFoMTguNzFWMTgwaC0xOC43MVYxMDguMTF6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNNzYzLjQ2LDE0OC4wM2MxLjQsNC40NywzLjc3LDEyLjU2LDQuODksMTcuNDVoMC4yOGMxLjI2LTQuODgsMy42My0xMy4yNiw1LjAzLTE3LjQ1bDEyLjctMzkuOTJoMTguODRMNzc5LjA5LDE4MGgtMjIuMDVsLTI2LjM4LTcxLjg5aDIwLjI0TDc2My40NiwxNDguMDN6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNODI1LjQ0LDE0OS4yOWMwLjI4LDExLjAzLDkuMjEsMTguMTUsMjIuMTksMTguMTVjNy45NiwwLDE0Ljk0LTIuMDksMjAuOTQtNS44NmwwLjI4LDE1LjM1Yy02LjE0LDIuOTMtMTQuMzgsNC43NS0yMy40NSw0Ljc1Yy0yMy41OSwwLTM5LjA4LTEzLjgyLTM5LjA4LTM3Ljk3YzAtMjEuNjQsMTQuMzgtMzcuMjcsMzYuMDEtMzcuMjdjMjAuOCwwLDMxLjU1LDEyLjQyLDMxLjU1LDM4LjM5YzAsMS4xMi0wLjE0LDMuNDktMC4yOCw0LjQ3SDgyNS40NHogTTg1Ni43MSwxMzYuNDVjMC0xMS43My01Ljg2LTE2Ljc1LTE1LjA4LTE2Ljc1Yy04LjI0LDAtMTUuNDksNS41OC0xNi40NywxNi43NUg4NTYuNzF6Ii8+PC9nPjxnIGlkPSJTY2hyaWZ0enVnX3gyOF9QZmFkZV94MjlfIj48cGF0aCBmaWxsPSIjMEM2NkFFIiBkPSJNMjcwLjU3LDEyMC4xMmM1LjMtOC42NSwxMy41NC0xMy42OCwyMy44Ny0xMy42OGMxOS4xMiwwLDI1LjgyLDEyLjQyLDI1LjgyLDMxLjY5VjE4MGgtMTguNDN2LTM0LjYyYzAtMTMuODItMC43LTI0LjAxLTEyLjk4LTI0LjAxYy02LjE0LDAtMTEuNzMsMy43Ny0xNC42Niw5LjM1Yy0yLjA5LDQuMDUtMy4wNyw5LjYzLTMuMDcsMTYuNzVWMTgwSDI1Mi43di00OS41NWMwLTYuOTgtMC4xNC0xNC42Ni0wLjctMjIuMzNoMTcuNzNjMC4yOCwzLjA3LDAuNTYsOC4yNCwwLjU2LDEySDI3MC41N3oiLz48cGF0aCBmaWxsPSIjMEM2NkFFIiBkPSJNMzQ5LjE2LDE0OS4yOWMwLjI4LDExLjAzLDkuMjEsMTguMTUsMjIuMTksMTguMTVjNy45NiwwLDE0Ljk0LTIuMDksMjAuOTQtNS44NmwwLjI4LDE1LjM1Yy02LjE0LDIuOTMtMTQuMzgsNC43NS0yMy40NSw0Ljc1Yy0yMy41OSwwLTM5LjA4LTEzLjgyLTM5LjA4LTM3Ljk3YzAtMjEuNjQsMTQuMzgtMzcuMjcsMzYuMDEtMzcuMjdjMjAuOCwwLDMxLjU1LDEyLjQyLDMxLjU1LDM4LjM5YzAsMS4xMi0wLjE0LDMuNDktMC4yOCw0LjQ3SDM0OS4xNnogTTM4MC40MiwxMzYuNDVjMC0xMS43My01Ljg2LTE2Ljc1LTE1LjA4LTE2Ljc1Yy04LjI0LDAtMTUuNDksNS41OC0xNi40NywxNi43NUgzODAuNDJ6Ii8+PHBhdGggZmlsbD0iIzBDNjZBRSIgZD0iTTQwMS43OCwxMjEuOTN2LTEzLjgyaDE0LjFWOTMuMDRsMTcuNTktNnYyMS4wOGgxNy4xN3YxMy44MmgtMTcuMTd2MjguMDZjMCwxMC44OSwyLjA5LDE1Ljc3LDExLjE3LDE1Ljc3YzIuMjMsMCw0Ljc1LTAuNDIsNi44NC0xLjEybDAuNDIsMTQuMzhjLTMuNDksMS4yNi04LjEsMS44Mi0xMi44NCwxLjgyYy0xNi40NywwLTIzLjQ1LTguMS0yMy40NS0yNy4wOHYtMzEuODNINDAxLjc4eiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik01MDguMDEsMTIzLjQ3Yy0zLjM1LTEuNC02LjctMi4yMy0xMS4zLTIuMjNjLTE0LjEsMC0yMS41LDEwLjE5LTIxLjUsMjIuNzVjMCwxMi45OCw2LjcsMjIuNjEsMjEuOTIsMjIuNjFjNC4zMywwLDguMS0wLjcsMTIuMTQtMi41MWwwLjk4LDE0LjY2Yy00Ljc1LDEuNTQtOS4wNywyLjIzLTE1LjIxLDIuMjNjLTIzLjg3LDAtMzkuMzYtMTQuMjQtMzkuMzYtMzYuNTdjMC0yMy4xNywxNy43My0zNy4xMywzOC44LTM3LjEzYzUuODYsMCwxMC40NywwLjU2LDE0Ljk0LDEuOTVMNTA4LjAxLDEyMy40N3oiLz48cGF0aCBmaWxsPSIjMEQ2NUFFIiBkPSJNNTIxLjEzLDc0LjQ3aDE4LjcxVjE4MGgtMTguNzFWNzQuNDd6Ii8+PHBhdGggZmlsbD0iIzBENjVBRSIgZD0iTTYwMi45MywxNjguMTNjLTQuNjEsNy40LTEyLDEzLjU0LTI0LjcxLDEzLjU0Yy0xNS4yMSwwLTI1LjI2LTExLjAzLTI1LjI2LTI3Ljkydi00NS42NWgxOC40MnYzNy4yN2MwLDEyLjU2LDIuNjUsMjAuOTQsMTMuNTQsMjAuOTRjMTAuNzUsMCwxNy4wMy05LjkxLDE3LjAzLTIyLjMzdi0zNS44N2gxOC41NnY1MC41M2MwLDcuNTQsMCwxNS4zNSwwLjcsMjEuMzZoLTE3LjQ1Yy0wLjI4LTIuOTMtMC41Ni03LjEyLTAuNTYtMTEuODdINjAyLjkzeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik02MzMuNSwxNjMuMTFjNi45OCwzLjM1LDEzLjk2LDQuODgsMjAuMjQsNC44OGM2LjI4LDAsMTEuNzItMi41MSwxMS43Mi03LjY4YzAtNS4wMy0yLjY1LTYuOTgtMTQuMS0xMS4wM2MtMTMuNjgtNC43NS0xOS4xMi0xMC4xOS0xOS4xMi0yMC44YzAtMTMuNjgsMTEuMzEtMjIuMDUsMjguNDctMjIuMDVjNy41NCwwLDE0LjEsMS4xMiwxOS41NCwzLjM1bC0xLjU0LDEzLjk2Yy02LjE0LTIuNzktMTEuNDUtNC4wNS0xNy4xNy00LjA1Yy02LjI4LDAtMTAuODksMi42NS0xMC44OSw3LjU0YzAsNC44OSwyLjkzLDYuNTYsMTMuMTIsOS45MWMxMi43LDQuMTksMjAuMzgsOS4zNSwyMC4zOCwyMS42NGMwLDE0LjgtMTIsMjIuODktMjkuNDUsMjIuODljLTcuODIsMC0xNS4wOC0xLjEyLTIyLjItMy43N0w2MzMuNSwxNjMuMTF6Ii8+PHBhdGggZmlsbD0iIzBENjVBRSIgZD0iTTY5NS40OCw5NC40M1Y3Ni41N2gxOC43djE3Ljg3SDY5NS40OHogTTY5NS40OCwxMDguMTFoMTguN1YxODBoLTE4LjdWMTA0LjExeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik03NTMuOTcsMTQ4LjAzYzEuNCw0LjQ3LDMuNzcsMTIuNTYsNC44OCwxNy40NWgwLjI4YzEuMjYtNC44OCwzLjYzLTEzLjI2LDUuMDMtMTcuNDVsMTIuNy0zOS45MmgxOC44NEw3NjkuNiwxODBoLTIyLjA1bC0yNi4zOC03MS44OWgyMC4yNEw3NTMuOTcsMTQ4LjAzeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik04MTUuOTUsMTQ5LjI5YzAuMjgsMTEuMDMsOS4yMSwxOC4xNSwyMi4yLDE4LjE1YzcuOTYsMCwxNC45NC0yLjA5LDIwLjk0LTUuODZsMC4yOCwxNS4zNWMtNi4xNCwyLjkzLTE0LjM4LDQuNzUtMjMuNDUsNC43NWMtMjMuNTksMC0zOS4wOC0xMy44Mi0zOS4wOC0zNy45N2MwLTIxLjY0LDE0LjM4LTM3LjI3LDM2LjAxLTM3LjI3YzIwLjgsMCwzMS41NSwxMi40MiwzMS41NSwzOC4zOWMwLDEuMTItMC4xNCwzLjQ5LTAuMjgsNC40N0g4MTUuOTV6IE04NDcuMjIsMTM2LjQ1YzAtMTEuNzMtNS44Ni0xNi43NS0xNS4wNy0xNi43NWMtOC4yNCwwLTE1LjQ5LDUuNTgtMTYuNDcsMTYuNzVIODQ3LjIyeiIvPjwvZz48ZyBpZD0iQmlsZG1hcmtlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wNzA3NjgsMTUuMDUzMTYyKSI+PHBhdGggaWQ9IlZvbGx0b24iIGZpbGw9IiMwRDY1QUUiIGQ9Ik02NS4xLDU3LjE3aDExMy40NWM4LjM4LDAsMTUuMTYsNi43OSwxNS4xNiwxNS4xN3YxMTMuNDRjMCw4LjM4LTYuNzksMTUuMTctMTUuMTYsMTUuMTdINjUuMWMtOC4zNywwLTE1LjE3LTYuNzktMTUuMTctMTUuMTdWNzIuMzRDNDkuOTMsNjMuOTYsNTYuNzIsNTcuMTcsNjUuMSw1Ny4xN3oiLz48cGF0aCBpZD0ibmMiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMDQuNjcsOTNjLTIwLjg0LDAtMzIuNDYsMTMuODgtMzIuNDYsMzIuNjl2MzguOTVoMTguMzF2LTM1LjU4YzAtOC4yNSwyLjExLTE4LjQzLDEzLjkxLTE4LjQzYzksMCwxMy4zLDQuODQsMTQuMjYsMTQuMDNjMCwwLjA0LDAsMC4wNywwLDAuMTJjLTAuMTEsMS4zNS0wLjEyLDIuNzQtMC4xMiw0LjE3YzAuMTIsMTEuMzEsMy4zNCwyMC4xNyw5Ljc0LDI2LjU1YzYuNCw2LjM3LDE1LjMsOS41MSwyNi41NCw5LjYyYzIuNjEsMC4wNCw1LjA5LTAuMDgsNy41NC0wLjQ2YzIuNDQtMC4zOSw1LjUxLTEuMTUsOS4wNC0yLjJsLTEuMDQtMTUuM2MtMi41LDEuMTItNC42MiwxLjgtNi40OSwyLjJjLTEuODcsMC40MS0zLjg5LDAuNi02LjAzLDAuNThjLTYuMTUtMC4wOS0xMS4wOS0xLjk3LTE0LjcyLTUuNjhjLTMuNjMtMy43MS01Ljk0LTguNzctNi4wMy0xNS4wN3YtMy40OEMxMzcuMTIsMTA3LjA0LDEyNS41LDkzLDEwNC42Nyw5M0wxMDQuNjcsOTN6IE0xNTQuNjIsOTMuMzVjLTUuMjYtMC4xNC0xMC4zMSwwLjg2LTE0Ljk1LDIuNjdjLTIuMjYsMC44OC00LjQyLDIuMDEtNi4zOCwzLjI1YzQuMSw0LjQ3LDYuOTcsMTAuMTIsOC4zNSwxNi40NmMwLjQ2LTAuNjIsMC44NS0xLjI4LDEuMzktMS44NmMzLjU4LTMuNzcsOC40MS01Ljc3LDE0LjQ5LTUuNzljNC4zNiwwLDguNjYsMS4zOSwxMi44NywyLjQzbDEuMDQtMTQuMzdDMTY1LjkyLDk0LjUyLDE2MC4zMiw5My41MSwxNTQuNjIsOTMuMzV6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvZz48L3N2Zz4=);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.header-logo a:hover {
  text-decoration: none;
}


/* ==========================================================================
   3. MAIN NAVIGATION
   ========================================================================== */

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  margin-left: var(--space-8);
}

.main-nav a {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base), background-color var(--transition-base);
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom-color: var(--color-primary);
}

.main-nav a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* User actions (KNR + Logout) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.header-actions .user-knr {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-secondary);
}

/* Inline form for POST actions that look like links */
.inline-form,
.logout-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Button styled as nav link (for POST forms inside navigation) */
.nav-link-btn {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.nav-link-btn:hover {
  text-decoration: underline;
}

/* Dropdown in nav */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  cursor: pointer;
}

.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: var(--space-2) 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  height: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  border-bottom: none;
}

.nav-dropdown-menu a:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
  border-bottom-color: transparent;
}

/* Mobile hamburger button */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger-icon::before { top: -7px; }
.hamburger-icon::after  { top: 7px; }

/* Open state */
.hamburger-btn.active .hamburger-icon {
  background: transparent;
}

.hamburger-btn.active .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger-btn.active .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: var(--z-fixed);
  overflow-y: auto;
  padding: var(--space-4);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-base);
}

.mobile-nav a:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

.mobile-nav .nav-section-title {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ==========================================================================
   4. SITE FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-gray-200);
  border-top: 1px solid var(--color-gray-300);
  padding: var(--space-4) 0;
}

.site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  flex-wrap: wrap;
}

.site-footer .footer-copyright {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-secondary);
}

/* Hidden advance mode toggle for admins */
.site-footer .footer-copyright-link {
  color: inherit;
  text-decoration: none;
}

.site-footer .footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-footer .footer-links a {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer .footer-links a:hover {
  color: var(--color-primary);
  text-decoration: none;
}


/* ==========================================================================
   5. PAGE LAYOUT
   ========================================================================== */

.page-main {
  min-height: calc(100vh - var(--header-height) - 80px);
  padding: var(--space-6) 0 var(--space-8);
}


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.card-header {
  padding: var(--space-3) var(--space-5);
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-body {
  padding: var(--space-5);
}

.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-gray-200);
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-none);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(11, 101, 174, 0.2);
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(11, 101, 174, 0.3);
  color: var(--color-white);
}

.btn-outline {
  background: var(--color-white);
  border: 2px solid var(--color-gray-350);
  color: var(--color-secondary-dark);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-gray-50);
}

.btn-sm {
  min-height: 30px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  font-size: var(--font-size-base);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ==========================================================================
   8. ALERTS
   ========================================================================== */

.alert {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.alert-danger {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-left: 4px solid var(--color-error);
  color: #7f1d1d;
}

.alert-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-left: 4px solid var(--color-success-alt);
  color: #155724;
}

.alert-warning {
  background: var(--color-warning-bg);
  border: 1px solid #ffd599;
  border-left: 4px solid var(--color-warning);
  color: #664d03;
}

.alert ul {
  margin: var(--space-2) 0 0 0;
  padding-left: var(--space-5);
}

.alert li {
  margin-bottom: var(--space-1);
}


/* ==========================================================================
   9. BADGES
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-success {
  background: var(--color-success-bg-alt);
  color: #155724;
  border: 1px solid var(--color-success-border);
}

.badge-danger {
  background: var(--color-error-bg);
  color: #7f1d1d;
  border: 1px solid var(--color-error-border);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: #856404;
  border: 1px solid var(--color-warning-alt);
}

.badge-info {
  background: var(--color-info-bg);
  color: #0c5460;
  border: 1px solid var(--color-info-border);
}


/* ==========================================================================
   10. RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }

  .header-inner {
    padding: 0 var(--space-4);
  }

  .main-nav {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .header-actions .user-knr {
    font-size: var(--font-size-xs);
  }

  .site-footer .footer-inner {
    flex-direction: column;
    gap: var(--space-2);
  }

  .card-body {
    padding: var(--space-4);
  }

  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
}

/* Small mobile */
@media (max-width: 480px) {
  .header-logo a {
    width: 140px;
    height: 42px;
  }

  .page-main .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .header-actions .btn {
    width: auto;
    display: inline-flex;
  }
}