/* site.css - Merged and cleaned styles */

/* Variables */
:root {
    /* Base Colors (from shadcn/ui light theme & site.css) */
    --background: hsl(140 30% 98%); /* Light mode background */
    --foreground: hsl(140 30% 10%); /* Light mode text */
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(140 30% 10%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(140 30% 10%);
    --primary: hsl(142 40% 36%); /* Main green */
    --primary-foreground: hsl(144 40% 98%); /* Text on primary */
    --accent: hsl(36 75% 90%); /* Slightly darker orange/yellow */
    --accent-foreground: hsl(33 74% 20%);
    --destructive: hsl(0 84.2% 60.2%); /* Red */
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(140 20% 85%); /* Gray border */
    --input: hsl(140 20% 85%); /* Input border */
    --ring: hsl(142 40% 36%); /* Focus ring color (primary green) */
    /* Sidebar specific colors (from site.css) */
    --sidebar-background: hsl(142 40% 30%); /* Dark green */
    --sidebar-foreground: hsl(144 40% 98%); /* Light text */
    --sidebar-primary: hsl(144 40% 98%); /* Active item text? */
    --sidebar-primary-foreground: hsl(142 40% 26%); /* Active item background? */
    --sidebar-accent: hsl(142 35% 25%); /* Hover/Focus background */
    --sidebar-accent-foreground: hsl(144 40% 98%); /* Hover/Focus text */
    --sidebar-border: hsl(142 30% 25%); /* Border inside sidebar */
    --sidebar-ring: hsl(144 40% 80%);
    /* Border Radius (from custom-theme.css, consistent with site.css) */
    --radius: 0.5rem;
    --radius-md: calc(var(--radius) - 2px); /* Added from custom-theme */
    --radius-sm: calc(var(--radius) - 4px); /* Added from custom-theme */
    /* Bootstrap variable overrides (merged from custom-theme.css) */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 61, 137, 98; /* Calculated from hsl(142 40% 36%) */
    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius); /* shadcn/ui doesn't seem to have a larger radius by default */
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: hsl(142, 40%, 26%); /* Darker primary */
    --bs-code-color: var(--secondary-foreground);
    --bs-card-border-color: var(--border);
    --bs-card-bg: var(--card);
    --bs-card-color: var(--card-foreground);
    --bs-emphasis-color: var(--foreground);
    --bs-secondary-color: var(--muted-foreground); /* Using muted-foreground for secondary text */
    --bs-tertiary-color: var(--muted-foreground);
    --bs-tertiary-bg: var(--muted);
    --bs-primary-text-emphasis: var(--primary);
    --bs-primary-bg-subtle: hsl(142, 40%, 90%); /* Lighter primary */

}

/* TODO: Add .dark class definitions if dark mode is needed */


/* Base/Reset Styles */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /* Use the ring color variable for focus */
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ring);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Apply base background and foreground colors */
    background-color: var(--bs-body-bg); /* Use BS variable */
    color: var(--bs-body-color); /* Use BS variable */
    /* Consider adding font-family if React project uses a specific one */
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    /* Keep margin-bottom or adjust based on footer height */
    margin-bottom: 60px; /* Adjust if footer height changes */
}

.custom-title {
    font-size: 1.10rem;
    line-height: 1.2;
}


/* Layout Styles */

/* Sidebar Styles */
.hag-sidebar {
    background-color: var(--sidebar-background);
    color: var(--sidebar-foreground);
    position: sticky;
    top: 0;
    height: 100vh;
    width: 280px; /* Sidebar width */
    flex: 0 0 280px; /* Reserve width in flex layout */
}

    .hag-sidebar .nav-link {
        /* Default link color with 80% opacity */
        color: hsla(144, 40%, 98%, 0.8); /* Assuming --sidebar-foreground is hsl(144 40% 98%) */
        border-radius: var(--radius-sm); /* Use radius variable */
        margin-bottom: 0.25rem; /* Add some spacing */
        padding: 0.75rem 1rem; /* Consistent padding */
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }

        .hag-sidebar .nav-link:hover,
        .hag-sidebar .nav-link:focus {
            /* Hover background with 50% opacity */
            background-color: hsla(142, 35%, 25%, 0.5); /* Assuming --sidebar-accent is hsl(142 35% 25%) */
            /* Hover text full opacity */
            color: var(--sidebar-foreground);
        }

        /* Style for the active sidebar link - Match React's active style */
        .hag-sidebar .nav-link.active {
            background-color: var(--sidebar-accent); /* Use accent background like React */
            color: var(--sidebar-accent-foreground); /* Use accent foreground like React */
            font-weight: 500; /* Keep slightly bolder */
        }

        /* Adjust icon size and color */
        .hag-sidebar .nav-link i {
            /* color: inherit; */ /* Icons usually inherit color */
            opacity: 0.8; /* Match React's text opacity */
            width: 1.25rem; /* Match React's w-5 */
            height: 1.25rem; /* Match React's h-5 */
            /* Ensure icon aligns well with text */
            vertical-align: middle; /* Adjust if needed */
            margin-right: 0.25rem; /* Add slight spacing if gap-2 isn't enough */
        }

        .hag-sidebar .nav-link.active i {
            opacity: 1; /* Full opacity for active icon */
        }


    /* Adjust sidebar header/footer borders and text */
    .hag-sidebar .border-bottom,
    .hag-sidebar .border-top {
        border-color: var(--sidebar-border) !important; /* Override Bootstrap border */
    }

    .hag-sidebar .text-muted {
        color: hsla(144, 40%, 98%, 0.7) !important; /* Muted text in sidebar (Assuming --sidebar-foreground is hsl(144 40% 98%)) */
    }

/* Utility classes for sidebar footer */
.bg-sidebar-accent {
    background-color: var(--sidebar-accent);
}

.text-sidebar-foreground {
    color: var(--sidebar-foreground);
}

/* Main Content Styles */
/* Main content no longer needs fixed offset; flex layout handles it */
body:not(.layout-simple) main {
}

/* Accessible skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    .skip-link:focus {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        padding: .5rem 1rem;
        background: #000;
        color: #fff;
        z-index: 1050;
    }


/* Component Styles */

/* Buttons */
.btn {
    border-radius: var(--radius-sm); /* Use radius variable */
    /* Add transition for smoother hover effects */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: hsl(142, 40%, 30%); /* Darker primary from custom-theme */
        border-color: hsl(142, 40%, 28%); /* Darker primary border from custom-theme */
        color: var(--primary-foreground);
    }

/* secondary, success, info, warning, danger 按鈕使用 Bootstrap 預設樣式 */

/* Ghost button style for sidebar logout (from site.css) */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: hsla(144, 40%, 98%, 0.8); /* Assuming --sidebar-foreground is hsl(144 40% 98%) */
    padding: 0.375rem 0.75rem; /* Default Bootstrap btn padding */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

    .btn-ghost:hover, .btn-ghost:focus {
        background-color: hsla(142, 35%, 25%, 0.5); /* Assuming --sidebar-accent is hsl(142 35% 25%) */
        color: var(--sidebar-foreground);
        border-color: transparent; /* Ensure border remains transparent */
        box-shadow: none; /* Remove default focus shadow if needed */
    }

/* Tab Styles */
.nav-tabs {
    display: inline-flex; /* Allow width to adjust to content */
    padding: 0.25rem;
    background-color: var(--muted);
    border-radius: var(--radius);
    border-bottom: 0; /* Remove Bootstrap default border */
}

    .nav-tabs .nav-item {
        margin-bottom: 0; /* Remove Bootstrap default margin */
    }

    .nav-tabs .nav-link {
        border: 0; /* Remove Bootstrap default border */
        border-radius: var(--radius-sm); /* Use radius variable */
        color: var(--muted-foreground);
        background-color: transparent;
        padding: 0.5rem 1rem; /* Adjust padding */
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin: 0 0.125rem; /* Add small margin between tabs */
    }

        .nav-tabs .nav-link:hover {
            color: var(--foreground); /* Slightly darker text on hover */
            background-color: transparent; /* Keep background transparent on hover */
            border-color: transparent; /* Ensure no border appears on hover */
        }

        .nav-tabs .nav-link.active {
            color: var(--foreground);
            background-color: var(--card); /* Use card/background color for active tab */
            border-color: transparent; /* Ensure no border */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); /* Add shadow */
            font-weight: 500; /* Slightly bolder */
        }

        /* Remove focus outline/shadow for non-active tabs */
        .nav-tabs .nav-link:focus {
            box-shadow: none;
            outline: none;
        }
        /* Keep focus style only for the active tab */
        .nav-tabs .nav-link.active:focus {
            /* Reapply a focus style similar to other elements */
            /* Assuming --ring is hsl(142 40% 36%) */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.25rem hsla(142, 40%, 36%, 0.25);
        }


.tab-content {
    margin-top: 1rem; /* Add space below the tabs */
}

/* Cards */
.card {
    background-color: var(--bs-card-bg); /* Use BS variable */
    color: var(--bs-card-color); /* Use BS variable */
    border: 1px solid var(--bs-card-border-color); /* Use BS variable */
    border-radius: var(--radius); /* Use radius variable */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Subtle shadow like shadcn */
}

.card-header {
    background-color: transparent; /* Often headers are transparent or slightly different */
    border-bottom: 1px solid var(--border);
    color: var(--card-foreground);
}

.card-footer {
    background-color: hsl(var(--background) / 0.5); /* Slightly different background */
    border-top: 1px solid var(--border);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--background); /* Match body background */
    color: var(--foreground);
    border: 1px solid var(--input); /* Use input border color */
    border-radius: var(--radius-sm); /* Use radius variable */
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--ring); /* Use ring color for focus border */
        /* box-shadow is already handled globally */
        background-color: var(--background); /* Ensure background doesn't change on focus */
        color: var(--foreground);
    }

    .form-control::placeholder { /* Standard */
        color: var(--muted-foreground);
        opacity: 0.7;
    }

    .form-control::-moz-placeholder { /* Firefox */
        color: var(--muted-foreground);
        opacity: 0.7;
    }

    .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: var(--muted-foreground);
        opacity: 0.7;
    }

    .form-control::-ms-input-placeholder { /* Microsoft Edge */
        color: var(--muted-foreground);
        opacity: 0.7;
    }

/* Badges */
.badge {
    border-radius: var(--radius); /* Use radius variable */
    padding: 0.3em 0.6em; /* Adjust padding slightly */
}

.bg-secondary.badge { /* Override Bootstrap's default gray */
    background-color: var(--secondary) !important; /* Use !important if needed */
    color: var(--secondary-foreground) !important;
    font-size: 0.9rem;
}

.bg-success.badge {
    background-color: hsl(142 50% 40% / 0.15) !important; /* Lighter background */
    color: hsl(142 50% 35%) !important; /* Darker text */
    font-size: 0.9rem;
}

.bg-warning.badge {
    font-size: 0.9rem;
}

.bg-danger.badge {
    font-size: 0.9rem;
}
/* Add more badge overrides (bg-info, bg-warning, bg-danger) as needed */


/* Tables */
.table {
    /* Optional: Adjust table text color if needed */
    /* color: var(--foreground); */
}

    .table > thead {
        color: var(--muted-foreground); /* Header text color */
        background-color: hsl(var(--background) / 0.5); /* Slightly different background for header */
        border-bottom: 2px solid var(--border); /* Thicker border below header */
    }

    .table > :not(caption) > * > * { /* Target all cells */
        border-bottom-width: 1px;
        border-color: var(--border); /* Use consistent border color */
        padding: 0.75rem; /* Consistent padding */
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: hsl(var(--background) / 0.5); /* Lighter stripe */
    color: var(--foreground);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--accent); /* Use accent color for hover */
    color: var(--accent-foreground);
}


/* Utility Styles */

/* Utility classes for Dashboard Summary Card Icons */
.icon-size-6 {
    width: 1.5rem; /* Approx h-6 w-6 */
    height: 1.5rem;
}

/* Background colors (approx. Tailwind -100 shades) */
.bg-primary-100 {
    background-color: hsl(142, 40%, 94%);
}

.bg-warning-100 {
    background-color: hsl(40, 80%, 95%);
}
/* Assuming a warning color */
.bg-info-100 {
    background-color: hsl(200, 70%, 95%);
}
/* Assuming an info color */
.bg-success-100 {
    background-color: hsl(142, 50%, 95%);
}
/* Assuming a success color */

/* Text colors (approx. Tailwind -600 shades) */
.text-primary-600 {
    color: hsl(142, 40%, 30%);
}

.text-warning-600 {
    color: hsl(40, 80%, 40%);
}
/* Assuming a warning color */
.text-info-600 {
    color: hsl(200, 70%, 40%);
}
/* Assuming an info color */
.text-success-600 {
    color: hsl(142, 50%, 30%);
}
/* Assuming a success color */

/* Border colors */
.border-start { /* Make border-start use our border color */
    border-left-color: var(--border) !important;
}

.border-end {
    border-right-color: var(--border) !important;
}

.border-bottom {
    border-bottom-color: var(--border) !important;
}

.border-top {
    border-top-color: var(--border) !important;
}

/* Styles for collapse icon rotation */
.collapse-icon {
    transition: transform 0.3s ease-in-out;
}

    .collapse-icon.rotate-180 {
        transform: rotate(180deg);
    }


/* Custom Page Elements */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* Equivalent to mb-4 in Bootstrap 5 */
}

/* Metric Card Specific Styles */
.metric-card .metric-label {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700; /* fw-bold */
    color: var(--muted-foreground); /* text-muted */
    text-transform: uppercase; /* text-uppercase */
    margin-bottom: 0.25rem; /* mb-1 */
}

.metric-card .metric-value {
    font-size: 1.5rem; /* h5 */
    margin-bottom: 0; /* mb-0 */
    font-weight: 700; /* fw-bold */
}


/* Specific Adjustments */

/* Example for the metric cards in Registry/Index */
.metric-card .card-body {
    padding-top: 1rem; /* Adjust padding if needed */
}

