@import 'header';
@import 'sidebar';
@import 'form.css';
@import 'button';
@import 'table';
@import 'content';
@import 'login';
@import 'order';
@import 'histories';
@import 'report';
@import 'status.css';
@import 'modal';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-light-background text-light-text dark:bg-dark-background dark:text-dark-text;
}

main {
  @apply mt-12 mb-10 px-4 md:ml-52 md:px-12;
}

h1 {
  @apply px-2 p-1 mb-8 text-xl border-l-4 border-light-primary dark:border-dark-primary;
}

h1.navi {
  @apply border-light-navi dark:border-dark-navi;
}

h1.pamphlet {
  @apply border-light-pamphlet dark:border-dark-pamphlet;
}

h1.homepage {
  @apply border-light-homepage dark:border-dark-homepage;
}

h1.booth {
  @apply border-light-booth dark:border-dark-booth;
}

h1.animation {
  @apply border-light-animation dark:border-dark-animation;
}

h1.movie {
  @apply border-light-movie dark:border-dark-movie;
}

h2 {
  @apply text-base text-gray-500 dark:text-gray-300 font-semibold mb-2;
}

p.company-name {
  @apply text-2xl mb-4;
}

main a:not(.button, .task-button, .reject-button, .request-buttons a) {
  @apply text-light-secondary dark:text-dark-secondary;
}

#error_explanation, #sfdc_error_explanation {
  @apply bg-[#ffe1e4] text-[#ff5967] px-3 py-2 rounded-lg mt-3;
}

#error_explanation h2 {
  @apply p-0 text-sm border-none dark:bg-[#fad1d2] dark:text-[#e5505a];
}

#error_explanation ul {
  @apply columns-1;
}

.alert {
  @apply text-red-500 font-bold;
}

#notice {
  @apply rounded-lg mb-5 px-3 py-2 bg-green-50 text-green-500 inline-block;
}

.user-name {
  @apply flex items-center mx-2 my-1;
}

.avatar {
  @apply w-7 h-7 rounded-full mr-2;
}

.seal {
  @apply w-24 h-24;
}

.notification-badge {
  @apply bg-red-500 h-2 w-2 ml-2 inline-block;
}

.horizontal-left-aligned {
  @apply flex items-center justify-start;
}

.horizontal-right-aligned {
  @apply flex items-center justify-end;
}

.horizontal-space-between {
  @apply flex items-center justify-between;
}

.toggle-content.hidden {
  display: none;
}

.grid-two-cols {
  @apply grid grid-cols-1 md:grid-cols-2;
}

/*
  各 .css ファイルに記述しても何故か反映されないセレクターを暫定的にここに記述
*/
select, textarea {
  @apply shadow rounded-md border border-gray-200 focus:border-gray-200 focus:ring-0 text-light-text;
}
.button {
  @apply rounded-lg my-2 px-3 py-2 bg-light-secondary hover:bg-light-pale_secondary dark:bg-dark-secondary dark:hover:bg-dark-deep_secondary text-white dark:text-white cursor-pointer block max-w-fit;
}

.filter-button {
  @apply rounded my-0.5 px-1 py-1 text-2xs bg-light-secondary hover:bg-light-pale_secondary dark:bg-dark-secondary dark:hover:bg-dark-deep_secondary text-white cursor-pointer block text-center !important;
}

.booth-filters li a {
  @apply min-h-[2.5rem] flex items-center !important;
}

.disabled-button {
  @apply rounded-lg my-2 px-3 py-2 bg-gray-300 dark:bg-gray-600 text-white block max-w-fit;
}

.task-buttons ul {
  @apply grid grid-cols-4 gap-5 text-white text-lg;
}

.task-buttons li .task-button {
  @apply flex flex-col text-center rounded-lg py-7 bg-light-secondary hover:bg-light-pale_secondary dark:bg-dark-secondary dark:hover:bg-dark-deep_secondary;
}

.task-buttons li .reject-button {
  @apply flex flex-col text-center rounded-lg py-7 bg-[#ff5967] hover:bg-[#ff8c95] dark:bg-[#e5505a] dark:hover:bg-[#c64750];
}

.request-buttons ul {
  @apply grid grid-cols-4 gap-6 text-white;
}

.request-buttons li {
  @apply text-center bg-gray-400 hover:bg-light-primary rounded py-4 dark:hover:bg-dark-primary;
}

.request-buttons li.navi {
  @apply hover:bg-light-navi dark:hover:bg-dark-navi;
}

.request-buttons li.pamphlet {
  @apply hover:bg-light-pamphlet dark:hover:bg-dark-pamphlet;
}

.request-buttons li.homepage {
  @apply hover:bg-light-homepage dark:hover:bg-dark-homepage;
}

.request-buttons li.booth {
  @apply hover:bg-light-booth dark:hover:bg-dark-booth;
}

.request-buttons li.animation {
  @apply hover:bg-light-animation dark:hover:bg-dark-animation;
}

.request-buttons li.movie {
  @apply hover:bg-light-movie dark:hover:bg-dark-movie;
}

.request-buttons p {
  @apply flex flex-col h-full items-center justify-center;
}

.request-buttons i {
  @apply text-4xl;
}

.order-buttons {
  @apply flex mt-4 justify-end;
}

.order-buttons .button {
  @apply my-0;
}
.content {
  @apply relative text-sm;
}

.content dl {
  @apply grid grid-cols-5 gap-1 pt-8 p-4 mb-4 border border-gray-200 dark:border-gray-600 shadow-md break-all;
}

.content dt {
  @apply col-span-2 py-2;
}

.content dd {
  @apply col-span-3 py-2;
}

.content hr {
  @apply col-span-5 border-dashed border-gray-300 dark:border-gray-600;
}

.content .plan {
  @apply pt-12 p-4 mb-4 border border-gray-200 dark:border-gray-600 shadow-md overflow-x-auto;
}

.content .plan thead {
  @apply border-none;
}

.content .plan th {
   @apply bg-light-background dark:bg-dark-background text-light-text dark:text-dark-text;
}

.content .plan th,
.content .plan td {
   @apply border-b border-dashed border-gray-300 dark:border-gray-600 text-sm font-normal pl-0;
}

.content .plan th:first-child {
  @apply w-[40%] md:w-[25%];
}

.content .plan th:nth-child(2),
.content .plan th:nth-child(3),
.content .plan th:nth-child(4) {
  @apply w-[20%] md:w-[25%];
}
form {
  @apply text-sm mx-6 md:mx-24;
}

form h3 {
  @apply text-sm font-semibold px-2 text-white rounded bg-gray-400 dark:bg-gray-600 relative inline-block;
}

form p {
  @apply my-4;
}

label {
  @apply block mb-2;
}

.required {
  @apply flex items-center;
}

.required span {
  @apply ml-2 text-light-primary dark:text-dark-primary;
}

.checkbox-container {
  @apply flex items-center;
}

.checkbox-container label {
  @apply mb-0;
}

input[type="checkbox"] {
  @apply shadow rounded border-gray-300 w-6 h-6 ml-4 text-light-secondary inline-block dark:text-dark-secondary;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

form ul {
  @apply columns-2 mb-6;
}

form li {
  @apply flex items-center mb-2;
}

form li input[type="checkbox"] {
  @apply my-1 mr-2 ml-0;
}

form li label {
  @apply mb-0;
}

.checkbox-and-number-field-container {
  @apply grid grid-cols-2;
}

.checkbox-and-number-field-container input[type="number"] {
  @apply mr-1;
}

input[type="file"] {
  @apply block;
}

select, #order_consultant_ids, #order_customer_support_ids, #order_observer_ids, .comments select {
  @apply shadow rounded-md border border-gray-200 focus:border-gray-200 focus:ring-0;
}

#order_consultant_ids, #order_customer_support_ids, #order_observer_ids {
  @apply h-56;
}

select.filter-select {
  @apply text-2xs pl-2 pr-6 py-0;
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, input[type="datetime-local"], input[type="date"], input[type="month"] {
  @apply shadow rounded-md border border-gray-200 mt-0 w-80 focus:border-gray-200 focus:ring-0 caret-light-secondary dark:caret-dark-secondary text-light-text;
}

input[type="submit"] {
  @apply mb-5 rounded-lg py-3 px-5 bg-light-secondary hover:bg-light-pale_secondary text-white cursor-pointer dark:bg-dark-secondary dark:hover:bg-dark-deep_secondary;
}

input[type="submit"]:disabled {
  @apply bg-gray-400 dark:bg-gray-500 cursor-default;
}
header {
  @apply w-full z-50 py-4 px-8 border-b bg-light-header border-gray-300 dark:bg-dark-header dark:border-neutral-600;
}

header nav {
  @apply nav-links flex items-center;
}

.user-menu {
  @apply bg-light-background border shadow-lg z-50 mt-4 opacity-0 dark:bg-dark-background;
}

nav a {
  @apply block p-4;
}

.user-menu:not(.hidden) {
  @apply opacity-100;
}

.nav-links {
  @apply flex space-x-4;
}

.nav-link {
  @apply text-lg hover:text-gray-400 transition-colors;
}
.histories i.fa-magnifying-glass {
  @apply text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2;
}

.histories input[type="text"] {
  @apply pl-10 text-sm;
}
.login {
  @apply flex flex-col items-center justify-center my-20;
}

.login i {
  @apply text-5xl;
}

.login h1 {
  @apply text-3xl my-4 border-none;
}

.login input[type="checkbox"] {
  @apply mr-2 ml-0;
}

.login input[type="submit"] {
  @apply m-0;
}
.notes-modal-trigger {
  @apply cursor-pointer text-light-secondary dark:text-dark-secondary;
}

.notes-modal {
  @apply inset-0 items-center justify-center z-[100] flex;
}

.notes-modal-container {
  @apply bg-white dark:bg-gray-600 p-4 rounded-lg shadow-xl w-[50%] max-h-[70%] break-words whitespace-pre-line overflow-y-auto;
}

#navi-modal-trigger {
  @apply cursor-pointer text-light-secondary dark:text-dark-secondary absolute;
}

