:root {
    --sidebar-width: 260px;
    --color-primary: #1c1f2e;
    --color-secondary: #0ba6f9;
    --transition-default: all 0.3s ease;
}

body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Logo & Images */
.ctp-logo { width: 40px; }
.ctp-logo-footer { width: 220px; }
.wnk-logo { width: 42px; }
.card-logo { width: 26px; margin-top: -8px; }
.card-prayer { width: 18px; }

/* Watermark */
.watermark {
    position: fixed;
    bottom: 15px;
    left: 20px;
    font-size: 14px;
    color: #eee;
    z-index: 1000;
}

/* Card Backgrounds */
.modal-bg-total::before,
.card-total::before,
.card-total-gold::before,
.card-total-silver::before,
.card-total-bronze::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background-size: cover;
    background-position: left bottom;
    opacity: 0.8;
    transform-origin: bottom left;
}

.modal-bg-total::before {
    top: -50px;
    width: 40%;
    height: 160%;
    background-image: url('/img/coin-gold.png');
    opacity: 1;
}

.card-total::before {
    width: 35%;
    height: 200%;
    background-image: url('/img/logo-watnongkham.png');
    opacity: 0.3;
}

[class*="card-total-"]::before {
    width: 25%;
    height: 180%;
}

.card-total-gold::before { background-image: url('/img/coin-gold.png'); }
.card-total-silver::before { background-image: url('/img/coin-silver.png'); }
.card-total-bronze::before { background-image: url('/img/coin-bronze.png'); }

/* Value Displays */
.total-header { font-size: 32px; }

#total-value {
    font-size: 58px;
    font-weight: bold;
}

#gold-value,
#silver-value,
#bronze-value {
    font-size: 32px;
    font-weight: bold;
}

#total-value > span { font-size: 32px; }
[id$="value"] > span {
    font-size: 18px;
    font-weight: lighter;
}

/* Search Component */
.search-wrapper {
    position: relative;
    width: 500px;
}

.search-input { padding-right: 35px; }

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    cursor: pointer;
}

.search-icon:hover { color: #000; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--color-primary);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar { display: none; }

.main-content {
    margin-left: var(--sidebar-width);
    padding: 20px;
    min-height: 100vh;
}

.sidebar-brand {
    padding: 20px;
}

.sidebar-brand > h5 > div { font-size: 12px; }

.sidebar-nav .nav-link {
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-default);
}

.sidebar-nav .nav-link:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
}

.sidebar-nav .nav-link.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-weight: bold;
}

.sidebar-nav .nav-link i {
    width: 20px;
    text-align: center;
}

/* Content Cards */
.header-search,
.stat-card,
.employees-container {
    background: white;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    animation: fadeIn 0.5s ease-out;
}

.stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: var(--transition-default);
}

.stat-card:hover { transform: translateY(-5px); }

/* Loading Screen */
.loading-screen {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content {
    text-align: center;
}

.loading-content img {
    animation: pulse-and-float 2s ease-in-out infinite;
}

.ctp-loading-text {
    position: absolute;
    margin-top: -55px;
    margin-left: -55px;
    z-index: -1;
    color: #EE5414;
    font-size: 254px;
}

/* Animations */
@keyframes pulse-and-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-20px) scale(1.05); opacity: 0.8; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: var(--transition-default);
    }
    
    .sidebar.show { transform: translateX(0); }
    
    .main-content { margin-left: 0; }
    
    .stat-card,
    .header-search { margin-bottom: 15px; }
}

@media (max-width: 576px) {
    .search-wrapper { width: 120px; }
}

.loader {
    position: absolute;
    color: #EE5414;
    font-size: 254px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }

  @-webkit-keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%, 95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%, 59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%, 95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%, 59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @-webkit-keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }