/*
Copyright 2024 LABBIZ Inc.

Licensed in accordance with the "ソフトウェア使用許諾契約書" (the "License")
concluded between LABBIZ Inc. and the licensee.
You may not use this file except in compliance with the License.
*/

/* Global Variables */
:root {
    /* Primary color: Sophisticated navy blue */
    --primary-color: #2C3E50;
    --primary-color-dark: #1a2530;
    --primary-color-light: #e9ecef;
    
    /* Secondary color: Elegant muted teal */
    --secondary-color: #3E7B7B;
    --secondary-color-dark: #2c5858;
    --secondary-color-light: #e8f1f1;
    
    /* Text colors: Refined grays */
    --text-color: #333333;
    --text-color-light: #6c757d;
    
    /* Background colors: Clean and minimal */
    --background-color: #FFFFFF;
    --background-color-alt: #F8F9FA;
    
    /* Status colors: Subtle but clear */
    --error-color: #B94A48;
    --success-color: #3C8C6C;
    
    /* Other variables */
    --border-radius: 6px;
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --transition-speed: 0.3s;
}

/* Base Styles */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-color);
    line-height: 1.5;
    background-color: var(--background-color-alt);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-top: 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--primary-color-dark);
}

/* Button Styles */
.primary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--secondary-color);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--secondary-color);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.primary-btn:hover {
    background-color: white;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.secondary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.secondary-btn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.secondary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.primary-txt {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-color-light);
}

/* Header Styles */
#admin-header {
    position: fixed;
    width: 100%;
    height: 64px;
    left: 0px;
    top: 0px;
    background: var(--secondary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#header {
    position: fixed;
    width: 100%;
    height: 64px;
    left: 0px;
    top: 0px;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#logo {
    display: flex;
    align-items: center;
}

#logo a {
    display: flex;
    align-items: center;
    transition: opacity var(--transition-speed) ease;
}

#logo a:hover {
    opacity: 0.9;
}

#header-nav {
    position: relative;
    display: flex;
    align-items: center;
}

#menu-toggle-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

#admin-menu-toggle {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    transition: all var(--transition-speed) ease;
}

#admin-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

#admin-nav-content {
    transition: all var(--transition-speed) ease;
    overflow: hidden;
    max-height: 0;
    background-color: white;
    position: absolute;
    top: 64px;
    right: 0;
    left: auto;
    color: var(--text-color);
    z-index: 9;
    padding: 0;
    box-sizing: border-box;
    min-width: 200px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--box-shadow);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

#admin-nav-content.open {
    max-height: 300px;
    padding: 0.5rem 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#admin-nav-content .text-md {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#admin-nav-content .text-md a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
    border-left: 3px solid transparent;
}

#admin-nav-content .text-md a:hover {
    background-color: var(--secondary-color-light);
    color: var(--secondary-color);
    border-left-color: var(--secondary-color);
}

#menu-toggle {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    transition: all var(--transition-speed) ease;
}

#menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

#nav-content {
    transition: all var(--transition-speed) ease;
    overflow: hidden;
    max-height: 0;
    background-color: white;
    position: absolute;
    top: 64px;
    right: 0;
    left: auto;
    color: var(--text-color);
    z-index: 9;
    padding: 0;
    box-sizing: border-box;
    min-width: 200px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--box-shadow);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

#nav-content.open {
    max-height: 300px;
    padding: 0.5rem 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#nav-content .text-md {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#nav-content .text-md a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
    border-left: 3px solid transparent;
}

#nav-content .text-md a:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

@media (min-width: 1024px) {
    /* For large screens */
    #menu-toggle-wrapper {
        display: none;
    }

    #admin-nav-content {
        display: flex;
        position: static;
        max-height: none;
        height: auto;
        min-width: auto;
        width: auto;
        right: auto;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #admin-nav-content .text-md {
        flex-direction: row;
        align-items: center;
    }

    #admin-nav-content .text-md a {
        display: inline-block;
        margin: 0 0.5rem;
        padding: 0.5rem 1rem;
        color: white;
        border-left: none;
        border-radius: var(--border-radius);
    }

    #admin-nav-content .text-md a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

    #nav-content {
        display: flex;
        position: static;
        max-height: none;
        height: auto;
        min-width: auto;
        width: auto;
        right: auto;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #nav-content .text-md {
        flex-direction: row;
        align-items: center;
    }

    #nav-content .text-md a {
        display: inline-block;
        margin: 0 0.5rem;
        padding: 0.5rem 1rem;
        color: white;
        border-left: none;
        border-radius: var(--border-radius);
    }

    #nav-content .text-md a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
}

main {
    margin-top: 64px;
    padding: 1.5rem;
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: var(--border-radius);
    background-color: #F9FAFB;
    color: var(--text-color);
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
}

/* Special styling for inputs with icons */
.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9CA3AF;
}

.input-with-icon input,
.input-with-icon select {
    padding-left: 40px !important; /* Important to override inline styles */
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
    border-color: #D1D5DB;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(29, 166, 222, 0.1);
    background-color: white;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

/* Card and Panel Styles */
.panel {
    border: 1px solid #E5E7EB;
    border-radius: var(--border-radius);
    background-color: white;
    box-shadow: var(--box-shadow);
    transition: box-shadow var(--transition-speed) ease;
}

.panel:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Alert Styles */
.bg-red-100 {
    background-color: #FEE2E2 !important;
    border-color: #FECACA !important;
}

.text-red-700 {
    color: #B91C1C !important;
}

.bg-green-100 {
    background-color: #D1FAE5 !important;
    border-color: #A7F3D0 !important;
}

.text-green-700 {
    color: #047857 !important;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

th {
    text-align: left;
    padding: 0.75rem 1rem;
    background-color: #F9FAFB;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid #E5E7EB;
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #E5E7EB;
}

tr:hover {
    background-color: #F9FAFB;
}

/* Modal Styles */
.modal {
    border-radius: var(--border-radius);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
}

.pagination a {
    background-color: var(--primary-color);
    color: white;
}

.pagination a:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pagination span {
    background-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Utility Classes */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
    box-shadow: var(--box-shadow);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded {
    border-radius: var(--border-radius);
}

.rounded-full {
    border-radius: 9999px;
}

.transition {
    transition: all var(--transition-speed) ease;
}