#navi-modal {
  @apply fixed inset-0 items-center justify-center z-50;
}

.plan .navi-modal-container {
  @apply max-w-[90%] md:max-w-4xl bg-white dark:bg-gray-600 p-4 rounded-lg shadow-xl;
}

.plan .navi-modal-container form {
  @apply mx-4;
}

.plan .navi-modal-container table {
  @apply w-full table-fixed;
}

.plan .navi-modal-container th {
  @apply bg-white dark:bg-gray-600;
}

.plan .navi-modal-container input,
.plan .navi-modal-container select {
  @apply w-full text-xs md:text-sm;
}

.plan .navi-modal-container input[type="submit"] {
  @apply w-[25%] mt-8 mr-3 mb-0;
}
.branch-and-sales {
  @apply text-xs mt-8;
}

.branch-and-sales .divider {
  @apply mx-2 text-gray-300 dark:text-gray-600;
}

.branch-and-sales .user-name {
  @apply mr-0;
}

.branch-and-sales .avatar {
  @apply mx-1;
}

.title-and-status {
  @apply mb-4 flex items-center;
}

.title-and-status h1 {
  @apply my-0;
}

.title-and-status h2 {
  @apply my-0 mr-5;
}

.comments {
  @apply my-8;
}

.comments i {
  @apply text-gray-300;
}

.comments i.fa-message {
  @apply pr-2 pl-3;
}

.comments ol {
  @apply mx-6 relative border-l border-gray-200 dark:border-gray-700;
}

.comments li {
  @apply mb-6 ml-6 p-4 bg-white border border-gray-200 rounded-lg shadow-sm text-xs dark:bg-neutral-800 dark:border-gray-700 dark:text-gray-300;
}

.comments .avatar {
  @apply absolute w-6 h-6 -left-3 rounded-full;
}

.comments form img {
  @apply w-1/6 rounded-lg;
}

.comment-header {
  @apply flex justify-between mb-1 text-gray-400;
}

.comment-body {
  @apply p-2 mt-2 border border-gray-200 rounded-lg bg-gray-50 dark:bg-neutral-700 dark:border-neutral-700 text-sm;
}

.comment-file {
  @apply mt-2 flex items-end;
}

.comment-file img {
  @apply max-w-[50%];
}

.comment-file i {
  @apply text-light-secondary dark:text-dark-pale_secondary;
}

.comment-file embed {
  @apply w-1/2 h-80;
}

.comment-activity-container {
  @apply flex items-center justify-between mt-1;
}

.reactions {
  @apply flex items-center;
}

.reacted-stamp {
  @apply w-11 h-8 py-1 pr-4 pl-1 rounded cursor-pointer flex items-center text-sm text-gray-400 border border-gray-200 dark:border-neutral-700 hover:border-gray-400 dark:hover:border-neutral-500 relative;
}

.reacted-stamp img {
  @apply mr-1;
}

.my-reacted-stamp {
  @apply bg-light-pastel_secondary dark:bg-dark-inky_secondary border-light-pale_secondary dark:border-dark-inky_secondary hover:border-light-pale_secondary dark:hover:border-dark-inky_secondary;
}

.comment-activity-buttons {
  @apply flex;
}

.comment-activity-container i {
  @apply dark:text-gray-400 rounded border border-gray-200 dark:border-neutral-700 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-neutral-700 cursor-pointer;
}

i.stamps-modal-trigger {
  @apply text-lg mr-2;
  padding: 1px 6px;
}

.stamps-modal {
  @apply border dark:border-gray-700 rounded-lg absolute top-5 right-10 items-center justify-center z-50;
}

.stamp {
  @apply w-8 h-8 p-1 mx-auto rounded border border-gray-200 dark:border-neutral-700 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-neutral-700 cursor-pointer;
}

.tooltip {
  @apply bg-gray-400 dark:bg-neutral-600 text-xs text-white dark:text-gray-300 px-2 py-1 rounded-lg shadow-lg absolute top-10 left-0 w-32 z-50;
}

.tooltip img {
  @apply w-12 h-12 p-1 mx-auto my-1 bg-white rounded;
}

