/* Light or Dark Mode */
:root{
--bg-color:#ccc;
--text-color:#000;
--link-color:#C00;
--link-hover-color:#900;
--container-bg:#fff;
--menu-bg:#f8f8f8;
--table-header-bg:#f8f8f8;
--row-classic-bg:#fff;
--row-alt-bg:#eee;
--no-fax-bg:#eee;
--fax-date-color:#777;
--status-scheduled:#A7C7E7;
--status-sending:#FDFD96;
--status-success:#80EF80;
--status-fail:#FF746C;
--status-unknown:#3D3D3D;
--status-unknown-text:#fff;
--status-fail-text:#fff;
--input-bg:#eee;
--input-color:#000;
--btn-bg:#C00;
--btn-hover-bg:#900;
--footer-color:#666;
--modal-bg:#fff;
--modal-backdrop:rgba(0,0,0,.5);
--modal-option:#eee;
--modal-option-text:#000;
--folder-bg:#f8f8f8;
--badge-public-bg:#666;
--badge-public-color:#fff;
--badge-users-bg:#17a2b8;
--badge-users-color:#fff;
--disk-bar-bg:#fff;
--disk-fill-ok:#2ecc71;
--disk-fill-warn:#f39c12;
--disk-fill-fail:#e74c3c;
--disk-percent-warn:#f39c12;
--disk-percent-fail:#e74c3c;
--fax-new-bg:#C00;
}
@media(prefers-color-scheme:dark){
:root{
--bg-color:#121212;
--text-color:#e0e0e0;
--link-color:#FF6B6B;
--link-hover-color:#FF3B3B;
--container-bg:#1E1E1E;
--menu-bg:#222;
--table-header-bg:#2A2A2A;
--row-classic-bg:#252525;
--row-alt-bg:#1A1A1A;
--no-fax-bg:#1A1A1A;
--fax-date-color:#aaa;
--status-scheduled:#3A6EA5;
--status-sending:#D1C94A;
--status-success:#318755;
--status-fail:#E74C3C;
--status-unknown:#555;
--status-unknown-text:#fff;
--status-fail-text:#fff;
--input-bg:#333;
--input-color:#fff;
--btn-bg:#FF3B3B;
--btn-hover-bg:#C00;
--footer-color:#aaa;
--modal-bg:#222;
--modal-backdrop:rgba(0,0,0,.7);
--modal-option:#333;
--modal-option-text:#fff;
--folder-bg:#2A2A2A;
--badge-public-bg:#555;
--badge-public-color:#fff;
--badge-users-bg:#2980b9;
--badge-users-color:#fff;
--disk-bar-bg:#333;
--disk-fill-ok:#2ecc71;
--disk-fill-warn:#f39c12;
--disk-fill-fail:#e74c3c;
--disk-percent-warn:#f39c12;
--disk-percent-fail:#e74c3c;
--fax-new-bg:#FF3B3B;
}}



/* Base - Global */
body{background-color:var(--bg-color);color:var(--text-color);font-family:verdana,arial,helvetica,sans-serif;font-size:1em;margin:0;padding:0;}
a{color:var(--link-color);cursor:pointer;text-decoration:none;}
a:hover{color:var(--link-hover-color);text-decoration:underline;}
a img{border:0;margin-top:auto;margin-bottom:auto;display:block;}
footer{text-align:center;padding:10px;font-size:0.8em;color:var(--footer-color);}
.label{width:20%;}
.field{width:80%;}
label,input{font-size:16px;}

/* Base - Container */
#container{max-width:1000px;width:90%;margin:50px auto 0px auto;padding:20px;background-color:var(--container-bg);border-radius:12px;box-shadow:0 0 15px rgba(0,0,0,.2);display:flex;flex-wrap:wrap;gap:20px;}

/* Base - Main */
#main{flex:1;min-width:0;}
#logo{padding-top:18px;text-align:center;}

/* Base - Menu */
#menu{width:220px;padding:15px;background-color:var(--menu-bg);border-radius:10px;box-sizing:border-box;height:fit-content;}
#menu ul{line-height:1.5em;list-style-type:none;text-indent:-25px;}
#menu ul li a{color:var(--text-color);text-decoration:none;}
#menu ul li.active a{color:var(--link-color);font-weight:bold;}
#menuToggle{display:none;}
a.menulink{color:var(--text-color);text-decoration:none;}
a.menulink:hover{color:var(--text-color);text-decoration:none;}

