/* General Resets and Base Styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f7fafc; /* bg-gray-50 */
    color: #1f2937; /* text-gray-900 is a common default */
}

*, *:before, *:after {
    box-sizing: inherit;
}

#root-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #edf2f7;
}
::-webkit-scrollbar-thumb {
    background: #a0aec0;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Links */
a {
    text-decoration: none;
    color: inherit;
}

/* App Header */
.app-header {
    background: linear-gradient(to bottom, #2563eb, #f9fafb); /* Blue-600 to Gray-50 gradient */
    color: #ffffff; /* 初期テキスト色は白、下部では見えにくくなる可能性あり */
    padding: 0.625rem; /* p-2.5 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}
.app-header.print-hidden { /* print:hidden */
    /* This would typically be handled by a print stylesheet or media query,
       but for simplicity, if you need to hide it via class for non-print: */
}
@media print {
    .app-header.print-hidden {
        display: none;
    }
}


.header-left-section {
    display: flex;
    align-items: center;
}

.brand-logo {
    font-size: 2.5rem; /* text-4xl 相当より少し大きく */
    font-weight: 900; /* より太く (font-black相当) */
    font-style: italic;
    color: white;
    margin-right: 1rem; /* ナビゲーションとのスペースを確保 */
}

.home-link-button {
    margin-right: 0.75rem; /* mr-3 */
    padding: 0.375rem; /* p-1.5 */
    background-color: white;
    border-radius: 9999px; /* rounded-full */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.home-link-button:hover {
    background-color: #DBEAFE; /* hover:bg-blue-100 */
}
.home-link-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1D4ED8; /* focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white */
}
.home-link-icon {
    height: 1.5rem; /* h-6 */
    width: 1.5rem; /* w-6 */
    color: #2563EB; /* text-blue-600 */
}

.logo-image {
    height: 2rem; /* h-8 */
    margin-right: 1rem; /* mr-4 */
    cursor: pointer;
}
.logo-upload-input {
    display: none; /* hidden */
}

.main-navigation {
    display: flex;
    align-items: center;
    margin-left: 0.5rem; /* ロゴとのスペースを調整 */
}
.nav-link {
    padding-left: 0.875rem; /* px-3.5 */
    padding-right: 0.875rem; /* px-3.5 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    border-top-left-radius: 0.375rem; /* rounded-t-md */
    border-top-right-radius: 0.375rem; /* rounded-t-md */
    transition: all 150ms ease-in-out;
    margin-right: 1px; /* mr-px */
    color: #1E40AF; /* text-blue-700, 少し濃くして背景とのコントラストを調整 */
    background-color: rgba(219, 234, 254, 0.3); /* bg-blue-100 の透明度を下げたような薄い青背景 */
}
.nav-link:hover {
    background-color: #1D4ED8; /* hover:bg-blue-700 */
    color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* ホバー時にも少し影をつける */
}
.nav-link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white; /* focus:ring-2 focus:ring-white focus:ring-opacity-75 */
    opacity: 0.75;
}
.nav-link.active { /* 選択中のタブ */
    background-color: #EFF6FF; /* bg-blue-50 (より明るい青で明確に区別) */
    color: #1E3A8A; /* text-blue-800 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.header-right-section {
    display: flex;
    align-items: center;
    position: relative; /* ドロップダウンの位置基準のため */
    gap: 0.5rem; /* space-x-2 */
}
.menu-button {
    padding: 0.5rem; /* p-2 */
    border-radius: 0.375rem; /* rounded-md */
}
.menu-button:hover {
    background-color: #1D4ED8; /* hover:bg-blue-700 */
}
.menu-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white; /* focus:ring-2 focus:ring-white */
}
.menu-button-icon {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
}

/* Hamburger Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%; /* ボタンのすぐ下に表示 */
    right: 0;
    background-color: white;
    border: 1px solid #E5E7EB; /* border-gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    z-index: 50; /* 他の要素より手前に表示 */
    min-width: 160px; /* 最小幅 */
}
.dropdown-menu.hidden {
    display: none;
}
.dropdown-item {
    display: block;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
}
.dropdown-item:hover {
    background-color: #F3F4F6; /* hover:bg-gray-100 */
}

/* Page Container */
.page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* background-color: #F9FAFB; /* bg-gray-50 - already on body */
}

/* Page Title Bar */
.page-title-bar {
    background-color: #EFF6FF; /* bg-blue-50 */
    color: #1E3A8A; /* text-blue-800 */
    padding: 0.75rem; /* p-3 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border-bottom: 1px solid #BFDBFE; /* border-b border-blue-200 */
}
.page-title-bar.print-hidden {
    /* Similar to .app-header.print-hidden */
}
@media print {
    .page-title-bar.print-hidden {
        display: none;
    }
}
.page-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-left: 0.5rem; /* ml-2 */
}

/* Main Content Area */
.main-content {
    display: flex;
    flex-grow: 1;
    padding: 0.75rem; /* p-3 */
    gap: 0.75rem; /* space-x-3 */
    overflow: hidden;
}

/* Columns for Karte Page */
.content-column-two-thirds {
    display: flex;
    flex-direction: column;
    width: 66.666667%; /* w-2/3 */
    gap: 0.75rem; /* space-y-3 */
}
.content-column-one-third {
    width: 33.333333%; /* w-1/3 */
    background-color: white;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* space-y-2.5 */
}

/* Card / Panel Style */
.card {
    background-color: white;
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
}
.card-title {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.75rem; /* mb-3 */
}

/* Form Grid (Karte Search) */
.form-grid-karte {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem 0.625rem; /* gap-x-3 gap-y-2.5 */
    align-items: center;
}
.form-label-karte {
    font-size: 0.75rem; /* text-xs */
    color: #4B5563; /* text-gray-600 */
    align-self: center;
}
.form-label-karte.col-span-1 {
    grid-column: span 1 / span 1;
}
@media (min-width: 768px) { /* md: */
    .form-label-karte.md-col-span-1 {
        grid-column: span 1 / span 1;
    }
}

.form-input-karte {
    border: 1px solid #D1D5DB; /* border-gray-300 */
    padding-left: 0.625rem; /* px-2.5 */
    padding-right: 0.625rem;
    padding-top: 0.375rem; /* py-1.5 */
    padding-bottom: 0.375rem;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    height: 2.25rem; /* h-9 */
    color: #111827; /* text-gray-900 */
    background-color: white;
}
.form-input-karte:focus {
    outline: 1px solid transparent; /* focus:ring-1 */
    border-color: #3B82F6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 1px #3B82F6; /* focus:ring-blue-500 */
}
.form-input-karte.col-span-11 {
    grid-column: span 11 / span 11;
}
.form-input-karte.md-col-span-2 { /* md:col-span-2 */
    grid-column: span 12 / span 12; /* Default for mobile */
}
@media (min-width: 768px) {
    .form-input-karte.md-col-span-2 {
        grid-column: span 2 / span 2;
    }
}
.form-input-karte.disabled {
    background-color: #F3F4F6; /* bg-gray-100 */
    color: #6B7280; /* text-gray-500 */
    cursor: not-allowed;
}

.form-input-group-karte { /* For label + input flex container */
    grid-column: span 12 / span 12;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}
.form-input-group-karte.md-col-span-9 { /* md:col-span-9 */
}
@media (min-width: 768px) {
    .form-input-group-karte.md-col-span-9 {
        grid-column: span 9 / span 9;
    }
}
.form-input-group-karte.md-col-span-6 { /* md:col-span-6 */
}
@media (min-width: 768px) {
    .form-input-group-karte.md-col-span-6 {
        grid-column: span 6 / span 6;
    }
}

.form-input-karte.flex-grow {
    flex-grow: 1;
}

.form-actions-karte {
    grid-column: span 12 / span 12;
    display: flex;
    justify-content: flex-end;
}
@media (min-width: 768px) { /* md:col-span-6 */
    .form-actions-karte.md-col-span-6 {
        grid-column: span 6 / span 6;
    }
}


/* Buttons */
.btn {
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    padding-top: 0.375rem; /* py-1.5 */
    padding-bottom: 0.375rem;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    height: 2.25rem; /* h-9 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: background-color 0.15s ease-in-out;
}
.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 1px; /* focus:ring-offset-1 */
}

.btn-primary { /* Renamed from btn-red */
    background-color: #3B82F6; /* bg-blue-500 */
    color: white;
}
.btn-primary:hover {
    background-color: #2563EB; /* hover:bg-blue-600 */
}
.btn-primary:focus {
    box-shadow: 0 0 0 2px #3B82F6, 0 0 0 3px white; /* focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 */
}

.btn-blue {
    background-color: #3B82F6; /* bg-blue-500 */
    color: white;
    margin-left: 0.5rem; /* ml-2 */
}
.btn-blue:hover {
    background-color: #2563EB; /* hover:bg-blue-600 */
}
.btn-blue:focus {
     box-shadow: 0 0 0 2px #3B82F6, 0 0 0 3px white; /* focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 */
}

.btn-gray {
    background-color: #F3F4F6; /* bg-gray-100 or bg-gray-200 */
    color: #374151; /* text-gray-700 */
    border-color: #D1D5DB; /* border-gray-300 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
    height: 2.5rem; /* h-10 */
}
.btn-gray:hover {
    background-color: #E5E7EB; /* hover:bg-gray-200 */
}
.btn-gray:focus {
    box-shadow: 0 0 0 1px #60A5FA; /* focus:ring-1 focus:ring-blue-400 */
}


/* Customer Table */
.customer-table-container {
    flex-grow: 1;
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
    overflow-y: auto;
}
.customer-table {
    width: 100%;
    font-size: 0.875rem; /* text-sm */
    text-align: left;
    color: #4B5563; /* text-gray-600 */
    table-layout: auto;
}
.customer-table thead {
    position: sticky;
    top: 0;
    background-color: #F3F4F6; /* bg-gray-100 */
    z-index: 10;
}
.customer-table th {
    padding: 0.75rem; /* p-3 */
    border-bottom: 1px solid #D1D5DB; /* border-b border-gray-300 */
    font-weight: 600; /* font-semibold */
    color: #4B5563; /* text-gray-600 */
}
.customer-table th.w-15 { width: 15%; }
.customer-table th.w-25 { width: 25%; }
.customer-table th.w-35 { width: 35%; }

.customer-table td {
    padding: 0.75rem; /* p-3 */
    border-bottom: 1px solid #E5E7EB; /* border-b border-gray-200 */
}
.customer-table tbody tr:hover {
    background-color: #F9FAFB; /* hover:bg-gray-50 */
}
.customer-table .link-customer-detail {
    color: #2563EB; /* text-blue-600 */
}
.customer-table .link-customer-detail:hover {
    text-decoration: underline;
}
.customer-table .empty-message td {
    padding: 1.5rem; /* p-6 */
    text-align: center;
    color: #6B7280; /* text-gray-500 */
}
.customer-table .error-message td {
    padding: 1.5rem; /* p-6 */
    text-align: center;
    color: #EF4444; /* text-red-500 */
}


/* Kana Keyboard (Karte Page) */
.kana-keyboard-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* gap-2 */
}
.kana-keyboard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5em;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #f8fafc;
  border-radius: 0.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 0.5rem 1rem 1.5rem 1rem;
}
.kana-key {
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    color: #1f2937; /* Tailwind gray-800 */
    padding: 0.25rem; /* py-1 or similar */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 1rem; /* text-base */
    outline: none;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease-in-out;
    min-height: 40px; /* min-h-[40px] */
    cursor: pointer;
}
.kana-keyboard-grid button.kana-key {
  font-size: 1.3rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0.5em;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #1f2937;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  box-sizing: border-box;
}
.kana-keyboard-grid button.kana-key:active {
  background: #dbeafe;
}
.kana-keyboard-grid button.col-span-2 {
  grid-column: span 2;
}

/* 数字キーボードも同じ大きさ・グリッドで統一 */
.numeric-keyboard {
  position: fixed;
  right: 2.5rem;
  left: unset;
  bottom: 2.5rem;
  transform: none;
  z-index: 1200;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  display: none;
  min-width: 220px;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3em;
}
.numeric-keyboard button {
  font-size: 1.3rem;
  width: 3.2em;
  height: 3.2em;
  margin: 0.1em;
  border-radius: 0.5em;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #1f2937;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numeric-keyboard button:active {
  background: #dbeafe;
}
.numeric-keyboard-spacer {
  display: none;
}


/* Dashboard (index.html) */
.dashboard-page-content {
    padding: 1rem; /* p-4 */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}
.dashboard-controls-container {
    background-color: white;
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* space-x-3 */
}
.dashboard-controls-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}
.dashboard-date-picker {
    border: 1px solid #D1D5DB; /* border-gray-300 */
    padding-left: 0.625rem; /* px-2.5 */
    padding-right: 0.625rem;
    padding-top: 0.375rem; /* py-1.5 */
    padding-bottom: 0.375rem;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    height: 2.25rem; /* h-9 */
}
.dashboard-date-picker:focus {
    outline: 1px solid transparent;
    border-color: #3B82F6; /* blue-500 */
    box-shadow: 0 0 0 1px #3B82F6; /* ring-blue-500 */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* default */
    gap: 1rem; /* gap-4 */
}
@media (min-width: 768px) { /* md: */
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}
@media (min-width: 1024px) { /* lg: */
    .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

.dashboard-item {
    background-color: white;
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
    text-align: center;
}
.dashboard-item-title {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}
.dashboard-item-value {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
}

/* Add Customer Form (add_customer.html) */
.add-customer-page-content {
    padding: 1rem; /* p-4 */
    display: flex;
    justify-content: center;
}
.add-customer-form-container {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border border-gray-200 */
    width: 100%;
    max-width: 32rem; /* max-w-lg */
}
.add-customer-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}
.add-customer-form-group > label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}
.add-customer-form-group > input[type="text"] {
    width: 100%;
    border: 1px solid #D1D5DB; /* border-gray-300 */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    height: 2.25rem; /* h-9 */
}
.add-customer-form-group > input[type="text"]:focus {
    outline: 1px solid transparent;
    border-color: #3B82F6; /* blue-500 */
    box-shadow: 0 0 0 1px #3B82F6; /* ring-blue-500 */
}
.add-customer-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem; /* space-x-3 */
    padding-top: 0.5rem; /* pt-2 */
}
.btn-gray-form { /* For "戻る" button */
    background-color: #E5E7EB; /* bg-gray-200 */
    color: #374151; /* text-gray-700 */
}
.btn-gray-form:hover {
    background-color: #D1D5DB; /* hover:bg-gray-300 */
}
.btn-gray-form:focus {
    box-shadow: 0 0 0 2px #9CA3AF, 0 0 0 3px white; /* focus:ring-2 focus:ring-gray-400 focus:ring-offset-1 */
}

/* Hidden class (if needed, though Tailwind's 'hidden' is simple) */
.hidden {
    display: none;
}

/* --- add_customer.html specific styles --- */
.main-content-add-customer {
    padding: 1rem; /* p-4 */
    flex-grow: 1;
}
@media (min-width: 1024px) { /* lg: */
    .main-content-add-customer {
        padding: 1.5rem; /* lg:p-6 */
    }
}

.form-card-container {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #E5E7EB; /* border-gray-200 */
}

.form-card-container > form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

.form-title-add-customer {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1F2937; /* text-gray-800 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.fieldset-styled {
    border: 1px solid #D1D5DB; /* border-gray-300 */
    padding: 1rem; /* p-4 */
    border-radius: 0.375rem; /* rounded-md */
    margin-bottom: 1.5rem; /* fieldset間の区切りを維持 */
}

.fieldset-legend {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
}

.form-grid-add-customer {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* Default to 1 column */
    gap: 1rem 1.5rem; /* gap-y-4 gap-x-6 */
    margin-top: 1rem; /* mt-4 */
}
@media (min-width: 768px) { /* md: */
    .form-grid-add-customer {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* md:grid-cols-3 */
    }
}


/* Specific grid for "Others" section in add_customer.html */
.form-grid-add-customer.form-grid-others {
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* Default to 1 column */
}
@media (min-width: 768px) { /* md: */
    .form-grid-add-customer.form-grid-others {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns for medium screens and up */
    }
}

.form-grid-add-customer .md-col-span-1 { /* 便宜的なクラス名 */
    /* grid-column: span 1 / span 1; */ /* デフォルトで1なので不要な場合も */
}
.form-grid-add-customer .md-col-span-2 {
    grid-column: span 1 / span 1;
}
@media (min-width: 768px) { /* md: */
    .form-grid-add-customer .md-col-span-2 {
        grid-column: span 2 / span 2;
    }
}
.form-grid-add-customer .md-col-span-3 {
    grid-column: span 1 / span 1;
}
@media (min-width: 768px) { /* md: */
    .form-grid-add-customer .md-col-span-3 {
        grid-column: span 3 / span 3;
    }
}

.form-label-add-customer {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.25rem; /* ラベルと入力欄の間のスペース */
}

.required-asterisk {
    color: #EF4444; /* red-500 */
    font-weight: 600; /* font-semibold */
}

.form-input-add-customer,
.form-select-add-customer,
.form-textarea-add-customer {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 0.875rem; /* sm:text-sm */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #9CA3AF; /* border-gray-400 */
    background-color: #F9FAFB; /* bg-gray-50 */
    padding: 0.5rem 0.75rem; /* py-2 px-3相当 */
}
.form-input-add-customer:focus,
.form-select-add-customer:focus,
.form-textarea-add-customer:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563EB; /* focus:border-blue-500 */
    box-shadow: 0 0 0 2px #2563EB; /* focus:ring-2 focus:ring-blue-500 */
}
.form-input-readonly-add-customer {
    background-color: #F3F4F6; /* bg-gray-100 */
    border-color: #D1D5DB; /* border-gray-300 */
}

.form-actions-add-customer {
    padding-top: 1.25rem; /* pt-5 */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem; /* space-x-3 */
}

/* --- ナビゲーションバーをタブ風・横並びに --- */
/* 移植のため削除 */

