@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '../fonts/';

/* Culture-specific font variables */
:root {
    --font-family-primary:  "roboto slab", sans-serif;
    --font-family-secondary: "roboto slab", sans-serif;
    --font-family-heading: "roboto slab" sans-serif;
}

/* Amharic culture fonts */
[data-culture="am-ET"] {
    --font-family-primary: "ethiopic-sadis-regular", "ethiopic-sadis-light", "abyssinia-sil", sans-serif;
    --font-family-secondary: "abyssinia-sil", sans-serif;
    --font-family-heading: "shiromeda-semi-bold", "ethiopic-sadis-regular", sans-serif;
}

/* English culture fonts */
[data-culture="en-US"] {
    --font-family-primary:  "roboto slab", sans-serif;
    --font-family-secondary: "roboto slab", sans-serif;
    --font-family-heading: "roboto slab", sans-serif;
}

body {
    --body-font: "roboto slab";
    --neutral-fill-layer-rest:#FBF4E3;
    --focus-stroke-outer: #c1c1c1;
    --focus-stroke-width:1;

    /* Apply culture-specific font family */
    font-family: var(--font-family-primary);
    font-size: var(--type-ramp-base-font-size);
    font-style: normal;
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: 100dvh;
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    height: auto;
    display: flex;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.body-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.content {
    padding: 2rem 2rem 0 2rem;
    align-self: stretch !important;
    width: 100%;
}
@media (max-width: 576px) {
    .content {
        padding: 0.5rem 0.5rem 0 0.5rem;
    }
}

footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

footer a {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
}

footer a:focus {
    outline: 1px dashed;
    outline-offset: 3px;
}

footer a:hover {
    text-decoration: underline;
}

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 20px 0;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::before {
    content: "An error has occurred. "
}

.loader-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: var(--neutral-fill-layer-rest);
    transform: translateZ(0);
}
.lds-default,
.lds-default div {
  box-sizing: border-box;
}
.lds-default {
  display: flex;
  position: relative;
  margin: auto;
  width: 150px;
  height: 150px;
  transform: translateZ(0);
}
.lds-default div {
  position: absolute;
  width: 6.4px;
  height: 6.4px;
  background: currentColor;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 36.8px;
  left: 66.24px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22.08px;
  left: 62.29579px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11.30421px;
  left: 51.52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7.36px;
  left: 36.8px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11.30421px;
  left: 22.08px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22.08px;
  left: 11.30421px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 36.8px;
  left: 7.36px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 51.52px;
  left: 11.30421px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62.29579px;
  left: 22.08px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66.24px;
  left: 36.8px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62.29579px;
  left: 51.52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 51.52px;
  left: 62.29579px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* Responsive loader adjustments */
@media (max-width: 768px) {
  .lds-default {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .lds-default {
    width: 100px;
    height: 100px;
  }
}



code {
    color: #c02d76;
}
@font-face {
    font-family: "montserrat";
    src: url("../fonts/montserrat/Montserrat-VariableFont_wght.ttf");
}

@font-face {
    font-family: "knowledge";
    src: url("../fonts/knowledge/Amiko-Regular.ttf");
}

@font-face {
    font-family: "abyssinia-sil";
    src: url("../fonts/abyssinia_sil/AbyssinicaSIL-Regular.ttf");
}

@font-face {
    font-family: "manrope";
    src: url("../fonts/manrope/Manrope-VariableFont_wght.ttf");
}

@font-face {
    font-family: "roboto slab";
    src: url("../fonts/roboto-slab/RobotoSlab-VariableFont_wght.ttf");
}

@font-face {
    font-family: "ethiopic-sadis-light";
    src: url("../fonts/epa-amharic/EthiopicSadiss-Light.ttf");
}

@font-face {
    font-family: "ethiopic-sadis-regular";
    src: url("../fonts/epa-amharic/EthiopicSadiss-Regular.ttf");
}

@font-face {
    font-family: "shiromeda-semi-bold";
    src: url("../fonts/epa-amharic/Shiromeda-SemiBold.ttf");
}

@font-face {
    font-family: "ethiopic-lessan-regular";
    src: url("../fonts/epa-amharic/EthiopicLessan-Regular.ttf");
}

@font-face {
    font-family: "jiret-regular";
    src: url("../fonts/epa-amharic/jiret.ttf");
}

@font-face {
    font-family: "nyala-regular";
    src: url("../fonts/epa-amharic/nyala.ttf");
}
@media (max-width: 576px){
    .content{
        padding: 0.5rem 0.5rem 0 0.5rem;
    }
}
@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

    #main-menu > div:first-child:is(.expander) {
        display: none;
    }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

    #navmenu-toggle ~ nav {
        display: none;
    }

    #navmenu-toggle:checked ~ nav {
        display: block;
    }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

/* Utility classes for culture-specific fonts */
.font-primary {
    font-family: var(--font-family-primary);
}

.font-secondary {
    font-family: var(--font-family-secondary);
}

.font-heading {
    font-family: var(--font-family-heading);
}

/* Override specific components that might have hardcoded fonts */
.fluent-text-edition-volume,
.fluent-text-edition-volume * {
    font-family: var(--font-family-primary) !important;
}

/* Ensure all text elements use the culture-specific font */
p, h1, h2, h3, h4, h5, h6, span, div, button, input, textarea, label {
    font-family: var(--font-family-primary);
}

/* Override FluentUI components to use culture-specific fonts */
[data-culture="am-ET"] fluent-button,
[data-culture="am-ET"] fluent-button *,
[data-culture="am-ET"] fluent-button .control,
[data-culture="am-ET"] fluent-button .control *,
[data-culture="am-ET"] .filter-button,
[data-culture="am-ET"] .filter-button * {
    font-family: var(--font-family-primary) !important;
}

[data-culture="en-US"] fluent-button,
[data-culture="en-US"] fluent-button *,
[data-culture="en-US"] fluent-button .control,
[data-culture="en-US"] fluent-button .control *,
[data-culture="en-US"] .filter-button,
[data-culture="en-US"] .filter-button * {
    font-family: var(--font-family-primary) !important;
}

/* Exception classes that override culture-specific fonts */
.font-exception-english {
    font-family: "roboto slab",  sans-serif !important;
}

.font-exception-english * {
    font-family: "roboto slab", sans-serif !important;
}

.font-exception-amharic {
    font-family: "ethiopic-sadis-regular", "abyssinia-sil", sans-serif !important;
}

.font-exception-amharic * {
    font-family: "ethiopic-sadis-regular", "abyssinia-sil", sans-serif !important;
}

.font-exception-mono {
    font-family: "Courier New", monospace !important;
}

.font-exception-serif {
    font-family: "Times New Roman", serif !important;
}

/* Exception classes for FluentUI components */
.font-exception-english fluent-button,
.font-exception-english fluent-button *,
.font-exception-english fluent-button .control,
.font-exception-english fluent-button .control * {
    font-family:"roboto slab", sans-serif !important;
}

.font-exception-amharic fluent-button,
.font-exception-amharic fluent-button *,
.font-exception-amharic fluent-button .control,
.font-exception-amharic fluent-button .control * {
    font-family: "ethiopic-sadis-regular", "abyssinia-sil", sans-serif !important;
}

/* Global style for orchard tables*/
.o-table {
    --tbw-cell-vertical-padding: 10px;
    --tbw-cell-horizontal-padding: 16px;
    --tbw-cell-line-height: 1.6em;
    margin-bottom: var(--tbw-cell-line-height);
    border-collapse: collapse;
    width: 100%;
}

.o-table th,
.o-table td {
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    min-width: 120px;
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
    border: 1px solid #171616;
    vertical-align: top;
    box-sizing: border-box;
}

fluent-dialog{
    --fill-color: var(--neutral-fill-layer-rest)!important;
}
fluent-text-field{
    --neutral-stroke-input-rest: #FFFFF0;
    --neutral-stroke-layer-rest: #efefef;
}

fluent-text-field[appearance="outline"] {
    --neutral-stroke-input-rest: #FFFFF0;
    --neutral-stroke-layer-rest: #efefef;
    --neutral-fill-input-rest: #FFFFF0 !important;
}
fluent-text * {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
}
.v.section-text.font-exception-english * {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
    font-size: 1.1rem !important;
}
.b.section-text * {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
    font-size: 1.1rem !important;
}
.p.picture-description.font-exception-english * {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
    font-size: 1rem !important;
}
.v.video-description.font-exception-english * {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
    font-size: 1rem !important;
}
.p.video-description.font-exception-english {
    line-height:1.8 !important;
    letter-spacing:0.25px !important; 
    font-size: 1rem !important;
}
/* Splash screen overlay */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

/* Main Logo (slide from left) */
#splashScreen img.logo-main {
    width: 8rem;
    height: 8rem;
    opacity: 0;
    transform: translateX(-100vw);
    animation: slideInLeft 1s ease-out forwards;
    animation-delay: 0s; /* first */
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* English Text Logo */
#splashScreen img.logo-text {
    width: 15rem;
    max-width: 100%;
    margin-top: 1rem;
    opacity: 0;
    transform: translateX(100vw);
    animation: slideInRight 1s ease-out forwards;
    animation-delay: 1s; /* second */
}

/* Amharic Text Logo */
#splashScreen img.logo-text-amh {
    width: 10rem;
    max-width: 100%;
    margin-top: 1rem;
    opacity: 0;
    transform: translateX(100vw);
    animation: slideInRight 1s ease-out forwards;
    animation-delay: 1.3s; /* third */
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Wrapper handles slide-up */
.spinner-container {
    opacity: 0;
    transform: translateY(100px);
    animation: slideUp 0.8s ease-out forwards;
    animation-delay: 1.8s; /* last */
}

/* Spinner only rotates */
.spinner {
    border: 6px solid rgb(228, 226, 222);
    border-top: 6px solid #FF7518;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-top: 2rem;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fluent-data-grid,
.fluent-data-grid *:not(.status-pill) {
    background-color: transparent !important;
    border: none !important;
}

.fluent-data-grid {
    background-color: #ffffff; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    border-radius: 8px;
    overflow: hidden; 
    margin: 16px;    
}

.fluent-data-grid .fluent-data-grid-row {
    background-color: transparent !important;
}

.fluent-data-grid thead,
.fluent-data-grid .column-header {
    background-color: rgba(0, 0, 0, 0.02) !important;
    font-weight: 600;
}

.fluent-data-grid td span:not(.status-pill) {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.status-pill {
    padding: 6px 16px;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
}

.status-pill-active {
    background-color: rgba(36, 203, 10, 0.1); color: rgba(36, 203, 10, 1); padding: 6px 16px; border-radius: 9999px; font-weight: 500; font-size: 14px;
}

.status-pill-inactive {
    background-color: #ffd7bd8a; color:  #FF7518; padding: 6px 16px; border-radius: 9999px; font-weight: 500; font-size: 14px;
    font-weight: 600;
}