/* Table */
.table-wrapper{overflow-x:auto;border-radius:10px;}
.table-wrapper .faxlist-top{height:49.5px;padding-top:0px;padding-bottom:0px;}
table{width:100%;border:0;border-collapse:collapse;table-layout:auto;}
th{background-color:var(--table-header-bg);padding:12px;text-align:left;font-size:1.2em;}
td{padding:2px 10px 2px 12px;font-size:1em;vertical-align:middle;word-break:break-word;}
.row-classic{background-color:var(--row-classic-bg);height:59px;}
.row-alternate{background-color:var(--row-alt-bg);;height:59px;}
.no-fax{text-align:center;background-color:var(--no-fax-bg);height:39px;}
.fax-date{font-size:0.85em;color:var(--fax-date-color);}



/* Status Row */
.fax-status-user{font-weight:normal;font-size:0.85em;float:right;}
.status-scheduled-row{background-color:var(--status-scheduled);height:59px;}
.status-sending-row{background-color:var(--status-sending);height:59px;}
.status-success-row{background-color:var(--status-success);height:59px;}
.status-fail-row{background-color:var(--status-fail);color:var(--status-fail-text);height:59px;}
.status-unknown-row{background-color:var(--status-unknown);color:var(--status-unknown-text);height:59px;}
.status-scheduled-row td,.status-sending-row td,.status-success-row td,.status-fail-row td,.status-unknown-row td{font-weight:bold;}
.status-detail{font-weight:normal;font-size:0.85em;}