/* style.css の末尾などに追加 */
.header-error-message {
  color: #fff;
  background: rgba(220, 53, 69, 0.95);
  padding: 12px 20px;
  border-radius: 6px;
  margin: 10px auto;
  max-width: 400px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
}

.header-success-message {
  color: #fff;
  background: rgba(25, 135, 84, 0.95);
  padding: 12px 20px;
  border-radius: 6px;
  margin: 10px auto;
  max-width: 400px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
}

/* 画面全体のローディングオーバーレイ */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

/* ローディングスピナー */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s ease infinite;
}

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

/* ページタイトルバーのスタイル */
.page-title-bar {
    background-color: #f0f4f8; /* 明るい背景色 */
    padding: 12px 20px;
    border-bottom: 1px solid #d1d9e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-title {
    font-size: 1.25rem; /* 少し大きめのフォント */
    font-weight: 600; /* セミボールド */
    color: #334155; /* 落ち着いたテキスト色 */
}

/* 共通ボタンのスタイル */
.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: #3b82f6; /* 青色 */
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb; /* 少し濃い青 */
}

.btn-secondary {
    background-color: #64748b; /* グレー */
    color: white;
}

.btn-secondary:hover {
    background-color: #475569; /* 少し濃いグレー */
}

/* フォーム要素の共通スタイル */
.form-input, .form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #f8fafc;
    font-size: 0.9rem;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

/* カードコンポーネント */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border: 1px solid #e2e8f0;
}

/* テーブルの共通スタイル */
.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th, .table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.table thead th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #475569;
}

.table tbody tr:hover {
    background-color: #f1f5f9;
}

/* ハンバーガーメニューのスタイル */
.hamburger-menu {
    display: none; /* デフォルトでは非表示 */
    cursor: pointer;
}

.dropdown-menu {
    display: none; /* デフォルトでは非表示 */
    position: absolute;
    top: 50px; /* ヘッダーの高さに応じて調整 */
    right: 10px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background-color: #f0f0f0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .main-nav ul {
        display: none; /* 通常のナビゲーションを非表示 */
    }

    .hamburger-menu {
        display: block; /* ハンバーガーメニューを表示 */
    }
}

/* css/style.css の末尾などに追加 */

.btn-danger {
    background-color: #ef4444; /* red-500 */
    color: white;
}
.btn-danger:hover {
    background-color: #dc2626; /* red-600 */
}
.btn-danger:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #f87171; /* ring-2 ring-white ring-offset-2 ring-offset-red-400 */
}

#deleteButtonTop.btn-danger,
#deleteButton.btn-danger {
    background-color: #ef4444 !important; /* red-500 */
    color: white !important;
}

/* --- 非同期処理ボタンの共通スタイル --- */
/* 処理中・無効化されたボタンの共通スタイル */
.btn:disabled {
    cursor: not-allowed; /* カーソルを「不可」アイコンに */
    opacity: 0.7;        /* 少し半透明にする */
}

/* 成功状態のスタイル */
.btn.is-success {
    background-color: #22c55e !important; /* 緑色 (green-500) */
    border-color: #16a34a !important;   /* 濃い緑 (green-600) */
    color: white !important;
}

/* --- ローディングスピナーアニメーション --- */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 更新ボタンがローディング中のスタイル */
.control-btn.is-loading .fa-sync-alt {
  animation: spin 1s linear infinite;
}

/* ローディング中はボタンを無効に見せる */
.control-btn.is-loading {
  cursor: not-allowed;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
    border-radius: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    display: inline-block;
    padding: 0 0.75rem;
    color: #6b7280; /* gray-500 */
    pointer-events: none;
}

.breadcrumb-item a { color: #3b82f6; text-decoration: none; transition: color 0.2s ease; }
.breadcrumb-item a:hover { color: #1d4ed8; text-decoration: underline; }
.breadcrumb-item.active { color: #4b5563; }

/* アイコンボタンのスタイル (index.html, reservation.htmlなどで共用) */
.btn.icon-btn {
    width: 50px;
    height: 50px;
    min-width: 50px; /* 最小幅も設定 */
    padding: 0; /* .btnのpaddingを上書き */
    background-color: #fff;
    border: 1px solid #d1d5db; /* .btnのtransparentを上書き */
    color: #4b5563; /* text-gray-600 */
}

.btn.icon-btn:hover {
    background-color: #f9fafb; /* bg-gray-50 */
    border-color: #9ca3af;
    color: #1f2937;
}

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

/* --- Body scroll lock when modal is open --- */
body.modal-open {
    overflow: hidden;
}