/* GLOBAL */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#f5f6fa;
color:#222;

height:100vh;
overflow:hidden;
display:flex;
flex-direction:column;
}

/* HEADER */

.app-header{
background:#1f2937;
color:white;
padding:16px 28px;
font-size:20px;
font-weight:600;
margin-bottom:8px;
}


/* TOOLBAR */

.toolbar{
display:flex;
align-items:center;
gap:12px;
padding:12px 24px;
background:white;
border-bottom:1px solid #ddd;
flex-wrap:wrap;

position:sticky;
top:0;
z-index:1000;

box-shadow:0 2px 6px rgba(0,0,0,0.08);
}


/* ACTION BUTTONS */

.toolbar button{
background:#2563eb;
color:white;
border:none;
padding:8px 14px;
border-radius:4px;
font-size:14px;
cursor:pointer;
}

.toolbar button:hover{
background:#1d4ed8;
}


/* DROPDOWN */

.toolbar select{
padding:7px 10px;
border:1px solid #ccc;
border-radius:4px;
background:white;
font-size:14px;
cursor:pointer;
}

.toolbar select:hover{
border-color:#2563eb;
}


/* KEEP QUILL BUTTONS NORMAL */

#editor_toolbar button{
background:transparent;
color:inherit;
border:none;
padding:4px;
}


/* QUILL TOOLBAR */

#editor_toolbar{
border-bottom:1px solid #e5e5e5;
background:#fafafa;
padding:6px;
margin-bottom:10px;
}


/* MAIN LAYOUT */

.editor-layout{
display:flex;
flex:1;
align-items:stretch;
overflow:hidden;
}


/* LEFT PANEL */

.editor-panel{
flex:none;
width:50%;
min-width:200px;
padding:20px;
overflow-y:auto;
background:white;
border-right:1px solid #ddd;
}


/* RIGHT PANEL */

.preview-panel{
flex:none;
width:43%;
min-width:200px;
padding:20px;
margin-right:20px;
overflow-y:auto;
background:#fafafa;
}


/* DRAG BAR */

#dragbar{
width:6px;
background:#ddd;
cursor:col-resize;
}

#dragbar:hover{
background:#999;
}


/* QUILL EDITOR */

#editor{
height:300px;
background:white;
}

.ql-editor{
font-size:20px;
line-height:1.6;
}


/* LIVE PREVIEW */

#live_preview{
margin-top:10px;
border:1px solid #ddd;
padding:12px;
font-size:26px;
background:white;

height:300px;
overflow-y:auto;
overflow-x:hidden;

white-space:pre-wrap;
line-height:1.8;

font-family: "Noto Serif Devanagari", serif;
}


/* CONVERTED OUTPUT */

#converted_output{
margin-top:10px;
border:1px solid #ddd;
padding:16px;
padding-right:45px;
background:white;
min-height:300px;
white-space:pre-wrap;

font-family: "Noto Serif Devanagari", serif;
font-size:24px;
line-height:1.8;
}


/* FOOTER */

#footer{
padding:8px 20px;
font-size:12px;
color:#777;
background:#f1f1f1;
text-align:center;
}

/* RESPONSIVE */
/* Responsive Layout - Main Editor Starts */

@media (max-width:900px){

.editor-layout{
flex-direction:column;
height:auto;
}

.editor-panel{
border-right:none;
border-bottom:1px solid #ddd;
}

#dragbar{
display:none;
}

}
/* Responsive Layout - Main Editor Ends */

/* DARK MODE */

body.dark{
background:#1e1e1e;
color:#ddd;
}

/* toolbar */

body.dark .toolbar{
background:#2a2a2a;
border-bottom:1px solid #444;
}

/* editor panels */

body.dark .editor-panel{
background:#1e1e1e;
color:#ddd;
}

body.dark .preview-panel{
background:#1e1e1e;
color:#ddd;
}

/* quill editor input area */

body.dark .ql-container{
background:#111;
color:#eee;
}

body.dark .ql-editor{
color:#eee;
}

/* quill formatting toolbar */

body.dark #editor_toolbar{
background:#e5e5e5;
border-bottom:1px solid #bbb;
}

/* preview blocks */

body.dark #live_preview,
body.dark #converted_output{
background:#111;
color:#eee;
border-color:#444;
}

/* force dark background for quill editor */

body.dark #editor .ql-container{
background:#111 !important;
}

body.dark #editor .ql-editor{
background:#111 !important;
color:#eee !important;
}

/* KDL-Sa Keyboard */

#kdl_keyboard{
position:relative;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:white;
border:1px solid #aaa;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
padding:10px;
display:none;
z-index:2000;
}

.kbd_header{
display:flex;
justify-content:space-between;
margin-bottom:6px;
font-weight:bold;
}

.kbd_row{
display:flex;
margin-bottom:4px;
flex-wrap:wrap;
}

.kbd_key{
width:50px;
height:50px;
margin:2px;
font-size:12px;
cursor:pointer;
}

.kbd_key.space{
width:250px;
}

.kbd_key.wide{
width:80px;
}

/* CSS for VKB */

/* ========================= */
/* VIRTUAL KEYBOARD */
/* ========================= */

#vkb_container{

position:relative;

bottom:50px;
left:50%;

transform:translateX(-50%);

width:920px;
height:780px;

background:#f3f3f3;

border:1px solid #777;
border-radius:6px;

box-shadow:0 6px 16px rgba(0,0,0,0.35);

display:none;

z-index:3000;

}

#vkb_header{

display:flex;
justify-content:space-between;
padding:6px 12px;

background:#ddd;
font-weight:bold;

}

#vkb_body{

display:flex;
/* height:740px; */
height:calc(75vh - 40px);
}

/* LEFT PANEL */

#vkb_left{

width:60%;
padding:10px;
overflow-y:auto;

}

#vkb_grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:6px;

}



/* KEY STYLE */
/*
.vkb_key{

height:60px;
background:#ffffff;
border:1px solid #888;
border-radius:4px;

display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;

padding:4px 6px;

cursor:pointer;

}

.key_left{

display:flex;
flex-direction:column;
align-items:flex-start;

}

.vkb_key .kdl{

font-size:12px;
color:#444;

}

.vkb_key .dev{

font-size:20px;
font-family:"Noto Serif Devanagari",serif;

}

.vkb_key .iast{

font-size:12px;
color:#777;

}

*/

/* RIGHT PANEL */

#vkb_right{

width:40%;
display:flex;
flex-direction:column;
padding-right:20px;

}

#vkb_kdl_panel,
#vkb_dev_panel{

flex:1;
padding:10px;
border-left:1px solid #ccc;
overflow:auto;

}

#vkb_kdl_panel,
#vkb_dev_panel{

flex:1;
padding:10px;
border-left:1px solid #ccc;
overflow:auto;

}

#vkb_kdl_output{

font-size:18px;
white-space:pre-wrap;

}

#vkb_dev_output{

font-size:26px;
white-space:pre-wrap;

}

/* ============================= */
/* VIRTUAL KEYBOARD KEYS */
/* ============================= */

#vkb_grid{

display:grid;
grid-template-columns:repeat(5,1fr);
row-gap:4px;
column-gap:6px;
}

.vkb_key{

height:38px;
background:#ffffff;
border:1px solid #888;
border-radius:4px;

display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;

padding:4px 6px;

cursor:pointer;

/* Prevent double-click text selection */
user-select:none;

}


/* ============================= */
/* VKB TIP AREA */
/* ============================= */

#vkb_tip{

margin-top:6px;

font-size:13px;

text-align:center;

color:#555;

line-height:1.4;

}


/* small key-style inside tips */

.tip_key{

display:inline-block;

padding:2px 6px;

margin:0 2px;

border:1px solid #888;

border-radius:3px;

background:#f3f3f3;

font-family:"Noto Serif Devanagari",serif;

}


/* ============================= */
/* VKB SPACE BAR ALIGNMENT FIX */
/* ============================= */

#space_bar_btn{

display:flex;
justify-content:center;
align-items:center;

text-align:center;

}

.key_left{

display:flex;
flex-direction:column;
align-items:flex-start;

}

.vkb_key .kdl{

font-size:12px;
color:#444;

}

.vkb_key .dev{

font-size:20px;
font-family:"Noto Serif Devanagari",serif;

}

.vkb_key .iast{

font-size:12px;
color:#777;

}

.vkb_key span{

font-size:16px;
font-family: "Noto Serif Devanagari", serif;

}

.vkb_key:hover{

background:#e5e5e5;

}

/* ============================= */
/* VKB BOTTOM CONTROL ROW */
/* ============================= */

#vkb_bottom_row{

display:grid;

grid-template-columns:1.5fr 2fr 1.5fr;

gap:6px;

margin-top:8px;

}

#vkb_bottom_row button{

height:40px;

border:1px solid #888;
border-radius:4px;

background:#ffffff;

cursor:pointer;

font-size:14px;

}

/* ============================= */
/* VKB BUTTON TEXT SELECTION FIX */
/* ============================= */

#vkb_bottom_row button{

user-select:none;

}

/* VKB bottom buttons hover */

#vkb_bottom_row button:hover{

background:#e5e5e5;
cursor:pointer;

}

/* ============================= */
/* VKB DARK MODE SUPPORT */
/* ============================= */

body.dark #vkb_container{

background:#1f2937;
border-color:#555;

}

body.dark .vkb_key{

background:#2b3445;
color:#eee;
border-color:#555;

}

/* ====================================== */
/* DARK MODE TEXT VISIBILITY */
/* ====================================== */