/* Buttons, Icon, Badge */
#fax-status-body .command_button{width:40px;text-align:center;}
.icon,.command_button{width:32px;text-align:center;}
.command_button a{font-weight:bold;}
.icon-wrapper{position:relative;display:inline-block;vertical-align:middle;}
.icon-wrapper img{display:block;height:auto;}
.fax-status-badge{display:flex;position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:normal;font-size:0.85em;align-items:center;gap:6px;}
.status-badge{position:absolute;top:-5px;left:-5px;background:rgba(255,255,255,0.9);border-radius:50%;width:17px;height:17px;line-height:17px;box-shadow:0 1px 3px rgba(0,0,0,0.3);z-index:10;}
th.send_status{position:relative;}
.list-container{display:flex;flex-wrap:wrap;font-size:0.85em;}
.item-badge{margin-top:3px;margin-right:3px;background:var(--table-header-bg);border:1px solid #ccc;padding:3px 3px;display:inline-flex;align-items:center;border-radius:10px;}
.remove-btn{color:var(--link-color);cursor:pointer;font-weight:bold;margin-left:3px;font-size:1em;}
.input-group{display:flex;gap:5px;}
.input-group input[type="text"]{flex:1;border:1px solid #999;border-radius:10px;box-sizing:border-box;height:35px;padding:0 10px;background-color:var(--input-bg);color:var(--input-color);}
.input-group button,.file-label{background-color:var(--btn-bg);color:#fff;border:none;padding:8px 15px;border-radius:10px;cursor:pointer;font-size:1em;display:inline-block;transition:background-color 0.2s;}
.file-label{display:block;width:100%;text-align:center;box-sizing:border-box;}
.input-group button:hover,.file-label:hover{background-color:var(--btn-hover-bg);}
.send-btn{background-color:var(--btn-bg);color:#fff;padding:10px 30px;border:none;border-radius:10px;font-size:0.8em;cursor:pointer;}
#fileInput{display:none;}
input[type="datetime-local"]{width:100%;max-width:100%;display:block;border:1px solid #999;border-radius:10px;box-sizing:border-box;height:35px;padding:0 10px;font-family:inherit;line-height:normal;-webkit-appearance:none;color:var(--input-color);background-color:var(--input-bg);}
input[type="datetime-local"]::-webkit-date-and-time-value{color:var(--input-color);height:35px;line-height:35px;}
input[type="text"],input[type="file"]{width:100%;box-sizing:border-box;padding:6px;background-color:var(--input-bg);}
.btn-action{font-size:1em}
input::placeholder{color:var(--text-color);opacity:1;}
textarea::placeholder{color:var(--text-color);opacity:1;}


/* Login - Base */
#login-container{max-width:400px;margin:50px auto 0px auto;background-color:var(--container-bg);padding:30px;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,.2);}
#login-container img{display:block;margin-left:auto;margin-right:auto;}
#login-container h2{text-align:center;color:var(--link-color);}
#login-container form{display:flex;flex-direction:column;}
#login-container label{margin-bottom:15px;font-size:1em;}
#login-container input[type="text"],#login-container input[type="password"]{width:100%;padding:8px 10px;font-size:1em;border:1px solid #999;border-radius:10px;box-sizing:border-box;background-color:var(--input-bg);color:var(--input-color);}
#login-container button{background-color:var(--btn-bg);color:#fff;padding:10px;font-size:1em;border:none;border-radius:10px;cursor:pointer;}
#login-container button:hover{background-color:var(--btn-hover-bg);}
#login-container .error-msg{color:red;margin-bottom:15px;text-align:center;}



/* Dashboard - Base */
.dashboard-grid,.dashboard-bottom-grid{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;}
.dashboard-col,.dashboard-bottom-col{flex:1;min-width:300px;}
.fax-status-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;text-align:center;}
.fax-status-item{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.fax-status-icon{font-size:34px;margin-bottom:8px;}
.fax-status-icon.ok{color:green;}
.fax-status-icon.fail{color:red;}
.fax_status-trclass{text-align:center;background-color:var(--row-alt-bg);height:80.5px;}
.disk-percent{font-size:1em;font-weight:bold;margin-bottom:6px;}
.disk-bar{width:100%;height:10px;background:var(--disk-bar-bg);border-radius:6px;overflow:hidden;margin:6px 0 8px;}
.disk-bar-fill{height:100%;transition:width .4s ease;}
.disk-bar-fill.ok{background:var(--disk-fill-ok);}
.disk-bar-fill.warn{background:var(--disk-fill-warn);}
.disk-bar-fill.fail{background:var(--disk-fill-fail);}
.disk-percent.warn{color:var(--disk-percent-warn);}
.disk-percent.fail{color:var(--disk-percent-fail);}
.disk-free{font-size:0.8em;}



/* Icons - Base */
.icon-wrapper{position:relative;display:inline-block;}
.icon-wrapper .fax-new{position:absolute;top:-5px;left:-5px;font-size:11px;padding:2px 4px;z-index:10;background-color:var(--fax-new-bg);color:#fff;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.3);}

/* Icons - Fax Read / Unread Status */
.fax-read{font-weight:bold;text-decoration:none;color:var(--text-color);}
.fax-unread{font-weight:bold;color:var(--link-color)!important;}
.fax-new{display:inline-block;padding:1px 5px;font-size:11px;color:#fff;font-weight:bold;background-color:#C00;border-radius:5px;vertical-align:middle;box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);}

/* Icons - Memo Indicator */
.memo-icon{cursor:pointer;}
.fax-memo{display:inline-block;padding:2px 4px;margin-top:-2px;font-size:11px;font-weight:bold;background-color:#fff;border-radius:5px;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,0.3);color:#000;}



/* Fax List Buttons */
.faxlist-header{display:flex;align-items:center;justify-content:space-between;}
.faxlist-header .faxlist-actions{display:flex;justify-content:center;align-items:center;gap:5px;}
.faxlist-btn{height:35px;background-color:var(--btn-bg);color:#fff;padding:8px 15px;border:none;border-radius:10px;cursor:pointer;font-size:0.8em;}
.faxlist-btn:hover{background-color:var(--btn-hover-bg);}
.fax-link strong small{font-size:0.6em;color:#888;font-weight:normal;margin-left:4px;}
.page-btn.current{font-weight:bold;background-color:var(--btn-bg);color:#fff;}
.page-btn{color:#000;padding:8px 8px;border:none;font-size:0.8em;border-radius:8px;cursor:pointer;}
.page-btn:hover{background-color:var(--btn-hover-bg);color:#fff;}
.pagination-wrap{display:flex;align-items:center;justify-content:center;position:relative;}
.pagination{display:flex;justify-content:center;align-items:center;gap:4px;}



/* Contact Styles */
.badge{font-size:0.9em;padding:2px 6px;border-radius:5px;font-weight:bold;vertical-align:middle;}
.badge-public{background-color:var(--badge-public-bg);color:var(--badge-public-color);}
.badge-users{background-color:var(--badge-users-bg);color:var(--badge-users-color);}
.category-hint{font-size:0.8em;color:#888;font-weight:normal;margin-left:5px;}
.storage-selector{height:35px;margin-bottom:10px;border-radius:10px;background-color:var(--btn-bg);padding-left:5px;}
.storage-selector select{display:flex;background-color:transparent;width:98%;font-size:16px;height:100%;border:none;color:#fff;font-weight:bold;}
.modal-option{display:block;width:100%;height:39.5px;padding:8px 15px;border:none;border-radius:10px;color:var(--modal-option-text);background-color:var(--modal-option);text-align:left;cursor:pointer;margin-top:10px;font-size:1em;}
.modal-option.active{background-color:var(--btn-bg);color:#fff;font-weight:bold;}
.modal-option:hover{background-color:var(--btn-hover-bg);color:#fff;}
#newFolderDialogContent textarea{width:100%;max-width:100%;height:100px;font-size:16px;border:1px solid #999;border-radius:10px;box-sizing:border-box;padding:10px;background-color:var(--input-bg);color:var(--input-color);}



/* Modal - Base */
#commonModal{display:none;position:fixed;inset:0;z-index:1990;}
#commonModal .modal-backdrop{position:absolute;inset:0;background:var(--modal-backdrop);}
#commonModal .modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;max-height:80vh;background:var(--modal-bg);padding:15px;box-sizing:border-box;z-index:1;border-radius:10px;color:var(--text-color);box-shadow:0 8px 20px rgba(0,0,0,0.25),0 2px 6px rgba(0,0,0,0.2);}
#commonModal .modal-content h3{margin:0 0 10px 0;}
#commonModal .modal-content input[type=text]{font-family:inherit;width:100%;border:1px solid #999;border-radius:10px;box-sizing:border-box;height:35px;padding:0 10px;font-size:16px;background-color:var(--input-bg);color:var(--input-color);}
#commonModal .modal-content textarea{width:100%;max-width:100%;border:1px solid #999;border-radius:10px;box-sizing:border-box;padding:10px;font-size:16px;background-color:var(--input-bg);color:var(--input-color);}
#commonModal .modal-content p{margin:0;}
#commonModal .modal-btn{margin-top:10px;width:100%;background-color:var(--btn-bg);color:#fff;padding:10px;border:none;border-radius:10px;cursor:pointer;font-size:1em;}
#commonModal .modal-btn:hover{background-color:var(--btn-hover-bg);}
#commonModal .modal-actions{display:flex;justify-content:space-between;gap:1%;}

/* Modal - Search */
.search-options{margin-top:10px;line-height:1.5;text-align:left;background:var(--input-bg);padding:5px;border-radius:10px;border:1px solid #999;}
.search-options label{display:flex;align-items:center;cursor:pointer;font-size:1em;color:#333;white-space:nowrap;color:var(--text-color);}
.search-options input{margin-right:5px;background:var(--input-bg);color:var(--input-color);}
.folder-path-hint{font-size:0.8em;color:var(--text-color);display:block;margin-top:2px;}

/* Modal - Folder Tree */
#folderTree{flex:1;overflow-y:auto;}
#folderTree ul{list-style:none;margin:0px 0px 0px 20px;padding-left:0;}
.folder-item{margin:5px 0;cursor:pointer;touch-action:manipulation;}
.folder-toggle{display:inline-block;width:16px;}
.folder-item ul{display:block;}
.folder-name.selected{font-weight:bold;color:var(--link-color);}

/* Modal - Alert */
#alertDialog{display:none;}
#alertDialogBackdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--modal-backdrop);z-index:1990;}
#alertDialogContent{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;max-height:80%;background:var(--modal-bg);padding:15px;box-sizing:border-box;z-index:2000;border-radius:10px;color:var(--text-color);box-shadow:0 8px 20px rgba(0,0,0,0.25),0 2px 6px rgba(0,0,0,0.2);}
#alertDialogContent input[type=text]{width:100%;border:1px solid #999;border-radius:10px;box-sizing:border-box;height:35px;padding:0 10px;background-color:var(--input-bg);color:var(--input-color);}
#alertDialogContent h3{margin-top:0;margin-bottom:10px;}
#alertDialogContent p{margin:0;}
#alertDialogContent #alertDialogMemo{white-space:pre-wrap;word-break:break-all;background:#f9f9f9;padding:10px;border-radius:10px;margin-bottom:3.5px;border:1px solid #999;color:var(--text-color);}

/* Modal - Contact List (Send Fax) */
#contactListArea{max-height:300px;margin-top:10px;overflow-y:auto;border:1px solid #999;background-color:var(--container-bg);border-radius:10px;}
.contact-item-row.row-classic{background-color:var(--row-classic-bg);}
.contact-item-row.row-alternate{background-color:var(--row-alt-bg);}
.contact-check-area{margin-right:10px;display:flex;justify-content:center;align-items:center;}
.contact-item-row{display:flex;align-items:center;height:59px;padding:0 10px;border-bottom:1px solid #ccc;}
.contact-name-line{font-weight:bold;}
.contact-num-line{font-size:0.85em;color:var(--fax-date-color);}
.numinput_button_pc{display:block;}
.numinput_button_mobile{display:none;}
.contact-name-line>.badge-public{margin-right:5px;font-size:0.8em;}
.contact-name-line>.badge-users{margin-right:5px;font-size:0.8em;}

/* Modal - Fax Viewer */
.fax-viewer-modal{display:none;position:fixed;inset:0;background:#000;z-index:99999;overflow:hidden;}
.fax-viewer-content{position:relative;width:100%;height:100%;overflow-y: auto;-webkit-overflow-scrolling:touch;}
#faxViewerFrame{width:100%;height:100%;border:0;min-height: 100vh;}
#faxViewerClose{display:block;position:fixed;top:10px;right:10px;z-index:2100;background-color:var(--btn-bg);color:#fff;padding:10px;border-radius:10px;cursor:pointer;}
#faxViewerDisplay{width:100%;height:100%;}

/* Modal - Floating Alarm Modal */
#pushFloating{position:fixed;right:20px;bottom:20px;z-index:9999;}
.push-float-btn{width:60px;height:60px;border-radius:50%;border:none;font-size:24px;cursor:pointer;background:#2b7cff;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:.2s;}
.push-float-btn:hover{transform:scale(1.1);}


/* Responsive - Tablet (≤768px) */
@media screen and (max-width:768px){
#container{max-width:88%;min-width:88%;flex-direction:column;margin:20px auto 0px auto;padding:15px;}
#login-container{margin:20px auto 0px auto;padding:20px;}
#menu{position:fixed;top:0;left:-250px;width:220px;height:100%;background:var(--menu-bg);box-shadow:2px 0 5px rgba(0,0,0,.3);transition:left .3s ease;z-index:2100;overflow-y:auto;padding:20px;}
#menu.show{left:0;}
#main{width:100%;}
#menu ul{line-height:2em;}
#menuToggle{display:block;position:fixed;top:10px;right:10px;z-index:2100;background-color:var(--btn-bg);color:#fff;padding:10px;border-radius:10px;cursor:pointer;}
th,td{font-size:.95em;padding:8px;}
.icon,.command_button{height:42px;}
.send-btn{width:100%;font-size:1em;}
.faxlist-btn{height:32px;padding:0 15px;font-size:1em;}
.page-btn{padding:5px 7px;font-size:1em;}
.table-wrapper .faxlist-top{height:36.5px;padding-top:0px;padding-bottom:0px;}
.no-fax{height:43px;}
.dashboard-grid,.dashboard-bottom-grid{flex-direction:column;}
.fax-status-bar{grid-template-columns:repeat(2,1fr);}
.numinput_button_pc{display:none;}
.numinput_button_mobile{display:block;}
}

/* Responsive - Mobile (≤500px) */
@media screen and (max-width:500px){
#container{max-width:88%;min-width:88%;flex-direction:column;margin:15px auto 0px auto;auto;padding:15px;}
#login-container{margin:15px auto 0px auto;max-width: 85.5%;padding:20px;}
.storage-selector{padding-left:3px;}
.label{width:25%;}
.field{width:80%;}
}