*, *::before, *::after {
    box-sizing: border-box;
}
/* Layout */
html { min-height: 100%; height: 100%; }
body {
    font-family: 'American Typewriter', 'Times New Roman', Times, serif; 
    font-size:14px; 
    margin:0; 
    padding:0; 
    background:#f5f7fb; 
    color:#1f2937; 
    min-height:100vh; 
    display:flex; 
    flex-direction:column;
    position: relative;
    /* Removed width: 100vw to fix right-side rendering issue */
}
/* Standardized headings across the system */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure the body reveals the same color as the header when overscrolling on Safari mobile */
@media screen and (max-width: 768px) {
    /* body { background-color: var(--header-bg, #0f766e); } */
    main, .container, #apps-grid, .apps-grid { background-color: #f5f7fb; }
}
/* When Khmer is active, switch to Khmer OS Siemreap as default font */
html[lang="km"] body{font-family: 'Khmer OS Siemreap', 'Khmer OS', 'Noto Sans Khmer', Arial, sans-serif;}

/* Header Base Styles */
header{
    background: var(--header-bg, linear-gradient(135deg, #0f766e, #14b8a6));
    color:#fff;
    padding:0 24px;
    display:flex; justify-content:space-between; align-items:center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1001;
}
a{color:#0f766e; text-decoration:none}

/* Header Nav Links */
header nav a{
    color:#ffffff !important;
    text-decoration:none;
    font-weight:600;
}
header nav a:hover{opacity:0.9}

.container{width:100%; max-width:100%; margin:56px 0; padding:0 16px; flex:1; position:relative;}
.btn{display:inline-block; background:#0f766e; color:#fff; padding:10px 14px; border-radius:6px; cursor: pointer;}
button, input[type="submit"], input[type="button"], input[type="reset"] { cursor: pointer; }
.btn.secondary{background:#334155}

/* បិទរូបតំណាង Key និង Eye របស់ Browser */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
}

/* រៀបចំទីតាំងរូបតំណាងភ្នែករបស់អ្នក */
.toggle-password {
  position: absolute;
  right: 12px; /* រុញមកឆ្វេងបន្តិចដើម្បីកុំឱ្យជាន់គ្នា */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  z-index: 10;
}

/* បន្ថែមចន្លោះខាងស្តាំក្នុងប្រអប់បញ្ចូល ដើម្បីកុំឱ្យអក្សរជាន់រូបភ្នែក */
input[type="password"] {
  padding-right: 45px !important;
}
.card{background:white; border:1px solid #e5e7eb; border-radius:8px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: white; }
.badge-mission-open { background-color: #ef4444 !important; }
.badge-mission-completed { background-color: #10b981 !important; }
.badge-mission-rejected { background-color: #ef4444 !important; }
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
}
.messages{margin:12px 0}
.messages .msg{padding:10px 12px; border-radius:6px; margin-bottom:8px}
.msg.error{background:#fee2e2; color:#991b1b}
.msg.success{background:#dcfce7; color:#166534}
footer{margin-top:auto; text-align:center; color:#64748b; padding:16px 0}

/* Status Badges */
.bg-success { background-color: #10b981 !important; }
.bg-danger { background-color: #ef4444 !important; }
.bg-warning { background-color: #f59e0b !important; }
.bg-secondary { background-color: #64748b !important; }
.text-dark { color: #1f2937 !important; }

/* Form Controls */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="url"], input[type="search"], input[type="color"], input[type="file"], select, textarea, .form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    display: block;
}
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="url"], input[type="search"], input[type="color"], input[type="file"], select, .form-control {
    min-height: 42px;
    height: auto;
}
input[type="color"] {
    padding: 2px;
}
input[type="file"] {
    background: #fff;
}
textarea {
    height: auto;
}
/* Standardized apps/menu grid across the system */
.apps-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 0 25px !important;
    max-width: 100% !important;
    margin-top: 24px !important;
}

.app-item{
    display:flex; flex-direction:column; align-items:center;
    text-decoration: none; color: inherit;
    cursor: pointer;
    width: 73px !important;
}
.app-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width: 73px !important;
    height: 73px !important;
    border-radius:16px; background:white; border:1px solid #e5e7eb;
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.05); text-align:center;
    transition: all 0.2s ease;
    position: relative;
}
.app-item:hover .app-card, .app-item.active .app-card{transform: translateY(-5px); box-shadow: 0 12px 20px -5px rgba(0,0,0,0.15); border-color: #0ea5e9;}
.app-item h3{margin:8px 0 0 0; font-size:0.7rem !important; font-weight:600; color:#334155; line-height:1.2; text-align:center; min-height: 3.6em; height: auto; display: flex; align-items: center; justify-content: center; width: 100% !important; margin-left: 0 !important; word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; max-height: none;}
.app-card p{
    display: none;
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 10px;
    width: 160px;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    pointer-events: none;
    line-height: 1.4;
}
.app-item:hover p{display:block}
.app-icon{
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(241, 245, 249, 0.5);
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.app-item:hover .app-icon, .app-item.active .app-icon{
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}
.app-icon svg {
    width: 39px !important;
    height: 39px !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
}
.app-item:hover .app-icon svg, .app-item.active .app-icon svg {
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));
    transform: translateY(-2px);
}
/* Responsive fallbacks */
@media (max-width: 1280px){ .apps-grid{ gap: 20px !important; } }
@media (max-width: 768px){ 
    .apps-grid{ gap: 15px !important; padding: 20px 16px 0 16px !important; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; } 
    .app-item { padding: 10px !important; }
    .app-icon { width: 60px !important; height: 60px !important; }
    .app-icon svg { width: 30px !important; height: 30px !important; }
    .sidebar { display: none; } /* Hide sidebar on small screens by default or use a toggle */
    header { padding: 0 12px !important; }
    .container { margin: 24px 0 !important; padding: 0 12px !important; }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    .btn, button, .subheader-icon-btn, .header-icon-btn {
        min-height: 44px; /* Apple's recommended minimum touch target */
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    input, select, textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iOS focus */
    }
}

/* Handle safe areas more robustly */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Interface themes: keep Times New Roman universally by inheriting from body */
body.theme-apple{font-family: inherit}
body.theme-windows{font-family: inherit}
body.theme-linux{font-family: inherit}
body.theme-windows .card{border-radius:4px; box-shadow:none}
body.theme-linux .card{border-radius:6px}
body.theme-apple .card{border-radius:10px}

/* Color schemes */
body.scheme-dark{background:#0b1220; color:#e5e7eb}
body.scheme-dark header{background:#0b4a6f}
body.scheme-dark .card{background:#0f172a; border-color:#1f2937; box-shadow:none}
body.scheme-dark a{color:#22d3ee}
body.scheme-dark .btn{background:#0ea5e9}
body.scheme-dark .btn.secondary{background:#334155}

/* Menu layouts */
.layout-wrap{display:flex; min-height:0; flex:1; max-width: 100%;}
.flex-1{flex:1 1 0%; min-width:0;}
.sidebar{width:220px; flex-shrink: 0; background:#f1f5f9; border-right:1px solid #e5e7eb; padding:12px}
body.scheme-dark .sidebar{background:#0b1220; border-color:#1f2937}
.topbar-spacer{padding:8px; background:#f8fafc; border-bottom:1px solid #e5e7eb}
body.scheme-dark .topbar-spacer{background:#0f172a; border-color:#1f2937}
/* Positioning base for the Login link; offsets are set inline from config */
.Login{position:absolute;}
.dashboard-link, .logout-link { color: #ffffff !important; }
.content-shift {
    position: relative;
    top: 0;
}

/* Header Icon Styles */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    position: relative;
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.header-icon-btn svg {
    width: 17px;
    height: 17px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}
.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    border: 2px solid #0f766e;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Global Tabs Styling */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 8px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a, .tabs button.tab-btn {
    padding: 10px 12px;
    text-decoration: none;
    color: #334155;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border-radius: 0;
}

.tabs a.active, .tabs button.tab-btn.active {
    background: #0f766e !important;
    font-weight: 600;
    border-bottom: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tabs a:hover:not(.active), .tabs button.tab-btn:hover:not(.active) {
    background: #f1f5f9;
    color: #0f766e;
}


/* Tacteing Font Class */
.tacteing {
    font-family: 'Tacteing', sans-serif !important;
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    .print-area, .print-area * {
        visibility: visible;
    }
    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .no-print {
        display: none !important;
    }
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    header, footer {
        display: none !important;
    }
    .container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
}