body.dark .vkb_key .kdl{

color:#f0f0f0;

}

body.dark .vkb_key .iast{

color:#d0d0d0;

}

body.dark .vkb_key .dev{

color:#ffffff;

}

body.dark .vkb_key:hover{

background:#3a455a;

}

body.dark #vkb_kdl_panel,
body.dark #vkb_dev_panel{

background:#1f2937;
color:#eee;

}

body.dark #vkb_bottom_row button{

background:#2b3445;
color:#eee;
border-color:#555;

}

body.dark #vkb_bottom_row button:hover{

background:#3a455a;

}

/* ============================= */
/* VKB TIP DARK MODE */
/* ============================= */

body.dark #vkb_tip{

color:#ccc;

}

body.dark .tip_key{

background:#2b3445;

border-color:#555;

color:#eee;

}

/* ====================================== */
/* VKB HEADER - DARK MODE FIX */
/* ====================================== */

body.dark #vkb_header{

background:#1f2937;
color:#ffffff;
border-bottom:1px solid #444;

}

body.dark #vkb_header button{

color:#ffffff;
}


/* Modification to include Responsive Screen Behaviour Starts */

/* ====================================== */
/* RESPONSIVE VKB - TABLET */
/* ====================================== */

@media (max-width:1200px){

#vkb_container{

width:95%;
height:720px;

left:50%;
transform:translateX(-50%);

}

#vkb_body{
/* height:680px; */
height:calc(75vh - 40px);
}

.vkb_key{

height:34px;

}

.vkb_key .dev{
font-size:16px;
}

.vkb_key .iast{
font-size:10px;
}

}


/* ====================================== */
/* RESPONSIVE VKB - MOBILE */
/* ====================================== */
/* Responsive Layout - Virtual Keyboard Starts */

@media (max-width:700px){

#vkb_container{

position:fixed;

bottom:0;
left:0;

width:100%;
height:55vh;

transform:none;

border-radius:0;

}

#vkb_header{

font-size:14px;
padding:6px;

}

#vkb_body{

flex-direction:column;

height:calc(55vh - 40px);

}

/* Modifying below block for mobile vkb panel balance */

/* ====================================== */
/* MOBILE VKB PANEL BALANCE */
/* ====================================== */

#vkb_left{

width:100%;
height:50%;

padding:6px;

}

#vkb_right{

width:100%;
height:50%;

display:flex;
flex-direction:column;

}

#vkb_kdl_panel,
#vkb_dev_panel{

flex:1;

overflow-y:auto;

padding:6px;

}

/* Modifying above block for mobile vkb panel balance */

#vkb_grid{

grid-template-columns:repeat(5,1fr);
row-gap:3px;
column-gap:3px;

}

.vkb_key{

height:28px;
font-size:11px;

}

.vkb_key .dev{
font-size:14px;
}

.vkb_key .iast{
font-size:9px;
}

#vkb_bottom_row button{

height:30px;
font-size:12px;

}

}

/* ====================================== */
/* RESPONSIVE VKB - MOBILE LANDSCAPE */
/* ====================================== */

@media (max-width:900px) and (orientation:landscape){

#vkb_container{

height:70vh;

}

#vkb_body{

height:calc(70vh - 40px);

}

#vkb_left{

height:55%;

}

#vkb_right{

height:45%;

}

.vkb_key{

height:24px;

}

.vkb_key .dev{

font-size:13px;

}

.vkb_key .kdl{

font-size:10px;

}

.vkb_key .iast{

font-size:9px;

}

}
/* Responsive Layout - Virtual Keyboard Ends */
/* Modification to include Responsive Screen Behaviour Ends */

/* ====================================== */
/* KDL TABLE STYLE                        */
/* ====================================== */

.kdl_table{
border-collapse:collapse;
margin-top:10px;
}

.kdl_table td{
border:1px solid #444;
padding:6px 10px;
min-width:40px;
text-align:center;
}

body.dark .kdl_table td{
border:1px solid #aaa;
}

/* ====================================== */
/* WORKSHEET BLANK STYLE                  */
/* ====================================== */

.kdl_blank{
letter-spacing:2px;
font-weight:bold;
}


/* CSS for HLP */

/* ========================= */
/* HELP POPUP */
/* ========================= */

#hlp_container{

position:relative;

bottom:50px;
left:50%;

transform:translateX(-50%);

width:920px;
height:780px;

background:#f3f3f3;

border:1px solid #777;
border-radius:6px;

box-shadow:0 6px 16px rgba(0,0,0,0.35);

display:none;

z-index:4000;

}

#hlp_header{

display:flex;
justify-content:space-between;
padding:6px 12px;

background:#ddd;
font-weight:bold;

}

#hlp_body{

display:flex;
/* height:740px; */
height:calc(75vh - 40px);
margin-top:15px;
margin-left:15px;
font-size:14pt;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
}