.metric-card .text-xs {
    font-size: 0.75rem; /* Ensure text size matches */
}

.metric-card .h5 {
    font-size: 1.5rem; /* Match font size from React */
    font-weight: 700;
}
/* Specific border colors for metric cards */

/* Navbar adjustments */
.navbar {
    border-bottom-color: var(--border) !important; /* Ensure border color override */
    background-color: var(--card) !important; /* Use card background for navbar */
}

/* Footer adjustments */
.footer {
    background-color: var(--muted) !important; /* Use muted background */
    border-top-color: var(--border) !important;
    color: var(--muted-foreground);
    padding: 1rem 0; /* Add some padding */
    text-align: center;
    font-size: 0.9rem;
    /* Ensure footer stays at the bottom if body content is short */
    /* This might require adjustments in _Layout.cshtml structure if not already handled */
    /* margin-top: auto; */ /* Add this if body doesn't push it down */
}

    .footer a {
        color: var(--primary);
    }

.position-relative > .form-control {
    padding-right: 0rem !important;
}

.position-relative > .form-control.is-valid,
.position-relative > .form-control.is-invalid {
    padding-right: 0rem !important;
}

.position-relative > .form-control + .password-toggle.end-0 {
    right: .75rem !important;
}

.position-relative > .form-control.is-valid + .password-toggle.end-0,
.position-relative > .form-control.is-invalid + .password-toggle.end-0 {
    right: 1.25rem !important; 
}

/* 統一控制圖示外框與置中 */
.alert i {
    width: 20px;
    text-align: center;
}

.icon-badge {
    width: 3rem;
    height: 3rem;
    border-radius: .5rem; 
    display: grid;
    place-items: center;
    line-height: 0; 
}

    .icon-badge i {
        font-size: 1.5rem;
    }

html, body {
    height: 100%;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr; 
    min-height: 100%;
}

    .app-shell.no-sidebar {
        grid-template-columns: 1fr;
    }

.hag-sidebar {
    display: flex;
    flex-direction: column;
}

    .hag-sidebar .menu {
        flex: 1 1 auto;
    }

.app-main {
    min-width: 0; 
}

/* C103的css */
/* 邊框 */
.card.border-info {
    border-color: hsl(210 25% 75%) !important; /* 柔和灰藍 */
}

    .card.border-info:hover {
        border-color: hsl(210 45% 40%) !important; /* 深藍 */
    }

/* 標題 */
.card .card-title.text-info {
    color: hsl(210 60% 30%) !important; /* 靛青 */
    transition: color 0.2s ease-in-out;
}

/* 國寶／重要古物 */
.form-check-label.text-warning {
    color: hsl(270 60% 28%) !important; /* 深紫 */
    transition: color 0.2s ease-in-out;
}

/* 提報指定*/
.form-check-label.text-success {
    color: hsl(150 45% 25%) !important; /* 墨綠 */
    transition: color 0.2s ease-in-out;
}

/* 備查 */
#createAssetBtn[data-report-type="record"] {
    border-color: hsl(210 60% 40%);
    color: hsl(210 60% 40%); /* 藍 */
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

    #createAssetBtn[data-report-type="record"]:hover,
    #createAssetBtn[data-report-type="record"]:focus {
        background-color: hsl(210 60% 40%);
        color: #fff;
        border-color: hsl(210 65% 35%);
    }

/* 提報指定 */
#createAssetBtn[data-report-type="designation"] {
    border-color: hsl(150 40% 35%);
    color: hsl(150 40% 35%); /* 綠 */
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

    #createAssetBtn[data-report-type="designation"]:hover,
    #createAssetBtn[data-report-type="designation"]:focus {
        background-color: hsl(150 40% 35%);
        color: #fff;
        border-color: hsl(150 40% 30%);
    }

.password-toggle {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
}

.field-error-holder {
    margin-top: .25rem;
    min-height: 1rem;
}

/* Select2*/
/* 外框 */
.select2-container .select2-selection--single {
    height: 38px !important; 
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    background-color: var(--background);
    color: var(--foreground);
}

/* 文字垂直置中 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important; 
    padding-left: 0.75rem;
    padding-right: 2rem; 
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 下拉箭頭 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 0.75rem;
    top: 0;
}

/* focus 樣式 */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ring);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}

.select2-container {
    width: 100% !important;
}

.select2-dropdown {
    box-sizing: border-box; /* 防止多出來 */
}

/* 錯誤 */
.select2-container--default .select2-selection.is-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 0.25rem;
    padding-right: 2.25rem; 
}

/* 正確 */
.select2-container--default .select2-selection.is-valid {
    border: 1px solid #198754 !important;
    border-radius: 0.25rem;
}