.tooltip-arrow {
  @apply absolute -top-3 left-3 text-base text-gray-400 dark:text-neutral-600 z-50;
}

.bookmark {
  @apply w-10 relative;
}

.bookmark i {
  @apply text-base;
  padding: 3px 9px;
}

.bookmark .tooltip {
  @apply top-8 w-28;
}

.bookmark .tooltip-arrow {
  left: 0.5rem;
}

.timeline {
  @apply my-8;
}

.timeline i {
  @apply text-gray-400 px-2;
}

.timeline-container {
  @apply bg-gray-50 dark:bg-dark-background overflow-y-auto max-h-48 rounded-lg border border-gray-300 dark:border-gray-600;
}

.timeline-container ol {
  @apply mx-6 my-3 relative border-l border-gray-200 dark:border-gray-700;
}

.timeline-container li {
  @apply mb-5 ml-4;
}

.timeline-bar {
  @apply absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 dark:bg-gray-700 border-none;
}

.timeline-container time {
  @apply text-gray-400 dark:text-gray-500 text-sm;
}

.timeline-container span {
  @apply text-white ml-1 px-1 py-0.5 rounded text-xs;
}

.timeline-container p {
  @apply mt-1 text-light-text dark:text-gray-300 text-sm;
}
section.report {
  @apply my-10 overflow-x-auto;
}

section.report tbody tr:last-child th {
  @apply bg-[#666666] text-white text-xs border-[#666666] border-b-2 rounded-none;
}

section.report tbody tr:last-child td {
  @apply border-[#666666] border-b-2;
}

section.report:last-child td {
  @apply border border-y-[#666666] text-center;
}
aside {
  @apply bg-light-sidebar w-52 py-4 h-full z-[100] fixed left-0 overflow-y-auto dark:bg-dark-sidebar;
}

.logo, .logo i {
  @apply text-2xl font-bold;
}

.logo {
  @apply pl-4;
}

.logo i {
  @apply mr-1;
}

aside h2 {
  @apply text-xs font-semibold mt-8 mb-2 pl-4;
}

aside i {
  @apply mr-2 text-xs;
}

aside li a {
  @apply flex items-center py-1.5 pl-8 text-xs hover:rounded-r-lg hover:mr-4 hover:bg-light-primary hover:text-white dark:hover:bg-dark-primary;
}

aside li a.navi {
  @apply hover:bg-light-navi dark:hover:bg-dark-navi;
}

aside li a.pamphlet {
  @apply hover:bg-light-pamphlet dark:hover:bg-dark-pamphlet;
}

aside li a.homepage {
  @apply hover:bg-light-homepage dark:hover:bg-dark-homepage;
}

aside li a.booth {
  @apply hover:bg-light-booth dark:hover:bg-dark-booth;
}

aside li a.animation {
  @apply hover:bg-light-animation dark:hover:bg-dark-animation;
}

aside li a.movie {
  @apply hover:bg-light-movie dark:hover:bg-dark-movie;
}

aside span {
  @apply ml-2;
}
.status span {
  @apply text-xs font-medium px-2.5 py-1 rounded text-white;
}
.filters {
  @apply mb-8;
}

.filters ul {
  @apply flex justify-end items-center;
}

.filters li {
  @apply ml-1;
}

.sticky-xy-container {
  @apply overflow-x-auto overflow-y-auto max-h-[800px];
}

table {
  @apply min-w-full text-left my-2;
}

thead {
  @apply text-white text-xs bg-[#666666];
}

th {
  @apply px-3 py-2 whitespace-nowrap bg-[#666666];
}

th.sticky-x-scroll {
  @apply md:sticky md:z-50;
}

th.sticky-y-scroll {
  @apply sticky top-0 z-10;
}

th.sticky-y-scroll-second-row {
  @apply top-8;
}

th.sticky-xy-scroll {
  @apply sticky top-0 md:z-50;
}

th:first-child {
  @apply rounded-tl;
}

th:last-child {
  @apply rounded-tr;
}

tbody {
  @apply text-xs;
}

td {
  @apply px-3 py-2 border-b border-gray-300 whitespace-nowrap;
}

td.sticky-x-scroll {
  @apply md:sticky md:z-10 bg-light-background dark:bg-dark-background;
}

tr.disabled td {
  @apply bg-gray-300 dark:bg-dark-background text-light-text dark:text-gray-600;
}

tr.disabled td.notes {
  @apply text-light-text dark:text-dark-text !important;
}

td.users img {
  @apply inline-block;
  max-width: none;
}

td.users br {
  display: none;
}

td.alert-bg {
  @apply bg-[#f2606d] dark:bg-[#bf4854] text-white;
}

table a {
  @apply p-0 cursor-pointer text-light-secondary dark:text-dark-secondary;
}

.unrounded {
  @apply rounded-none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */